はじめに
開発をしていると必ずぶつかるのが バグ です。
エラーメッセージを読んで、原因を探して、修正して、動作確認して...この作業にかなり時間を取られますよね。
Claude Codeを使えば、エラーを貼るだけで原因特定から修正まで自動で行ってくれます。今回はその実践方法を解説します。
デバッグの基本フロー
Claude Codeでのデバッグは、大きく3つのパターンがあります。
パターン1：エラーメッセージを貼る
パターン2：症状を説明する
パターン3：テスト結果を渡す
それぞれ実践してみましょう。
パターン1：エラーメッセージを貼る
最もシンプルで効果的な方法です。
よくあるエラー：TypeError
こんなエラーが出たとします。
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (src/components/UserList.tsx:15:23)
at renderWithHooks (node_modules/react-dom/...)
プロンプト
> このエラーを修正して：
> TypeError: Cannot read properties of undefined (reading 'map')
> at UserList (src/components/UserList.tsx:15:23)
Claude Codeの動き
- エラーの発生箇所
src/components/UserList.tsxを読み込み - 15行目のコードを確認
- 関連するファイル（データの取得元など）も確認
- 原因を特定して説明
- 修正コードを提示・適用
Claude Codeの回答例
原因: usersがundefinedの状態で.map()を呼んでいます。
APIからのデータ取得が完了する前にレンダリングされています。
修正: 初期値を空配列にし、オプショナルチェーンを追加します。
// 修正前
const UserList = () => {
const [users, setUsers] = useState();
// ...
return users.map(user => <div>{user.name}</div>);
};
// 修正後
const UserList = () => {
const [users, setUsers] = useState([]);
// ...
return users?.map(user => <div>{user.name}</div>) ?? null;
};
パターン2：症状を説明する
エラーメッセージが出ない「サイレントバグ」の場合です。
例：データが表示されない
> ユーザー一覧ページで、データが表示されない。
> APIは正常にレスポンスを返しているのに、画面が空白になる。
> @src/pages/Users.tsx と @src/api/users.ts を見て原因を探して。
Claude Codeの動き
- 指定されたファイルを読み込み
- API呼び出しの流れを追跡
- データの受け渡しを確認
- 原因を特定
原因を特定しました。
api/users.ts のレスポンス形式が { data: { users: [...] } } ですが、
Users.tsx では response.data を直接使っています。
正しくは response.data.users にアクセスする必要があります。
ポイント
- @メンションで関連ファイルを指定すると、原因特定が速くなる
- 症状をできるだけ具体的に書く
- 「何が期待される動作か」も伝えると精度が上がる
パターン3：テスト結果を渡す
テストが失敗したとき、結果をそのまま渡す方法です。
パイプで渡す
npm test 2>&1 | claude -p "テストが失敗している。原因を特定して修正して"
対話モードで渡す
> テストを実行して、失敗しているものを修正して
Claude Codeが自分で npm test を実行し、失敗したテストを確認して修正してくれます。
修正→再テストの自動ループ
> テストが全部通るまで修正を続けて
Claude Codeは以下をループしてくれます：
- テスト実行
- 失敗箇所を確認
- コードを修正
- 再テスト
- 全テストがパスするまで繰り返し
実践：よくあるバグと修正プロンプト
1. インポートエラー
> Module not found: Can't resolve './components/Header'
> このエラーを直して
Claude Codeがファイルパスの間違いやexportの不足を修正します。
2. APIエラー
> APIを叩くと500エラーが返ってくる。
> サーバーログはこれ：
> Error: relation "users" does not exist
> @server/routes/users.ts を見て
3. レイアウト崩れ
> モバイル表示でサイドバーがメインコンテンツに重なる。
> @src/styles/layout.css を修正して。
> レスポンシブに対応させたい。
4. パフォーマンス問題
> ユーザー一覧ページの表示が遅い。
> 1000件のデータをロードすると3秒以上かかる。
> @src/pages/Users.tsx を最適化して
5. 型エラー（TypeScript）
> tscでビルドエラーが出た。このエラーを全部直して：
> src/utils/format.ts(12,5): error TS2322: Type 'string' is not assignable to type 'number'.
> src/types/user.ts(8,3): error TS2741: Property 'email' is missing in type...
デバッグのプロンプトのコツ
効果的なプロンプトの構成
1. 何が起きているか（症状・エラーメッセージ）
2. どこで起きているか（ファイル・関数・行番号）
3. 何を期待しているか（正しい動作）
4. 試したこと（あれば）
良い例
> @src/auth/login.ts のログイン処理で、
> 正しいパスワードを入れても「認証失敗」になる。
> APIレスポンスは200で、tokenも返ってきている。
> tokenの保存処理に問題がありそう。
悪い例
> 動かない。直して。
→ これでもClaude Codeは頑張って探してくれますが、精度と速度が落ちます。
複雑なバグの調査
原因がわからないとき、段階的に調査を進められます。
ステップ1：状況把握
> このプロジェクトの認証の仕組みを説明して
ステップ2：原因の仮説
> ログイン後にセッションが切れる問題がある。
> 考えられる原因を挙げて
ステップ3：調査
> 2番目の仮説（トークンの有効期限設定）を調べて
ステップ4：修正
> 原因がわかったので修正して
AIと一緒に「対話的にデバッグする」感覚です。
便利テクニック
ログを追加してもらう
> この関数にデバッグ用のconsole.logを入れて。
> 引数と戻り値が確認できるように。
エラーハンドリングの追加
> このAPI呼び出しに適切なエラーハンドリングを追加して。
> ユーザーにわかりやすいエラーメッセージを表示するようにして。
修正の説明を求める
> 今の修正で何が変わったのか、わかりやすく説明して
修正内容を理解するのは重要です。同じバグに次回遭遇したとき、自分で対処できるようになります。
まとめ
| パターン | プロンプト例 |
|---|---|
| エラーメッセージ | 「このエラーを修正して：（エラー文）」 |
| 症状説明 | 「〇〇が動かない。期待する動作は△△」 |
| テスト結果 | 「テストを実行して失敗を修正して」 |
| 原因調査 | 「考えられる原因を挙げて」 |
| 段階的調査 | 「まず〇〇を確認して」→「次に△△を調べて」 |
デバッグこそClaude Codeの真価が発揮される場面です。 エラーが出たらまずClaude Codeに聞いてみましょう。
次回予告
次の記事では、Claude Codeでリファクタリング を行う方法を解説します。
動くけど読みにくいコード、Claude Codeでキレイにしましょう！
シリーズ一覧
- Claude Codeとは？概要・できること
- Claude Codeのインストールと初期設定
- 基本的な使い方・コマンド一覧
- Claude Codeでコード生成してみよう
- 👉 Claude Codeでバグ修正・デバッグ（本記事）
- Claude Codeでリファクタリング
- Claude Codeでテストコード作成
- Claude Codeでgit操作を効率化
- CLAUDE.mdを活用したプロジェクト設定
- Claude Code活用のベストプラクティス
著者: @kotaro_ai_lab
AI駆動開発やテック情報を毎日発信しています。フォローお気軽にどうぞ！