バグ修正の実践ワークフロー【Claude Codeデバッグ術】

バグ修正の基本フロー

Claude Codeでバグを修正するときは、以下のフローが効率的です:

1. 症状を伝える
2. 原因を調査させる
3. 修正方針を確認
4. 修正を実行
5. 動作確認
6. 再発防止

実践: バグ修正の進め方

STEP 1: 症状を正確に伝える

悪い例:

動かない。直して。

良い例:

ログインボタンをクリックしても何も起きない。

症状:
- クリックしても反応なし
- コンソールにエラーなし
- 昨日までは動いていた

関係しそうなファイル:
- src/components/LoginButton.tsx
- src/lib/auth.ts

具体的な情報を伝えるほど、Claudeの診断精度が上がります。

STEP 2: 調査を依頼

まず原因を調査して。コードは変更しないで。

この指示が重要です。「まず調査」「変更しないで」を明示することで、Claudeが:

• 関連ファイルを読む
• 問題箇所を特定
• 原因を報告

してくれます。

STEP 3: 修正方針を確認

Claudeが原因を報告したら:

原因は理解した。修正方針を教えて。まだ修正しないで。

修正方針を確認することで:

• 影響範囲を把握
• 副作用を防止
• 適切な修正方法を選択

STEP 4: 修正を実行

方針に納得したら:

その方針で修正して。

STEP 5: 動作確認

修正後のテストを実行して。

または:

開発サーバーを起動して動作確認できるようにして。

よくあるバグパターンと対処法

パターン1: TypeError / ReferenceError

症状:

TypeError: Cannot read properties of undefined (reading 'map')

Claudeへの指示:

このエラーの原因を調査して。
[エラーメッセージをコピペ]

発生箇所: src/components/UserList.tsx

典型的な原因と修正:

• データがundefinedの状態でmapを呼んでいる
• オプショナルチェーン（?.）の追加
• 初期値の設定

パターン2: 非同期処理のバグ

症状:

APIからデータを取得しているはずなのに、画面に表示されない

Claudeへの指示:

データ取得〜表示までの流れを調査して。
どこでデータが失われているか特定して。

典型的な原因:

• awaitの付け忘れ
• useEffectの依存配列の問題
• 状態更新のタイミング

パターン3: スタイルが効かない

症状:

Tailwindのクラスを追加したのに見た目が変わらない

Claudeへの指示:

このコンポーネントにスタイルが効かない原因を調査して。
tailwind.config.js も確認して。

典型的な原因:

• contentの設定漏れ
• クラス名の競合
• CSSの優先順位

パターン4: 本番環境だけで発生

症状:

ローカルでは動くけど、デプロイしたら動かない

Claudeへの指示:

本番環境とローカルで動作が違う原因を調査して。

考えられる違い:
- 環境変数
- ビルド設定
- APIのURL

典型的な原因:

• 環境変数の未設定
• CORS設定
• ビルド時の最適化

デバッグのコツ

コツ1: ログを追加させる

この処理の流れを追跡したい。
適切な場所にconsole.logを追加して。

Claudeが戦略的にログを配置してくれます。

コツ2: 最小再現コードを作る

このバグを再現する最小限のコードを作って。

複雑なコードから問題を切り出すことで、原因が明確になります。

コツ3: git diffを活用

昨日のコミットから変更された箇所を調べて。
そこにバグの原因がありそう。

コツ4: 2回失敗したらリセット

同じ修正を2-3回試しても直らない場合:

/clear

コンテキストをリセットして、最初から状況を説明し直します。

Plan Mode でのデバッグ

複雑なバグは Plan Mode で調査:

/plan

決済処理が途中で失敗する問題を調査したい。
- いつ失敗するか: 3回に1回くらい
- エラーメッセージ: タイムアウト
- 関連コード: src/lib/payment.ts

まず全体の流れを把握して、問題箇所を特定して。

Claudeが:

1. コードを読んで全体像を把握
2. 怪しい箇所をリストアップ
3. 調査すべきポイントを提案

再発防止

バグを修正したら、再発防止も依頼:

この問題が再発しないように:
1. テストを追加
2. 型定義を強化
3. エラーハンドリングを追加

して。

よくある間違い

間違い1: いきなり「直して」

❌ 「エラーが出た。直して。」
✅ 「このエラーの原因を調査して。[エラーメッセージ]」

原因を理解せずに修正すると、別のバグを生みます。

間違い2: 情報不足

❌ 「ボタンが動かない」
✅ 「ログインボタンをクリックしても反応がない。コンソールには〇〇のエラーが出ている。」

間違い3: 修正の繰り返し

❌ エラー → 修正 → まだエラー → 修正 → まだエラー → ...
✅ エラー → 調査 → 原因特定 → 方針確認 → 修正

次のステップ

バグ修正のワークフローをマスターしました！

次は、既存コードのリファクタリングを学びましょう。

→ リファクタリングをClaudeに任せる方法

まとめ

• 症状を正確に伝える（エラーメッセージ、再現手順）
• まず調査、次に修正（いきなり直させない）
• 修正方針を確認してから実行
• 2-3回失敗したらコンテキストをリセット
• 修正後はテスト追加で再発防止