バグ修正

Claude Code を使ってバグを効率的に修正する方法を学びます。エラーメッセージを共有するだけで、原因特定から修正までを Claude がサポートしてくれます。

バグ修正の基本フロー

Claude Code でバグを修正する流れは、以下の 3 ステップです。

Step 1: エラーメッセージを共有する
Step 2: Claude に修正を依頼する
Step 3: 修正を適用して動作確認する

Step 1: エラーメッセージを共有する

バグに遭遇したら、エラーメッセージをそのまま Claude に伝えましょう。

例: TypeError が発生した場合

# Claude Code を起動して、エラーメッセージを伝える
> TypeError: Cannot read properties of undefined (reading 'map') が
  src/components/UserList.tsx の 25行目で発生しています。修正してください。

エラーメッセージの伝え方

できるだけ多くの情報を含めると、Claude の分析精度が上がります。

• エラーメッセージ全文（省略しない）
• 発生したファイル名と行番号
• どんな操作をしたときに発生したか
• スタックトレース（あれば）

エラーログをそのまま貼り付ける

ターミナルに表示されたエラーログは、そのままコピーして Claude に伝えましょう。

> 以下のエラーが出ています。修正してください:

  Error: ENOENT: no such file or directory, open './config/settings.json'
      at Object.openSync (node:fs:603:3)
      at Object.readFileSync (node:fs:471:35)
      at loadConfig (/app/src/utils/config.ts:12:28)

Claude はスタックトレースから、どのファイルのどの関数で問題が起きているかを自動的に特定します。

Step 2: Claude に修正を依頼する

Claude はエラーの原因を分析し、修正案を提示してくれます。

Claude の典型的な応答

分析結果:
- src/components/UserList.tsx の 25行目で users が undefined の状態で
  .map() を呼び出しています
- users データが API から取得される前にレンダリングが行われています

修正案:
- users が undefined の場合のガード処理を追加します
- Optional chaining (?.) を使用します

修正前後のコードを確認できる

Claude は修正前と修正後のコードを表示してくれるので、何が変わったかを確認できます。変更内容に同意したら、Enter キーで適用しましょう。

よく使うバグ修正の依頼パターン

依頼パターン	使いどころ
このエラーを修正して	エラーメッセージがある場合
なぜこの関数が null を返すのか調べて	原因が不明な場合
このテストが失敗する原因を調べて修正して	テスト失敗時
本番環境でだけ起きるこのバグを調査して	環境固有の問題

Step 3: 修正を適用して動作確認する

Claude が提案した修正を適用したら、必ず動作確認をしましょう。

# 修正を適用した後、Claude に動作確認を依頼
> 修正したコードでテストを実行して、問題がないか確認してください

変更の確認は必ず行う

Claude の修正案は多くの場合正しいですが、必ず以下を確認してください。

• テストが通るか
• 他の機能に影響がないか
• 意図した動作をしているか

実践例: よくあるバグの修正

例 1: 非同期処理のバグ

> fetchUserData 関数で await が抜けていて、Promise オブジェクトが
  そのまま表示されてしまいます。修正してください。

Claude は非同期処理のパターンを理解しているので、async/await の修正や Promise チェーンの修正を適切に行います。

例 2: 型エラーの修正

> TypeScript の型エラーが 15 箇所あります。すべて修正してください。

Claude はプロジェクト全体の型定義を読み取り、一括で修正できます。

例 3: 依存関係の問題

> npm install 後に Module not found エラーが出ます。
  パッケージのバージョン互換性を確認して修正してください。

Claude が自動で行うこと

Claude Code はバグ修正の際に、以下のことを自動的に行います。

1. 関連ファイルの探索 - エラーが発生したファイルだけでなく、関連するファイルも読み取ります
2. 依存関係の確認 - インポートや呼び出し元を確認します
3. コンテキストの理解 - プロジェクトの構造やフレームワークを考慮します
4. 修正案の生成 - 最小限の変更で問題を解決する修正を提案します

バグ修正のコツ

1. 情報は多めに伝える

# あまり良くない例
> エラーが出ます

# 良い例
> ログインボタンをクリックすると TypeError: Cannot read properties of
  undefined (reading 'email') が auth.ts の 42行目で発生します。
  ユーザーがメールアドレスを入力していない場合にのみ発生します。

2. 再現手順を伝える

> 以下の手順でバグが再現します:
  1. /signup ページを開く
  2. フォームを空のまま送信ボタンを押す
  3. コンソールに TypeError が表示される

3. 修正後にテストも依頼する

> このバグの修正に加えて、同じバグが再発しないようにテストも書いてください

回帰テストの作成

バグを修正したら、そのバグが再発しないように 回帰テスト を書いてもらうのがベストプラクティスです。Claude にテスト作成も依頼しましょう。

まとめ

ステップ	やること	ポイント
1. 共有	エラーメッセージを伝える	情報は省略せず、全文を伝える
2. 依頼	修正を依頼する	再現手順や条件も伝えると精度が上がる
3. 確認	修正を適用して確認	テスト実行と動作確認を忘れずに

次は、コードをきれいに書き直す リファクタリング を学びましょう。