デバッグプロンプト
AIを活用したエラー解決テクニック
デバッグの基本戦略
バイブコーディングでのデバッグは、エラー情報をそのままAIに渡すのが基本です。 自分で解読する必要はありません。
鉄則: エラーメッセージは省略せずにコピペする。 「○○というエラーが出た」ではなく、エラー全文を渡す。
エラー種類別プロンプト
コンパイル/ビルドエラー
"このビルドエラーを修正して:
error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
src/utils/calculate.ts:15:23"
→ AIがファイルを読み、型の不一致を修正
ランタイムエラー
"このエラーが発生した。原因と修正方法を教えて:
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (src/components/UserList.tsx:15:23)
at renderWithHooks (react-dom.development.js:14985:18)"
→ AIがundefinedの原因を特定し、nullチェックを追加
期待通り動作しない
"この関数が期待通りに動かない:
期待: [1, 2, 3] → [2, 4, 6]
実際: [1, 2, 3] → [1, 2, 3]
[コードをペースト]"
→ 期待値と実際の値を明示すると原因特定が早い
パフォーマンス問題
"この処理が遅い（10秒以上かかる）。最適化して:
[コードをペースト]
データ量: 約10,000件
目標: 1秒以内"
→ 具体的な数値を示すと適切な最適化が提案される
デバッグ用テンプレート
# 状況 [何をしようとしていたか] # エラー内容 ``` [エラーメッセージ全文] ``` # 関連コード ``` [エラーが発生しているファイル/関数] ``` # 試したこと（あれば） - [試したこと1] - [試したこと2] # 環境 - Node: [バージョン] - OS: [Windows/Mac/Linux]
効果的なフォローアップ
修正しても同じエラー
"修正したけどまだ同じエラーが出る。変更後のコードを確認して。"
別のエラーが発生
"修正したら別のエラーになった: [新しいエラー]"
根本原因を知りたい
"なぜこのエラーが起きたのか、根本原因を教えて。今後防ぐにはどうすればいい？"
理解できない
"このエラーメッセージの意味を初心者にもわかるように説明して。"
ログを活用したデバッグ
AIにログ出力を追加させて、問題を特定する手法も効果的です。
"この関数にデバッグ用のconsole.logを追加して。
各ステップで変数の値を出力するように。"
→ ログ出力をAIに見せれば、どこで問題が起きているか特定できる