AIとデバッグする
なぜ学ぶか： AI駆動開発でも、いやAI駆動開発だからこそ、バグは日常です。違いは『AIという最強のデバッグ相棒がいる』こと。ただし相棒は、渡した情報の質でしか働けません。「動きません」では動きません。再現・切り分け・情報提供という手順を踏めば、デバッグは驚くほど速くなります。
デバッグは手順：再現 → 切り分け → 修正
①確実に再現する条件をつかむ → ②原因の範囲をせばめる → ③直す。この順序を守ると、当てずっぽうの試行錯誤から抜け出せます。
切り分け＝半分ずつ疑う
画面の問題か、データの問題か、をまず分けます。console.logで途中の値を見るのが、いちばん簡単な切り分けです。
エラーメッセージは最高の質問材料
エラー全文をそのままAIに渡します。要約や『赤いのが出た』ではなく原文を。再現情報が完璧なほど回答が正確になります。
渡すべき4点セット
①やりたいこと ②実際に起きたこと ③エラー全文 ④関連コード。これを揃えて渡せば、AIは推測ではなく診断ができます。
AIの修正も鵜呑みにしない
デバッグの修正案も『読んで評価する』。『なぜ直るのか』を説明させ、握りつぶし（as any等）でなく原因を直しているか確認します。
相談の例
❌ AI に伝わらない相談
「動きません。直して」
✅ 診断できる相談（4点セット）
【やりたいこと】
投稿一覧を Supabase から取得して表示したい
【実際に起きたこと】
ページが真っ白。コンソールに下のエラーが出る
【エラー全文】
TypeError: Cannot read properties of null (reading 'map')
at PostList (app/posts/page.tsx:12)
【関連コード】
const { data } = await supabase.from("posts").select();
return <ul>{data.map(...)}</ul>;
→ AI: 「error を無視していて、失敗時 data が null。
まず error を確認し、data が null の場合の分岐を…」「動きません」ではAIも動けません。やりたいこと・起きたこと・エラー全文・関連コードの4点を渡すだけで、当てずっぽうが的確な診断に変わります。
ステップ 1 / 2
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。