エラーが出たらAIに正しく聞く

Webアプリを作っていると、急に画面が真っ白になったり、赤い文字がズラッと出たりします。そんなときは、AI（＝あなたの質問に答えてくれる賢い助手）に助けを求めるのが一番の近道です。

でも、AIに「動きません」とだけ伝えるのは、病院で「体調が悪いです」とだけ言うようなもの。お医者さんも「どこが痛いですか？いつからですか？」と聞きたいですよね。このレッスンでは、エラーメッセージ（＝コンピューターからの「ここが問題です」というお知らせ）をAIに正しく伝えて、素早く解決する方法を身につけます。

---

エラーが出たとき、メッセージが表示される場所は大きく2つあります。

ターミナル（＝文字だけが並ぶ黒い画面）で見つける

Claude Code や Cursor のターミナルを開いていると、赤や黄色の文字でエラーが表示されます。Error や failed という単語が目印です。

ブラウザ（＝ChromeやSafariなどの画面）で見つける

ブラウザで確認中にエラーが起きた場合は、以下の手順でメッセージを確認できます。

1. 画面の何もないところを右クリックする
2. 表示されたメニューから「検証」（英語では Inspect）を選ぶ
3. 上部のタブから「Console」を選ぶ
4. 赤いアイコン付きの行がエラーメッセージです

---

エラーメッセージは、最初の行から最後の行まで、まるごとコピーするのがコツです。ファイル名や行番号が含まれていることが多く、それらがAIにとって重要な手がかりになります。

良い例:

Error: Cannot find module './Header'
  at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
  at /Users/you/my-app/src/App.tsx:3:1

↑ ファイル名（App.tsx）や行番号（3）が含まれているので、AIが原因を特定しやすい

悪い例:

「なんかエラーが出ました」

↑ これだけでは、AIも何が起きているか分かりません

ポイント: エラーメッセージが50行以上あって長い場合は、最初の5行だけでもOKです。まずはそこから始めましょう。

---

エラーメッセージをコピーしたら、次の3点セットを添えてAIに聞きます。

これは、お医者さんに「いつから」「どこが」「どんなふうに」痛いか伝えるのと同じです。

AIツール別の質問のしかた

あなたが使っているツールに合わせて、以下のように質問してみましょう。

ChatGPT / Claude（チャット画面）の場合

チャット欄に、以下のように入力します。

Next.jsでヘッダーコンポーネントを表示しようとしています。
以下のエラーが出ました。原因と解決策を教えてください。

[ここにエラーメッセージを貼り付け]

環境: Next.js 14, macOS

Cursor（エディター内AI）の場合

エラーが出ているファイルを開いた状態で、Cmd+K（Macの場合）を押してチャット欄を開き、以下のように入力します。

このファイルで以下のエラーが出ています。修正方法を教えてください。

[ここにエラーメッセージを貼り付け]

Cursor はファイルの中身を自動で読んでくれるので、「何のツールを使っているか」を省略できるのが便利です。

Claude Code（ターミナルAI）の場合

ターミナルで Claude Code を起動している場合は、エラーメッセージをそのまま貼り付けて聞きます。

さっきのコマンドを実行したら以下のエラーが出ました。どう直せばいいですか？

[ここにエラーメッセージを貼り付け]

Claude Code はプロジェクトのファイルを自動で見てくれるので、環境情報を省略できることが多いです。

---

AIが解決策を提案してくれたら、次の手順で進めます。

1. AIが「これを試して」と言ったことを、そのまま試す
   • コードの修正が必要なら、AIが示した通りに変更する
   • コマンドの実行が必要なら、そのままコピーして貼り付ける
2. 直ったかどうかを確認する
   • エラーが消えたら完了です！
3. 直らなかったら、新しいエラーメッセージを伝える
   • 「試しましたが、今度はこのエラーが出ました：」と、新しいメッセージを貼り付けます
   • AIは前の会話を覚えているので、状況が分かります

良い例（AIへの返答）:

教えてもらった通り Header.tsx を作りましたが、今度は次のエラーが出ました。

TypeError: Cannot read properties of undefined (reading 'map')
  at Header (./src/components/Header.tsx:5:12)

悪い例（AIへの返答）:

「やってみたけどまだダメです」

↑ 何がダメなのかAIには伝わりません。新しいエラーメッセージがあれば必ず貼りましょう。

---

以下のチェックリストで、問題が解決したか確認しましょう。

• エラーが出ていたターミナルに赤い文字がなくなった
• ブラウザの Console（右クリック→検証→Console）に赤いエラーがない
• 画面が期待どおりに表示されている（例: ヘッダーが表示されている）
• ページを再読み込み（Cmd+R または F5）しても問題なく表示される

ゴール: 上のチェックが全部クリアできたら、このレッスンの成果物としてエラー解決前後のスクリーンショットを保存しましょう。「自分でエラーを解決できた！」という記録になります。

---

---

エラーが出たら慌てずに、3つの情報をセットでAIに伝えましょう。

1. 何をしようとしていたか
2. エラーメッセージの全文（最初の5行でもOK）
3. 使っているツール

この「3点セット」を覚えておけば、どんなエラーでもAIと一緒に解決できます。大事なのは「正確に伝えること」です。あなたが丁寧に情報を伝えれば、AIもそれだけ丁寧に答えてくれます。