Claude Codeでバグを修正する - エラーから原因特定・修正までの実践

1

> I'm seeing an error when I run npm test

1

> npm test を実行するとエラーが出る。原因を調べて修正して。

1
2
3
4
5
6

> 以下のエラーが発生しています。原因を特定して修正方法を教えて。
>
> TypeError: Cannot read properties of undefined (reading 'map')
>     at UserList (src/components/UserList.tsx:15:23)
>     at renderWithHooks (node_modules/react-dom/...)
>     at mountIndeterminateComponent (node_modules/react-dom/...)

1

npm test 2>&1 | claude -p "このテストエラーの原因を分析して修正方法を提案して"

1

cat app.log | claude -p "このログからエラーを特定して、原因を分析して"

1
2

> [エラー画面のスクリーンショットをドラッグ&ドロップ]
> このエラーの原因を調べて

1
2

> このバグの再現手順を教えて。
> また、再現させるためのテストコードを書いて。

1
2

> @src/components/UserList.tsx で発生しているエラーについて、
> このコンポーネントを呼び出している箇所と、データを渡している箇所を調べて。

1

> have the debugger subagent investigate why users can't log in

1

> debuggerサブエージェントを使って、ログインできない問題を調査して

1
2

> このバグが発生し始めた時期を特定して。
> git logを確認して、関連する変更を探して。

1
2

> ultrathink: この断続的に発生するメモリリークの原因を調査して。
> 複数の仮説を立てて、それぞれ検証して。

1
2

> このバグを修正する方法をいくつか提案して。
> それぞれのメリット・デメリットを説明して。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

⏺ 修正方法の提案:

1. nullチェックの追加
   - メリット: 最小限の変更で済む
   - デメリット: 根本的な解決ではなく、データが欠落する問題は残る

2. デフォルト値の設定
   - メリット: UIが壊れない、ユーザー体験を維持できる
   - デメリット: デフォルト値が適切かどうかの判断が必要

3. データ取得ロジックの修正
   - メリット: 根本的な解決
   - デメリット: 影響範囲が広く、テストが必要

推奨: オプション3が最も根本的な解決です。

1
2

> まず最小限の修正として、nullチェックを追加して。
> その後、動作確認ができたら、根本的な修正を行って。

1

> /config

1
2

> [Plan Mode] この本番環境で発生しているデータ不整合の原因を分析して。
> 修正計画を立てて。

1
2
3
4
5
6
7
8
9

⏺ 以下の変更を提案します:

src/components/UserList.tsx
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- return users.map(user => <UserCard key={user.id} user={user} />);
+ return users?.map(user => <UserCard key={user.id} user={user} />) ?? [];
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

この変更を適用しますか？

1

> 修正が正しく動作するか、テストを実行して確認して

1

> この修正を手動で確認するための手順を教えて

1
2

> この修正によって影響を受ける可能性のあるエッジケースを列挙して。
> それぞれのケースについて、テストまたは手動確認の方法を教えて。

1
2

> このバグが再発しないように、回帰テストを作成して。
> 修正前の状態でテストが失敗し、修正後に成功することを確認して。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

⏺ 回帰テストを作成しました:

src/__tests__/UserList.test.tsx
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
describe('UserList', () => {
  it('should handle undefined users gracefully', () => {
    // このテストは修正前は失敗し、修正後は成功する
    render(<UserList users={undefined} />);
    expect(screen.queryAllByRole('article')).toHaveLength(0);
  });

  it('should handle empty array', () => {
    render(<UserList users={[]} />);
    expect(screen.queryAllByRole('article')).toHaveLength(0);
  });

  it('should render users when provided', () => {
    const users = [{ id: 1, name: 'Test User' }];
    render(<UserList users={users} />);
    expect(screen.getByText('Test User')).toBeInTheDocument();
  });
});
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1
2

> このバグに関連する境界値テストを追加して。
> 特に、null、undefined、空配列、大量データのケースをカバーして。

1
2

> 今回修正した箇所のテストカバレッジを確認して。
> カバレッジが不足している部分があれば、テストを追加して。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

mkdir -p .claude/commands
cat > .claude/commands/debug-error.md << 'EOF'
以下のエラーを分析して修正してください: $ARGUMENTS

手順:
1. エラーメッセージとスタックトレースを分析
2. 関連するコードを調査
3. 根本原因を特定
4. 修正を実装
5. テストを実行して動作確認
6. 回帰テストを追加
7. 変更内容をサマリーとして報告
EOF

1

> /debug-error TypeError: Cannot read properties of undefined

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# デバッグガイドライン

## ログの確認
- アプリケーションログ: logs/app.log
- エラーログ: logs/error.log

## よくあるエラーと対処法
- "Connection refused": データベースが起動しているか確認
- "ENOENT": ファイルパスの存在を確認

## テスト実行
- 単体テスト: npm test
- 統合テスト: npm run test:integration
- E2Eテスト: npm run test:e2e

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

mkdir -p .claude/agents
cat > .claude/agents/project-debugger.md << 'EOF'
---
name: project-debugger
description: プロジェクト固有のデバッグ専門家。エラー発生時に自動的に使用される。
tools: Read, Edit, Bash, Grep, Glob
---

あなたはこのプロジェクトのデバッグ専門家です。

デバッグ手順:
1. エラーメッセージとスタックトレースを取得
2. logs/error.log を確認
3. 関連する最近のgit commitを調査
4. 根本原因を特定
5. 最小限の修正を実装
6. npm test で動作確認
7. 回帰テストを追加

報告形式:
- 根本原因の説明
- 診断を裏付ける証拠
- 具体的なコード修正
- テスト方法
- 再発防止の推奨事項
EOF

1

> project-debuggerサブエージェントを使って、このAPIエラーを調査して

1
2
3
4
5
6
7
8

# worktreeを作成
git worktree add ../project-debug-approach-a -b debug/approach-a
git worktree add ../project-debug-approach-b -b debug/approach-b

# 各worktreeでClaude Codeを起動
cd ../project-debug-approach-a && claude
# 別のターミナルで
cd ../project-debug-approach-b && claude

1
2

> 本番環境でユーザー一覧ページが真っ白になるバグが報告されている。
> まずは関連するエラーログを確認して。

1
2
3
4
5
6
7
8

⏺ ログを確認しました:

logs/error.log:
[2026-01-08 10:23:45] TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (src/components/UserList.tsx:15:23)

これは、usersが undefined の状態で map() を呼び出しているために発生しています。
APIからのレスポンスが空または失敗した場合に発生する可能性があります。

1
2

> このバグの再現条件を特定して。
> APIの失敗ケースをシミュレートする方法も教えて。

1
2
3
4

> 以下の方針で修正して:
> 1. usersのnullチェックを追加
> 2. API失敗時のエラーハンドリングを改善
> 3. ローディング状態とエラー状態のUIを追加

1
2
3
4

> 修正後、以下を実行して:
> 1. 関連するテストを実行
> 2. 新しいエッジケースの回帰テストを追加
> 3. カバレッジを確認

1
2

> 修正内容をコミットして、PRを作成して。
> PRの説明には、バグの原因と修正内容を記載して。