コードを書くときにエラーが出たらどうするか
本章のガイド
説明
本章のすべての方法は、Cursor/Trae/Claude等のAI IDEの実際の使用経験に基づいており、日常開発に直接応用できます。
1. 核心のコツ：スクリーンショットでAIに聞く
なぜこの章が重要なのか？
多くの初心者がエラーに遭遇したときの最初の反応は：
- 慌ててコードを適当にいじる
- 「xxx エラーの解決方法」を30分かけて検索する
- エラーの意味を理解しようとする
- 一人で深夜までデバッグする
これらはすべて時間の無駄です。
AI時代において、デバッグはとてもシンプルなことになりました：
エラーを発見 → スクリーンショット → AIに聞く → AIの指示に従うエラーを理解する必要も、デバッグができる必要も、問題がどこにあるかを知る必要すらありません。
必要なのは「聞き方」を学ぶことだけです。
1.1 最もシンプルな質問方法
複雑なテンプレートは不要で、以下の2つの方法から選べます：
方法1：現象を説明する
フォーマット：さっき何をしたか、今どうなったか
さっきログインページのコードを修正したら、ページが白くなってしまいました。どうすればいいですか？方法2：スクリーンショット
現在のページやエラー情報を直接スクリーンショットで撮る
[スクリーンショット]
このエラーはどうやって解決しますか？最良の方法：説明 + スクリーンショット
さっきログインページのコードを修正したら、ページが白くなってしまいました。
[スクリーンショット]
どうすればいいですか？覚えておいてください：コンテキストを明確に説明し、スクリーンショットを添えれば、AIがより早く問題を解決してくれます。
1.2 問題をうまく伝える方法
多くの初心者は質問したいことは分かっていても、どう言えばいいか分かりません。実際には、次の3つを明確にするだけで十分です：
1. さっき何をしたか
さっき保存ボタンをクリックしました
さっきログインページのコードを修正しました
さっきページをリロードしました2. 今どうなっているか
ページが空白になっています
ボタンを押しても反応しません
エラーメッセージが表示されています3. どうしたいか
データを保存させたい
ページを正常に表示させたい
ボタンを押した後にプロンプトを表示させたい完全な例：
さっき保存ボタンをクリックしたら、「保存に失敗しました」というエラーが表示されました。
[スクリーンショット]
フォームデータをデータベースに正常に保存したいのですが、どうすればいいですか？重要な原則：
- 専門用語を使わず、平易な言葉で説明する
- 時系列で説明する：先に何をして、それからどうなったか
- 自分の期待を伝え、AIに何をしてほしいかを伝える
2. ステップ1：直接現象を説明して質問する
問題に遭遇したら、急いでF12を開く必要はありません。まず現象を直接説明し、現在のページのスクリーンショットを撮ってAIに見せましょう。
多くの場合、AIはスクリーンショットを見るだけで直接解決策を提示できます。
2.1 よくある現象の説明方法
直接説明すればOK
ページが白い
ページを開いたら空白になっています。どうすればいいですか？
[スクリーンショット]ボタンを押しても反応しない
このボタンを押しても反応しません。見てください。
[スクリーンショット]データが保存できない
保存を押してもデータが保存されません。どうすればいいですか？
[スクリーンショット]スタイルの表示がおかしい
このボタンの位置がずれています。どうやって調整しますか？
[スクリーンショット]APIエラー
APIを呼び出したらエラーが出ました。見てください。
[スクリーンショット]2.2 AIが直接解決してくれたら
おめでとうございます、問題は解決しました！AIの指示通りに修正すればOKです。
2.3 AIが「もっと情報が必要」と言ってきたら
このとき初めてF12を開いて、重要情報を追加する必要があります。次をご覧ください。
3. ステップ2：重要情報を追加する
AIが「もっと情報が必要」と言ってきたら、問題のタイプに応じてF12を開いて対応する内容のスクリーンショットを撮ります。
3.1 いつ情報を追加する必要があるか
AIから以下のような回答が来るかもしれません：
- 「Consoleを開いてエラーがないか確認してください」
- 「Networkパネルのスクリーンショットを見せてください」
- 「具体的なエラー情報を見る必要があります」
このような場合は、以下のガイドに従ってスクリーンショットを追加してください。
3.2 Console情報の追加（ページが白い/エラーが出る場合）
操作手順
ステップ1：F12で開発者ツールを開く
Macは Cmd+Option+I、またはページを右クリックして「検証」を選択。
ステップ2：Consoleタブに切り替える
ステップ3：赤いエラー情報をスクリーンショット
ステップ4：AIに送る
Consoleエラーは以下の通りです：
[スクリーンショット]3.3 Network情報の追加（データの問題/APIエラー）
操作手順
ステップ1：F12で開発者ツールを開く
ステップ2：Networkタブに切り替える
ステップ3：もう一度操作する（保存をクリック/ページをリロード）
ステップ4：対応するリクエストを見つけてスクリーンショットを撮る
- URLとステータスコードを確認
- Payload（送信パラメータ）を確認
- Response（返却結果）を確認
ステップ5：AIに送る
Network情報は以下の通りです：
リクエスト：[スクリーンショット1]
パラメータ：[スクリーンショット2]
レスポンス：[スクリーンショット3]3.4 Elements情報の追加（スタイルの問題）
操作手順
ステップ1：要素を右クリック → 「検証」
開発者ツールが自動的にその要素にフォーカスします。
ステップ2：Stylesパネルのスクリーンショット
ステップ3：AIに送る
要素のスタイルは以下の通りです：
[スクリーンショット]4. ステップ3：解決するまで反復する
4.1 非効率なやり方
以下のやり方は時間の無駄です：
エラーを見て慌てて、コードを適当にいじる 30分かけてエラーの解決方法を検索する 各エラーの意味を理解しようとする 一人で深夜までデバッグする
4.2 効率的なやり方
以下のフローに従いましょう：
まず現象を説明してスクリーンショットで質問する AIが「もっと情報が必要」と言ってきたら、F12を開いて追加情報を提供する アドバイスに従ってコードを修正する 修正後にテストし、問題が残っていればスクリーンショットを撮って再度質問する
5. まとめ：完全なフロー
問題に遭遇
↓
現象を直接説明 + スクリーンショット
↓
AIに投げる：「どうすればいいですか？」
↓
AIが直接解決したか？
↓ はい
AIの指示に従う
↓
解決したかテストする
↓
↓ いいえ / AIがもっと情報を必要としている
F12を開いて、重要情報を追加する
↓
再度AIに送る
↓
解決するまで繰り返す