Route B
Phase 2 : Debug & Refine
B-03：動作確認とデバッグ
AIとの対話による修正 - ツールを完璧に磨き上げる
Lesson B-02で、あなたはAIに指示を出し、診断ツールのプロトタイプを生成しました。
しかし、AIは常に完璧ではありません。生成されたコードには、しばしば小さなバグや意図しない挙動が含まれています。
このレッスンでは、生成されたツールをテストし、発見した問題をAIとの対話によって修正していく、プロの開発者と同じデバッグプロセスを学びます。
1. テスト実行と問題発見
まずは、生成されたツールを隅々まで触ってみて、探偵のように問題点を探し出しましょう。
以下のチェックリストを参考に、あらゆる操作を試してみてください。
診断ツール テスト項目リスト
- 全ての質問で、全ての選択肢を問題なくクリックできるか？
- プログレスバーは正しく進捗しているか？
- 最後の質問の後、診断中アニメーションは表示されるか？
- 結果画面で、アドバイス部分はちゃんとぼかされているか？
- メールアドレス入力フォームは正常に表示・動作するか？
- スマホ表示にした時、レイアウトは崩れていないか？ (F12キーで確認)
問題を発見したら、AIに的確な指示を出す準備をします。以下の「治癒の呪文」の3要素を意識してください。
-
①
現状のコード（診察対象） 問題が起きているHTML/CSSのコード全体。
-
②
発生している現象（症状） エラーログのコピペ、または「ボタンを押しても無反応」といった具体的な状況説明。
-
③
理想の状態（治療ゴール） 「エラーなく完了してほしい」「画像が中央に表示されてほしい」など。
2. AIへの修正指示（治癒の呪文）
発見した不具合を、AIに的確に伝えて修正させましょう。
B-02でツールを生成したのと同じチャットで、続けて指示を出すのが最も効果的です。
🤖 うまく動かない時のAIへの質問例
- 「ありがとう。コードは生成できたけど、選択肢をクリックしても次の質問に進みません。どこが間違っていますか？」
- 「スコアが正しく加算されていないようです。JavaScriptの計算ロジックを見直してください。」
- 「ブラウザの検証ツール（F12）のコンソールに
TypeError: Cannot read properties of nullというエラーが出ています。原因を特定し、修正してください。」
ポイント： 具体的に「何が」「どうおかしいのか」を伝えることで、AIは的確な修正案を提示してくれます。
3. 対話によるデバッグのコツ
AIとの対話による修正は、一度で完璧に終わるとは限りません。以下のコツを掴むことで、よりスムーズに問題を解決できます。
- 一度に一つの問題を指示する：「ボタンが動かないし、色も違う」と一度に伝えず、「まず、ボタンが動かない問題を修正してください」と一つずつ解決させましょう。
- 結果をフィードバックする： AIの修正案を試したら、「ありがとう、ボタンは動くようになったよ。次は、このボタンの色をオレンジに変えてください」のように、結果を伝えてから次の指示を出します。
- 褒めて伸ばす：「完璧です！」「その通り！」のようにポジティブなフィードバックを挟むと、AIがあなたの意図を学習し、以降の回答精度が向上することがあります。
ツールが完璧に動作するようになったら、次はユーザー体験をさらに向上させるための
インタラクティブな機能を追加していきます。