エラーが出たらどうする？AIへの聞き方とデバッグの基本【入門5】

赤い文字のエラー、真っ白なままの画面、押しても反応しないボタン。ここで多くの人が「やっぱり自分には無理だ」と手を止める。でも断言する。エラーは失敗ではなく、AIと直す“ふつうの作業”だ。プロでも一日中エラーと付き合っている。違うのは、慌てず直す“手順”を知っているかどうかだけ。その手順を、今日身につけよう。

大前提：エラーは「出て当たり前」のもの

まず気持ちの話から。エラーが出たあなたは、何も間違っていない。コードを書く作業は、エラーを出しては直す、の繰り返しでできている。エラー文は怒られているのではなく、「ここが噛み合っていませんよ」という案内表示だ。AIに見せる“手がかり”だと考えよう。

魔法の対処法：エラー文を「そのまま」AIに貼る

これがこの記事で一番伝えたいことだ。エラーが出たら、自分で原因を考え込まなくていい。エラーの文章を丸ごとコピーして、AIにそのまま貼る。これだけで多くが解決する。

「次のエラーが出ました。原因を初心者にも分かるように説明して、直したコードの全文をください。
『（ここにエラー文をそのまま貼る）』」

ここで守るのは「全文を貼る」「全文をもらう」こと。エラー文を一部だけ削ったり、直す箇所だけを抜き出してもらうと、貼り間違いが起きやすい。丸ごとやり取りするのが、結局いちばん速くて確実だ。

例えば、直るまでの一部始終はこうなる

「貼るだけで直る」の実際の流れを、会話の形で再現しておく。メモ帳アプリに削除ボタンを足したら動かなくなった、という場面だ。

あなた：「削除ボタンを押しても何も起きません。F12のConsoleに Uncaught ReferenceError: deleteMemo is not defined と赤く出ています。原因を初心者にも分かるように説明して、直したコードの全文をください。」
AI：「ボタンが deleteMemo という係を呼んでいますが、その係を定義する部分がコードから抜けています。貼り付けの際に末尾が欠けた可能性があります。全文を修正しました。（コード）」
あなた：コード全文をコピーして memo.html に上書き保存 → ブラウザを更新（F5）→ 削除ボタンが効くのを確認。

かかる時間は2〜3分。ここで注目してほしいのは、あなたが原因を推理する場面が1秒も無いことだ。見えた事実を渡す係があなた、推理と修理をする係がAI。この分担が崩れなければ、エラーは作業として淡々と片づく。1回で直らなくても、型は同じだ。新しく出たエラー文をまた丸ごと貼る。2〜3往復で収束することがほとんどで、4往復を超えたら後述の「切り分け」へ進めばいい。

よく出るエラー、ざっくり翻訳表

意味を暗記する必要はない。ただ「よく出る顔ぶれ」を知っておくと、赤い文字への恐怖がだいぶ減る。

SyntaxError（文法エラー）　…　「書き方が壊れている」。コピーのときに一部が欠けた場合に多い。コードの全文をコピーし直して貼り直すのが早い。
ReferenceError: ◯◯ is not defined　…　「◯◯なんて知らない」。名前の食い違いや貼り忘れが原因。エラー文ごとAIに貼る。
TypeError　…　「予想と違う種類のデータが来た」。空っぽの値を触ったときに多い。何をしたら出たかを添えてAIに貼る。
404 (Not Found)　…　「そのファイルが見つからない」。画像などのファイル名の綴り違いや置き場所ミス。名前と場所を確かめる。

気づいただろうか。結局どれも「AIに貼れば直る」。この表は、貼る前に自分で当たりを付けたい人向けのおまけだ。

長いエラー文は「最後の行」から読む

画面いっぱいのエラーが出ると上から全部読みたくなるが、コツは逆だ。まず最後の行を見る。多くのエラーは最後の行に「種類と一言の説明」、その近くに「ファイル名と行番号（例：memo.html:25）」が出る。「25行目あたりで、名前が見つからないエラーらしい」と分かるだけで、AIへの伝え方も的確になる。全文を貼るのは変わらず基本として、自分でも当たりを付けられると直る速度が一段上がる。

画面が真っ白／反応しないとき：3つの見るところ

エラー文すら出ず、ただ動かないこともある。そんなときは、この3つをAIに伝えると原因が絞れる。

何をしたら、どうなったか　…　「追加ボタンを押したけど、何も起きない」のように、操作と結果をセットで。
ブラウザの「開発者ツール」のエラー　…　キーボードの F12 を押し、「Console（コンソール）」タブに赤い文字が出ていたら、それをコピーして貼る。エラーの本当の中身はここに出ていることが多い。
直前に何を変えたか　…　「さっき削除ボタンを足したら動かなくなった」など、変えた直後なら、そこが怪しい。

F12（開発者ツール）と仲良くなる

本文で何度か出てきた F12 について、必要な分だけ補足する。押すと画面の横か下に「開発者ツール」が開く。中にタブがたくさん並ぶが、あなたが見るのは Console（コンソール）だけでいい。ここは、アプリからの報告が流れてくる掲示板のような場所で、赤い行がエラー、黄色い行が警告だ。黄色は多くの場合無視してよく、赤だけ拾えばいい。

赤い行は、行の右端に memo.html:25 のような「場所」が付いている。行ごと右クリックでコピーして、そのままAIへ。閉じたいときはもう一度 F12 を押す。使うのはこれだけで、他のタブは触らなくていい。

直らないループにハマったら

たまに、AIに直してもらっても直らず、同じところを行ったり来たりすることがある。そんなときは、こう頼むと抜け出せる。

「さっきから同じエラーが直りません。いったん原因の切り分けをしたいです。問題を確かめるための一番簡単なコードに減らして、どこまでなら動くかを一緒に確認してもらえますか？」

「小さくして、どこまで動くか確かめる」。これはプロが必ずやる基本動作だ。大きいまま悩まず、動く最小まで戻して、そこから1つずつ積み直す。遠回りに見えて、これが一番の近道になる。

「エラーが出る」と「思った通りに動かない」は別物

少し先で必ず出会う区別も、ここで渡しておく。ボタンを押しても反応が変なのに、F12 の Console は真っ白、ということがある。これは故障ではない。「コードは正しく動いているが、その動きがあなたの期待と違う」状態だ。例えば、新しいメモが一番下に付く仕様なのに、あなたは一番上に付くと思っていた、のような食い違い。

この場合はエラー文が無いので、AIに渡すのは期待と現実の差になる。「メモは一番上に追加されると思っていましたが、実際は一番下に付きます。一番上に変えてください」。事実を報告する型は同じで、貼る物がエラー文から「期待↔現実」に変わるだけだ。この区別が付くと、「エラーは出てないのに何かおかしい」という場面で迷子にならない。

同じAIが同じ間違いを繰り返すとき

切り分けを頼んでも、AIが同じ修正案を出し続けて堂々巡りになることが、まれにある。そのときは別のAIに聞くのが早い。いま詰まっているコードの全文とエラー文を、ChatGPT で詰まったなら Claude へ、Claude で詰まったなら Gemini へ、そのまま貼って「このエラーが直せずにいます。原因を教えてください」と聞く。AIごとに得意な角度が違うので、片方が見落とした原因をもう片方があっさり見つけることは珍しくない。入門2で複数のAIに登録しておいた保険が、ここで効いてくる。

直ったあとに、1つだけ聞いておく

エラーが直ると、すぐ次に進みたくなる。その前に10秒だけ使って、AIにこう聞いておくといい。「いま何が原因で、次から何に気をつければ再発しませんか？　1行で教えてください」。直すだけなら作業だが、この一問を挟むと、同じエラーで二度悩まなくなる。答えをメモ帳にためていけば、それがあなた専用のエラー対策集になる。