なぜ要るか
必ず、動かなくなる日が来ます。AIに任せるほど頻度は上がります。 一度に触る量が多いからです。
そのとき困るのは「エラーが出ること」ではありません。どこを見ればいいか分からないことです。分からないと、勘で直そうとして、余計に壊れます。
この術で身につけるのは修理の技術ではありません。原因の場所を特定する手順です。場所が分かれば、直すのはAIがやってくれます。
順番はたった3つです。画面を見る → コンソールを見る → エラー文をAIに渡す。 これだけで大半が片付きます。
AIプロンプト
この術の作業をAIへ任せるときは、これをそのまま貼ってください。
index.html を開いたら（ここへ画面の症状を1行で書く）、コンソールに（ここへエラー文をそのまま貼る）と出ています。直して。
エラー文は要約せず、コンソールに出ている文字列をそのままコピーしてください。
実際に壊れた例で見ます
作りかけのゲームで、こんな状態になりました。
見てください。タイトルは出ています。的も3つ並んでいて、「相手の手札」「自分の手札」の文字も、「札をえらんでください。」の案内も出ています。でも札が1枚もありません。 押すものが無いので、遊べません。
この状態から、原因の場所を突き止めます。
手順1: 画面を見て、どこまで動いたか判断する
真っ白か、途中まで出ているかで、原因の場所が変わります。
| 画面の様子 | 原因のありそうな場所 |
|---|---|
| 真っ白で何も出ない | HTMLの書き方が壊れている。かなり手前 |
| 文字は出るが中身が出ない | JavaScriptが途中で止まっている |
| 見た目が崩れている | CSSの問題。動きは生きている |
| 押しても反応しない | 押した時の処理の問題 |
表に出てくる3つの言葉を先に押さえてください。HTMLが画面の骨組み、CSSが見た目、JavaScriptが動きを担当しています。壊れた担当ごとに症状が違うので、画面を見るだけで当たりを付けられます。
今回は真ん中です。枠は出ているのに中身が無いので、画面を組み立てる途中で止まったと分かります。ここまでで「HTMLではなくJavaScript」まで絞れました。
手順2: コンソールを開く
コンソールは、ブラウザがプログラムの状態やエラーを書き出していく作業ログの画面です。ゲームの画面と同じ窓の中に、あとから開いて表示します。
ここが分かれ目です。エラーは画面に出ません。コンソールに出ます。 ふだんは閉じているので、開かないとエラーがあること自体に気づけません。
開き方はこれです。
| OS | 操作 |
|---|---|
| macOS | Cmd + Option + J |
| Windows | Ctrl + Shift + J |
または右クリックから「検証」を選び、「Console」タブを開きます。
今回出ていたのはこれ1行です。
Uncaught ReferenceError: render is not defined
この1行で場所が確定します。 読み方はこうです。
| 部分 | 意味 |
|---|---|
ReferenceError |
名前が見つからない |
render |
その名前 |
is not defined |
定義されていない |
つまり「render を呼んでいるのに、render という名前のものが存在しない」。今回は、直したときに名前が renderHand に変わっていて、呼び出し側が render のままでした。片方だけ直したわけです。
エラー文の右側にはファイル名と行番号も出ます。そこが呼び出している場所です。行番号はファイルの上から数えた行の位置なので、AIへ伝えるとその周りだけを見てもらえます。
手順3: エラー文をそのままAIに渡す
自分で直そうとしなくていいです。エラー文を丸ごと貼るのが一番速いです。
claude -p "index.html を開いたら手札が表示されなくて、コンソールに Uncaught ReferenceError: render is not defined と出ています。直して。"
コツは2つあります。
- エラー文はそのままコピーする。 要約しないでください。文字列そのものが手がかりです
- 画面の症状も1行添える。 「手札が表示されない」があると、直す場所を間違えにくくなります
それでも直らないときの最後の手
戻します。 1-4でやったとおりです。
git diff
git diff は、最後に保存した状態と今のファイルの違いだけを並べて見せるコマンドです。直前に何を変えたかが見えます。原因はほぼここにあります。捨てていいなら、こうします。
git checkout .
保存していない変更を全部捨てて、最後に git commit した状態へファイルを戻すコマンドです。壊れる前に戻ります。 今回もこれで戻しました。
これができるから、思い切って試せます。戻せる状態を保っているのが一番の保険です。
よく出るエラーの読み方
3つ覚えておけば、ほとんど当たります。
| エラー | 意味 | よくある原因 |
|---|---|---|
ReferenceError: xxx is not defined |
名前が無い | 綴り違い、片方だけ改名した |
TypeError: Cannot read properties of null |
対象が見つからない | HTMLのidと、探しているidが違う |
SyntaxError: Unexpected token |
文法が壊れている | 括弧やカンマの数が合わない |
どれも「名前か場所の食い違い」です。 難しい話ではありません。
つまずきどころ
コンソールに何も出ていない
エラーではなく、思ったとおりに動いていないだけです。その場合は「何がどう違うか」をAIに伝えてください。「押しても結果が出ない」のように症状で言えば十分です。
エラーがたくさん出ている
一番上の1つだけ見てください。 最初のエラーが原因で、後は連鎖です。1つ直すと全部消えることがよくあります。
エラーを見るのが怖い
エラーは場所を教えてくれる案内です。出ない方が困ります。無言で動かないときが一番厄介です。
AIが直したのに直らない
ブラウザが古い内容を覚えていることがあります。一度読んだファイルを、次を速くするために手元へ取っておく仕組みがあるからです。強制的に読み直してください。 保存したばかりの内容で開き直せます。 macOSは Cmd + Shift + R、Windowsは Ctrl + Shift + R です。
Windows の場合
コンソールは Ctrl + Shift + J で開きます。強制読み直しは Ctrl + Shift + R です。
git diff と git checkout . は macOS と同じです。
次の一歩
わざと壊してみてください。 index.html の中の名前を1つだけ書き換えて、開いてコンソールを見る。それから git checkout . で戻す。
1回やっておくと、本当に壊れた日に慌てません。この章でプロトタイプは完成です。次の章から、キャラクターを入れていきます！
ここまでの三つの的
この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。
