AIとデバッグ

デバッグの基本姿勢

バイブコーディングにおけるデバッグは、AIに「なおして」と伝えるだけでは不十分です。AIが的確な修正をするためには、症状ではなく原因の手掛かり を提供することが重要です。

エラーメッセージの正しい貼り方

開発者ツール（ブラウザ）

1. F12 でデベロッパーツールを開く
2. Consoleタブを確認
3. 赤いエラーメッセージを全てコピー（スタックトレースも含む）

ターミナル

ビルドエラーやランタイムエラーは、表示された内容を全てコピーします。

// ❌ 悪い例（エラーを省略）
TypeError が出ています。直してください。

// ✅ 良い例（完全なエラーを貼る）
以下のエラーが発生しています:

TypeError: Cannot read properties of undefined (reading 'map')
    at ArticleList (ArticleList.astro:23:15)
    at renderComponent (astro/src/runtime/server/render.ts:145:22)

環境: Astro 5.3, Node 22
再現手順: /articles ページにアクセスする

再現手順の書き方

AIが自分でバグを再現できるよう、手順を具体的に書きます。

## 再現手順
1. /prompts ページを開く
2. 検索バーに「Claude」と入力する
3. 検索結果が表示された状態で「カテゴリ: setup」フィルターをクリックする
4. → 検索結果が消えて0件になる（バグ）
5. → 期待: 検索語「Claude」かつカテゴリ「setup」で絞り込まれた結果が表示される

AIが得意なバグ

• 構文エラー・タイポ
• TypeScript の型エラー
• CSS レイアウトの崩れ
• 単純なロジックミス
• 既知のライブラリのエラー（スタックオーバーフローにある類のもの）

AIが苦手なバグ

• タイミング依存のバグ — 特定のタイミングで起きる競合状態
• 環境固有のバグ — 特定のOS・ブラウザバージョンでのみ発生
• 累積的なバグ — 複数の操作を経た後にのみ発生
• 第三者サービスの問題 — 外部APIのレート制限など

これらのバグには、ログを仕込んで状態を追跡するアプローチが有効です。

デバッグのシステマティックなアプローチ

1. 問題を再現できるか確認
   ↓
2. 最小の再現ケースを作る（他の要素を取り除く）
   ↓
3. エラーメッセージを確認
   ↓
4. 仮説を立てる（「〇〇が原因では？」）
   ↓
5. AIに仮説と根拠を伝えて修正を依頼
   ↓
6. 修正後に再現手順で確認

「console.log デバッグ」の活用

AIに頼む前に自分でできるデバッグ:

// 状態を追いたいとき
console.log('items:', items);
console.log('filtered:', filteredItems);

// 関数が呼ばれているか確認
console.log('handleClick called with:', event);

確認したら必ず削除してください（コミットに console.log を含めない）。

→ ステップ7: デプロイしよう