「AIに書いてもらったコードが動かない」——未経験の学習者からいちばん多く受ける相談がこれです。
でも実際にやりとりを見せてもらうと、コードよりも先に AIへの「聞き方」 でつまずいているケースがほとんどです。同じエラーでも、聞き方を変えるだけでAIの返答の精度がまるで変わります。
この記事では、未経験の方がAI(Claude CodeやChatGPTなど)にコードを直してもらうときの 聞き方3パターン を、①ダメな聞き方の実プロンプト → ②良い聞き方の実プロンプト → ③AIの返しがどう変わるか → ④なぜそうなるか の型で並べます。実際のエラーメッセージも使って具体的に書きます。
大前提:AIに渡すのは「素材そのまま」がいちばん強い
未経験の方がやりがちな失敗は、だいたい次の3つです。
- エラー文を 要約 して渡す(「なんかエラーが出た」)
- 複数の不具合を 一度に 投げる
- 専門用語で 言い換えよう として肝心の情報が落ちる
AIは、こちらが渡した情報の範囲でしか推測できません。加工せず、素材をそのまま渡す のがいちばん効きます。これを踏まえて3パターンいきます。
パターン1:エラーが出たら「エラー文を全文そのまま貼る」+「何をしたら出たか」
① ダメな聞き方
コードがエラーで動きません。直してください。
これだと、AIは「どのエラーか」がわからず、当たり障りのない一般論(「よくある原因は〜」)を返すしかありません。ラリーが何往復も増えます。
② 良い聞き方
Next.jsのページを開いたら、下のエラーが出て画面が真っ白になりました。
やったこと:ボタンを押すとカウントが保存されるようにしたくて、下のコードに書き換えた直後です。
エラー全文(ターミナルに出たものをそのまま貼ります):
ReferenceError: localStorage is not defined
at Home (app/page.tsx:5:5)
...
該当のコード:
(app/page.tsx の中身をそのまま貼る)
初心者なので、まず何が原因かと、直したコードを教えてください。
③ AIの返しがどう変わるか
localStorage is not defined という 固有のエラー名 と app/page.tsx:5 という 場所 が渡ると、AIは原因を特定できます。
localStorageはブラウザ側だけにある機能で、Next.jsはサーバー側でも一度コードを実行するため、そこで「そんなものは無い」というエラーになります。"use client"を先頭に付けるか、useEffectの中で呼ぶと解決します。
——というように、一般論ではなく、あなたのエラーに対する直し が返ってきます。
④ なぜエラー全文が大事か
エラーメッセージには、少なくとも次の3点が詰まっています。
-
エラーの種類(
ReferenceError/TypeErrorなど) -
原因のヒント(
localStorage is not defined) -
発生場所(
app/page.tsx:5:5の行番号)
要約するとこの3点が削れてしまいます。1文字も変えずコピペする のがコツです。
パターン2:エラーは出ないのに思い通り動かない → 「期待した動き」と「実際の動き」を並べる
エラーが出ないパターンは、AIには状況がまったく見えません。あなたの頭の中の「こうなってほしい」を言葉にして渡す 必要があります。
① ダメな聞き方
保存がうまくいきません。おかしいです。
「うまくいかない」はAIには判定できません。何が正解か共有されていないからです。
② 良い聞き方
やりたいこと:入力欄に文字を打って「追加」を押すと、下のリストに項目が増えてほしい。
期待した動き:「りんご」と入れて追加を押したら、リストに「りんご」が1行増える。
実際の動き:追加を押しても何も増えない。エラーは出ない。ページを再読み込みしても変わらない。
該当のコード:
(コンポーネントのコードをそのまま貼る)
初心者なので、原因の見当と直し方を教えてください。
③ AIの返しがどう変わるか
「期待」と「実際」のズレが明確になると、AIは差分から原因を絞れます。
useStateを使わず普通の変数に入れているため、値が変わっても画面が再描画されていません。const [items, setItems] = useState([])にして、setItems([...items, 入力値])で更新すると反映されます。
「動かない」だけでは絶対に出てこない、具体的な修正方針 が返ってきます。
④ なぜ「期待と実際」の対比が効くか
バグとは要するに 「期待」と「実際」がズレている状態 です。その2つを並べて渡すと、AIは「ズレを埋めるにはどこを直せばいいか」という一点に集中できます。エラーが出ない不具合ほど、この対比が効きます。
パターン3:一度に全部直そうとしない → 「まず原因の見当だけ、初心者向けの言葉で」
不具合が複数あると、つい全部まとめて投げたくなります。でも一度に投げると、AIの返答も長く複雑になり、初心者には追えなくなります。段階を踏む のがコツです。
① ダメな聞き方
保存もできないしデザインも崩れてるしボタンも反応しません。全部直してください。
3つの問題が絡んだ長い回答が返ってきて、どこから手をつけるか分からなくなります。
② 良い聞き方(まず原因の見当だけ聞く)
今このコードで、保存ボタンを押しても反応しない状態です。
いきなり直さなくていいので、まず「原因の見当」だけを、初心者にわかる言葉で1つずつ教えてください。
直すのはそのあと1ステップずつお願いします。
原因が分かったら、次はこう続けます。
なるほど、では今言ってくれた「◯◯が原因」の部分だけ、直したコードを教えてください。
他の部分はまだ触らないでください。
③ AIの返しがどう変わるか
「見当だけ」と区切ると、AIは長大な修正版を一気に出さず、噛み砕いた説明 を返します。
まず原因の見当だけお伝えします。ボタンに「押されたときの処理」がつながっていない可能性が高いです。
onClickが設定されているか確認しましょう。直す準備ができたら教えてください。
理解しながら1歩ずつ進めるので、「動いたけど何が起きたか分からない」を防げます。
④ なぜ段階を踏むと良いか
一度に直すと、コードは動いても あなたの理解が置いてけぼり になります。「原因の見当 → 1ステップ修正 → 次」と刻むと、AIの説明が短く保たれ、自分でも追えます。学習目的なら特に、この刻み方が効きます。
まとめ:素材をそのまま、ズレを並べて、段階を踏む
| 状況 | 聞き方のコツ |
|---|---|
| エラーが出た | エラー文を全文コピペ+何をしたら出たか |
| エラーは出ないが動かない | 期待した動きと実際の動きを並べる |
| 不具合が複数ある | 一度に直さず、原因の見当→1ステップずつ |
共通するのは、情報を加工せず、素材のまま、絞って渡す ということです。AIは魔法ではなく、渡された情報から推測しているだけ。だから「何を渡すか」で結果が決まります。デバッグは、コードを書く力より AIに状況を過不足なく伝える力 で差がつきます。
未経験者向けの講座を運営しています
未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材です。今回のような「AIへの聞き方・伝え方」も、プログラミングと同時に身につく構成にしています。
- 無料体験版(git clone してすぐ動く・最初の数セッション分・⭐ Star もよろしくお願いします)→ https://github.com/ayies128/next-ai-camp-trial
- 教材完全版+月5,500円のメンタリング(全20セッション+チャット質問し放題)→ https://menta.work/plan/20251?ref=qiita
- YouTube『AIエンジニア情報局』(AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料)→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita
※ Qiita 読者の方には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修・後輩育成の参考としてどうぞ。