2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

未経験がAIとデバッグする時の「聞き方」3パターン — 悪い例と良い例のプロンプト対比

2
Posted at

「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への聞き方・伝え方」も、プログラミングと同時に身につく構成にしています。

※ Qiita 読者の方には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修・後輩育成の参考としてどうぞ。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?