はじめての道具箱 — まず知っておくこと
— 画面の表側と、裏方の Python —
AI の説明には、「HTML」「JavaScript」「Python」という名前がくり返し出てきます。この記事では、それぞれが道具のどの部分を受け持っているのかを、画面のある道具を例に、はじめての人向けに説明します。
この記事を読むとできること
想定している使い方
ブラウザ（Safari など、Web ページを見るアプリ）で開くチャット型の AI（Gemini や ChatGPT など）にコードを書いてもらい、 それを自分の Mac に保存して動かす使い方です。この記事の操作や画面の説明は、すべて Mac を前提にしています。
読む目安：約13分 ・ 道具箱の項目 A3（まず知っておくこと）・ 図4枚
HTML は画面の中身と骨組み、JavaScript は画面の上での動き、Python は Mac の中でファイルを扱う裏方です。HTML と JavaScript はブラウザの中で、Python は Mac の中で動きます。
どれも、コード（Mac やブラウザへの指示を書いた文章）を書くための言葉、つまりプログラミング言語です。AI に画面つきの道具を作ってもらうと、この3つが組み合わさった形で返ってきます。
道具がおかしいとき、チャットの AI はあなたの画面を見られません。そこで「どの部分がおかしいか」を伝えるのはあなたの役目になります。3つの分担を知っておくと、症状から「どの係（HTML・JavaScript・Python のどれ）の話か」を添えて頼めるので、AI が見当違いの所まで書き換えてしまうことが減ります。
図の見方：上の段は、「道具が動かない。直して」とだけ伝えた場合です。画面を見られない AI はどこのことか分からず、関係のない所まで書き換えてしまうことがあります。下の段は、「ボタンを押しても反応しない」と、画面の動き（JavaScript）の話だと分かるように伝えた場合です。AI はあなたが貼ったコードの中から、JavaScript の部分に絞って調べられます。
動画の一覧を出す道具を例にします。画面の上の働きは、どれかの係が受け持っています。見た目を受け持つ CSS を加えた4つで考えると分かりやすくなります。
HTML は、一覧の見出しや行、ボタンを画面に「置く」係です。CSS は、分類ごとの色分けや余白、暗い配色への切り替えといった見た目を受け持ちます。JavaScript は、ボタンを押したときに一瞬で絞り込んだり並べ替えたりする、画面の上の動きを受け持ちます。ここまでの3つはブラウザの中（画面の「表側」）で働きます。そして Python は、Mac の中で働く裏方です。フォルダを読んで一覧を作ったり、ファイルの名前を変えたり消したりします。画面の元になる HTML を組み立てて、ブラウザへ渡すのも裏方の仕事です。
※ CSS（Cascading Style Sheets）は、色・文字の大きさ・配置といった見た目だけを受け持つ書き方です。HTML とセットで使われるので、「HTML・CSS」とまとめて呼ばれることもあります。
ブラウザは、開いたページが勝手に Mac のファイルを書き換えないよう、鍵のかかった部屋のように作られています。どこかのサイトを開いただけで写真が消されたら困るからです。そのため、HTML と JavaScript だけでは、ファイルの名前を変えたり消したりできません。
そこで、Mac の中で動く Python に頼みます。画面の「編集」ボタンを押すと、その頼み（「この名前に変えて」）が Python に届き、Python が本物のファイルの名前を変えて、「変えました」という結果を画面に返します。このとき裏方の Python は、頼みを待ち受けて応える店のような役目（サーバー）として動いています（詳しくは A4「localhost とポート番号」）。
図の見方：上から順に、まず画面の「編集」ボタンから裏方の Python へ頼み、次に Python が本物のファイルの名前を変え、最後に結果が画面へ返ります。ブラウザの中から、ファイルへ直接向かう道はありません。
動画の一覧を出す道具は、最初は Python が作った1枚の HTML をブラウザで開くだけの作りでした。見たり絞り込んだりはできても、名前を変えるには Finder（Mac でファイルを見るアプリ）かターミナル（文字で命令を打ち込むアプリ）へ行く必要がありました。そこで Python を頼みを待ち受ける裏方（サーバー）として動かしておき、画面の「✏️ 編集」から頼めば、裏で Python が実物の名前を書き換える形に作り替えました。
係が分かると、AI に伝える内容が具体的になります。直したコードを書くのは AI ですが、「どの係のあたりがおかしいか」を添えるだけで、見当違いの直し方が減ります。
色・並び・文字の大きさがおかしいなら、HTML と CSS（表側）を疑います。ボタンを押しても何も起きないなら、JavaScript（表側）です。押すと反応はするのに、保存されない・ファイルが変わらないなら、Python（裏方）を疑います。見当が外れていても構いません。入口を絞れることが大事です。
起きていることから探してください。
| 起きていること | 原因 | どうするか |
|---|---|---|
| 画面を開くと、英語のエラーだけが出て何も表示されない | 裏方の Python が、画面の元になる HTML を組み立てる途中で、その型（テンプレート）の書き損じにつまずいた | 出ているエラーの文をそのまま AI に貼ります |
| ボタンを押しても反応がない | JavaScript がエラーで止まっている | ブラウザの「コンソール」（ページのエラーが表示される欄）に出た赤い文字を AI に貼ります。コンソールの開き方はブラウザごとに違うので、「（使っているブラウザ名）でコンソールを開く方法を教えて」と AI に聞けます |
| 画面では「保存しました」と出たのに、ファイルが変わっていない | 表側は動いたが、裏方の Python で失敗している | Python を動かしているターミナル（文字で命令を打ち込むアプリ。道具を起動した画面）に出たエラーを AI に貼ります |
| 1か所を直してもらったら、別の機能が動かなくなった | 直した部分を、ほかの機能も使っていることがある | 直したコードをもらうとき、影響が出そうなほかの機能も挙げてもらい、自分で動かして確かめます |
| 直したはずなのに、画面が前のまま | 裏方の Python が古い中身のまま動いている、またはブラウザが前の画面の控え（キャッシュ）を出している | Python を起動し直してから再読み込みします（A4「localhost とポート番号」） |
表の1行目と4行目は、チャットの AI に道具を作ってもらっていたころに実際に起きました。AI が書いた画面の型（テンプレート）に書き損じがあって画面が開かなくなったこと、タイトル検索を直してもらったら、今度は分類での絞り込みが効かなくなったことがあります。
※ この道具箱は対話型コーディング（ブラウザの画面でチャットの AI と文章をやりとりして、コードを書いてもらうやり方）の前提です。 チャットの AI はあなたの Mac を見られないので、頼むのは「コードを書いて」、困ったら出た文字を貼って伝えます。 係の名前を正しく言えなくても大丈夫です。「見た目」「画面の動き」「裏方の保存」のどれの話かを添えれば、十分に伝わります。 コード（道具のファイルの中身）も、すべてコピーして貼ります。下の文は、そのまま写すためのものではなく、言い方の見本です。
おかしなところを伝えるとき
「『保存』ボタンを押すと『保存しました』と出るのに、ファイルの名前が変わっていない。ターミナルに出た文字はこれ（貼る）。道具のコードはこれ（ファイルの中身を全部貼る）。画面の動きではなく、裏方の保存のほうを疑って、どこを直せばいいか教えて」
直したコードをもらうとき
「直したところだけでなく、この変更でほかに影響が出そうな機能も挙げて。私がそれも動かして確かめる」
※ 2つ目のように頼んでおくと、1か所を直したら別の所が壊れた、という事故に早く気づけます。
分担が分かったかは、自分の道具の画面を見ながら、それぞれの係を指さしてみると確かめられます。
道具の画面でボタンを1つ選び、「置いているのは HTML、色は CSS、押したときの動きは JavaScript」と指さしてみます。
ファイルを書き換える操作を1つして、そのとき Python を動かしているターミナルに1行出てくるかを見ます。これが、裏で Python が働いた跡です。
道具のコードが入ったファイル（名前が .html や .py で終わるもの）の中身をすべてコピーして AI に貼り、「この道具の、HTML・JavaScript・Python がそれぞれ何を受け持っているか、3行で説明して」と頼みます。AI はコードを貼らないと何も見えないからです。答えが自分の指さしと合っているかをくらべます。ファイルの中身をコピーする方法が分からなければ、「（ファイルの名前）の中身をコピーする方法を教えて」と AI に聞けます。貼る前に、パスワードや API キー（外のサービスを使うための合言葉）が書かれていないかを目で確かめます（E5「データを丸ごと渡さない」）。