~/VibeHandbook
無料 PDF

12 · 03

AIに適切なコンテキストを与える

ここがあなたの効きどころの大半です。バグを報告するときは、次のものを含めてください。

  • エラーメッセージを一字一句そのまま。 正確にコピーすること。言い換えてはいけません。エラーを言い換えるのは、電話で写真を説明するようなものです。肝心だった唯一のディテールを取りこぼします。
  • スタックトレース、特に先頭の数行。
  • 関連するコード — エラーを投げた関数と、それが呼び出すものすべて。
  • 期待していたことと、実際に起こったこと。

強力なデバッグプロンプトの実例は、こんな感じです。

サインアップフォームを送信するとエラーが出ます。出力全体は次のとおりです:

TypeError: Cannot read properties of undefined (reading 'email')
    at validateUser (src/auth/validate.js:14:23)
    at handleSignup (src/routes/signup.js:31:10)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

再現手順: フォームに入力し、「Sign up」をクリックする。
期待: 「Welcome」メッセージ。
実際: ページが空白になり、上のエラーがコンソールに出る。

これが validate.js です (14行目あたり):
[関数を貼り付け]

そしてこれが、それを呼び出す handleSignup 関数です:
[関数を貼り付け]

何が原因として考えられ、何かを変える前にどう確認すればいいですか?

最後の一行に注目してください。あなたは即座の編集ではなく、仮説と確認のステップ を求めています。これがAIを誠実に保ちます。

貼り付けるトレースを 読む 方法を知っておくと役立ちます。スタックトレースは新しい順に並んだ呼び出し履歴です。先頭の行はプログラムが実際に爆発した場所で、その下の各行はその上の関数を呼び出した関数です。だから例では、validateUseremail がundefinedな何かから読み取られた場所で、handleSignupvalidateUser を呼び出した側です。あなたのコードより下のフレーム — processTicksAndRejections のような — は言語ランタイムのもので、たいてい無視してかまいません。あなたの ファイルを指す最初の行に当たるまで上から下へ読みます。そこがほぼ常に見始めるべき場所です。

同じトレースを呼び出しのスタックとして読むと、順序が一目瞭然になります。クラッシュは一番上にあり、その下の各フレームは、すぐ上のフレームを呼び出した側です:

   トレース読み                    =    呼び出しスタック
   (上 = 最新)                     (誰が誰を呼んだか)

 ▲ validateUser  :14  ◀── 衝突     ┌─────────────────┐ ▲ ここから
 │ handleSignup  :31               │ validateUser  14│ │ 見始める
 │ processTicks...     (ランタイム ├─────────────────┤ │ 場所
 │                      無視)      │ handleSignup  31│ │
 │                                 ├─────────────────┤ │
 └─ 君のコード先頭 ───────────────▶│ processTicks... │─┘ (ランタイム)
                                   └─────────────────┘
   君のファイルである最初の行に当たるまで下へ読む

オフラインでも読みたい?

本編まるごとを PDF または EPUB で無料ダウンロード。