第九章：バグに遭遇したらどうする？デバッグの心得と複数AI活用術

Vibe Codingのプロセスにおいて、AIは非常に賢いですが、生成するコードが100%完璧とは限りません。レイアウトが崩れたり、ボタンをクリックしても反応がなかったり、最悪の場合ターミナルに長い赤いエラーメッセージが表示されることもあります。問題に遭遇した時、多くの初心者は挫折感を覚え、諦めたくなるかもしれません。 しかし覚えておいてください：バグに遭遇しても慌てないでください。これはあなたが最も速く成長し、普通の人と差をつけるチャンスです！

この章では、ベテランエンジニアの「デバッグ(Debugging)の心得」と、エディタのAIが堂々巡りを始めた時に「複数AIによるクロスチェック」で行き詰まりを打破する方法を伝授します。

🧐 ステップ1：現場検証（ConsoleとTerminal）

車を修理するには、どこから煙が出ているかを知る必要があります。ウェブページが壊れた時、すぐに確認すべき「現場」は2つあります：

フロントエンド戦場：ブラウザの開発者ツール(F12) -> Consoleタブ
- ユーザーのブラウザで発生した全てのトラブルが記録されています。
- 例：API呼び出し失敗(CORSエラー)、React変数が未定義(undefined is not a function)、画像リンク切れ(404 Not Found)など。
- F12を押す（または右クリックで「検証」を選択）、Consoleタブに切り替えて赤いエラーメッセージを探します。
バックエンド戦場：VSCode/Cursorのターミナル(Terminal)
- サーバーやコンパイラで発生したエラーが記録されています。
- 例：npmパッケージ未インストール(Module not found)、データベース接続失敗、構文エラーでサイトが起動しない(Syntax error)など。
- エディタ下部のTerminalウィンドウを開いて赤文字を確認します。

大量の赤文字を見ても、まず英語に怯まないでください。落ち着いて、Error:、Exception、またはファイルパス（例：src/app/page.tsx:15:2）を含む行を探しましょう。これが問題解決の鍵です！

🗣️ ステップ2：質問の技術（Contextが全て！）

AIに単に「ウェブページが壊れてログインできません。どうすればいいですか？」と伝えても、AIは助けられません。推測するしかないからです。 Vibe Codingでは、**Context（文脈）**が全てです！現場の証拠を完全にAIに提供することで、AIはシャーロック・ホームズのように問題を解決してくれます。

🔥【Vibe Prompt 最適デバッグテンプレート】 Next.jsプロジェクトを開発中で、現在ログイン機能を実装しています。ファイルはsrc/components/AuthForm.tsxです。

ログインボタンをクリックすると、画面に反応がなく、ブラウザのConsoleに以下のエラーが表示されます：
（完全な赤いエラーメッセージを貼り付け、後続のスタックトレースも含める）
TypeError: Cannot read properties of undefined (reading 'signInWithPassword')
    at handleLogin (AuthForm.tsx:24:43)
現在のAuthForm.tsxの完全なコードを添付します：
（コード全体を選択して���り付け）
問題はどこにあるでしょうか？原因を説明し、修正後の完全なコードを直接教えてください。

これほど明確な手がかりがあれば、AIは通常1秒以内に正確に問題を特定できます：Supabaseクライアントのimport忘れ、変数名のタイポなどが見つかります。

🤖 ステップ3：AIが堂々巡りを始めた時（AI Hallucination 幻覚）

時々、エディタ内のAIが「堂々巡り」を始めるという厄介な状況に遭遇します。 AIが「問題がわかりました。この行をAに変更してください」と言い、 Aに変更してもエラーが続きます。再度エラーを伝えると、「申し訳ありません、間違えました。Bに戻してください」と言います。 Bに戻してもエラーは解消せず、このループが無限に続きます。

これはAIの会話履歴(Context Window)が長すぎて、以前の誤った推論に縛られ、最初の目的を「忘れて」しまったり、論理的な盲点(AI幻覚)に陥っているためです。

解決策：セカンドオピニオンを求める！ 医者にかかる時と同じで、この医者が治せないなら、別の医者に診てもらう時です。

方法1：会話をリセット(New Chat) Cursorで新しいチャットを開き、目標・現在のコード・最新のエラーメッセージを、全く新しい案件として再提供します。これにより古い考え方の干渉を受けずに再考できます。
方法2：クロスチェック（外部の賢者Claude/ChatGPTを導入）
- ウェブ版の**Claude（現在はSonnet 3.5がおすすめ）またはChatGPT（GPT-4o）**を開きます。
- フロントエンドのレイアウトや複雑なReact状態ロジックでは、Claude 3.5 Sonnetが現在他モデルより優れた結果を出す傾向があります。
- コードとエラーメッセージをClaudeに貼り付け、「他のAIアシスタントがこのバグを修正できません。彼の提案はXXXでしたが、依然としてYYYエラーが出ます。上級アーキテクトの視点で、盲点はどこにあると思いますか？」と尋ねます。
- 通常、外部AIはエディタAIが気づかなかった死角を一瞬で見抜き、全く異なるが極めて効果的な解決策を提供してくれます。

💼 [ビジネス応用] エラーメッセージはクライアントの要望

デバッグスキルは、単に自分の問題を解決するためだけではありません。これは収益化可能なハードスキルです。受託市場や企業メンテナンスでは、古いシステムが突然奇妙なエラーを出すことがよくあります。従来のエンジニアならソースコードを調べて問題を探すのに2日かかるかもしれません。

「エラー収集 -> Context提供 -> クロスチェック」というVibe Codingデバッグ術を習得すれば、他の人が解決できない問題案件(Debug案件)を引き受けられます。他人が2日かかる仕事を、環境構築に2時間費やし、ダブルAI分析で問題を特定・修正すれば、2日分の報酬が簡単に入ります。

デバッグ能力はプロジェクトの安定性を決定し、クライアントからの信頼度も決定します。次章では、この教材の最終兵器：統合開発環境(IDE)をマスターし、AIの100%潜在能力を発揮する方法を紹介します！

よくある問題と解決策

| 問題 | 原因 | 解決方法 | |------|------|---------| | 期待通りの結果が出ない | パラメータ設定ミス | デフォルト値と境界条件を確認 | | 実行が遅い | アルゴリズムの効率 | より効率的なデータ構造を使用 | | メモリ不足 | データ量過多 | バッチ処理を検討 | | デバッグが困難 | ログ不足 | 詳細なログ出力を追加 |

さらに学ぶには

公式ドキュメントを読む
GitHubのオープンソース例を参照
コミュニティディスカッションに参加
コードを修正して結果の変化を観察