デバッグ テクニック
AI と一緒にデバッグする
バグに遭遇したとき、AI コーディングツールと一緒に効率よく原因を特定し、修正する方法を解説します
デバッグは AI の得意分野
AI コーディングツールは、新機能の設計よりも既存の問題を解決する方が得意です。
エラーメッセージを読む、コードを追跡する、パターンから原因を推測する — これらは AI が高速にこなせる作業です。
デバッグの基本ステップ
1. 問題を正確に言語化する
「動かない」ではなく、具体的に。
[問題]
ログインボタンを押しても画面が変わらない
[再現手順]
1. /login にアクセス
2. メール: test@example.com、パスワード: password123 を入力
3. ログインボタンをクリック
[期待する動作]
/dashboard にリダイレクトされる
[実際の動作]
画面が変わらない。コンソールに 401 エラーが出る2. エラーメッセージを貼る
エラーが出ていたら、全文をそのまま AI に渡します。
上記の再現手順を試したところ、コンソールに以下のエラーが出ます:
POST /api/auth/login 401 (Unauthorized)
Error: Request failed with status code 401
at createError (createError.js:16)3. AI に調査させる
AI に「このエラーの原因を調べて」と頼むと、関連ファイルを読んで原因を特定してくれます。
4. 修正前にコミット
AI が修正を始める前に、今の状態をコミットしておきましょう。修正が失敗しても戻れます。
git add . && git commit -m "デバッグ前のセーブポイント"5. 修正 → 確認 → コミット
AI の修正を適用したら、動作確認してからコミット。
効果的な伝え方
NG: 情報が足りない
バグがあるんで直してOK: 再現可能な情報がある
src/pages/Login.tsx のログインフォームで、
メールとパスワードを入力してsubmitすると
/api/auth/login に POST リクエストが飛ぶが 401 が返る。
ブラウザのネットワークタブで確認したところ、
リクエストヘッダーに Authorization が含まれていない。
関連ファイル:
- src/pages/Login.tsx（フォーム）
- src/api/auth.ts（API クライアント）
- server/routes/auth.ts（サーバー側）二分探索アプローチ
原因がわからないとき、「半分ずつ切り分ける」方法が有効です。
問題: ページが真っ白になる
1. コンポーネントを半分コメントアウトして表示されるか確認
→ 表示される → コメントアウトした部分に問題がある
2. その部分をさらに半分コメントアウト
→ まだ表示されない → 残った部分に問題がある
3. 繰り返して、原因のコンポーネントを特定AI に「二分探索で原因を切り分けて」と伝えれば、この手順を自動でやってくれます。
AI にデバッグを頼むときのコツ
1. ブラウザの情報を活用する
- コンソールタブ: JavaScript のエラーメッセージ
- ネットワークタブ: API リクエストの状態（ステータスコード、レスポンス内容）
- Elements タブ: HTML の構造が意図通りか
これらの情報をテキストでコピーして AI に渡すと、精度が上がります。
2. 「直前に何を変えたか」を伝える
バグは「何かを変えた直後」に起きることがほとんどです。
5分前に src/api/auth.ts の fetchUser 関数を変更した。
それ以降、ログインが動かなくなった。
変更内容は git diff で確認できる。3. 1つずつ試す
AI が複数の修正案を出したら、一度に全部適用せず1つずつ試しましょう。どの修正が効いたかわからなくなります。
4. 直らなくても情報が増えている
AI の修正が的外れでも、「この方法では直らなかった」という情報は次の手がかりになります。AI にそれを伝えて続行しましょう。
さっきの修正を試したけど変わりませんでした。
エラーメッセージも同じです。
別のアプローチを試してください。次のステップ
- エラーの読み方・伝え方 — エラーメッセージの読み方の基本
- Git の基本と AI 開発 — 修正前のセーブポイントの作り方