debug-helper

デバッグヘルパー

コードのデバッグ、エラーメッセージの分析、問題の根本原因の特定、修正案の提示を支援します。

エラーメッセージを分析し、根本原因を特定して、修正案を提示することでコードのデバッグを支援します。

使用する場面

ユーザーが以下を依頼した場合に、このスキルを使用します：

• コードのデバッグ / Debug code
• エラーメッセージの分析 / Analyze error messages
• バグの修正 / Fix bugs
• 例外の原因の理解 / Understand exception causes
• 問題のトラブルシューティング / Troubleshoot issues

手順

デバッグ手順 / Debugging Steps

1. 情報の収集 - エラーメッセージ、スタックトレース、関連コードを取得します
2. エラーの分析 - エラーの種類とメッセージの意味を理解します
3. 根本原因の特定 - 問題の原因となっているコードの箇所を見つけます
4. 解決策の提示 - 具体的な修正案を提示します
5. 予防策の提示 - 同様の問題を避けるための対策を提示します

よくあるエラーの種類 / Common Error Types

エラーの種類	考えられる原因
TypeError	型の不一致、null 値の操作
ReferenceError	未定義の変数、スコープの問題
SyntaxError	構文エラー、括弧または引用符の不足
RuntimeError	実行時のロジックエラー
NetworkError	ネットワークリクエストの失敗、タイムアウト

分析フレームワーク / Analysis Framework

それぞれのエラーについて、以下を分析します：

• What: どのようなエラーが発生したか
• Where: エラーがどこで発生したか
• Why: なぜ発生したか
• How: どのように修正するか

出力形式 / Output Format

templates/debug-report.md テンプレートを使用して出力を整形します。

Use the templates/debug-report.md template to format output.

## 调试分析报告 / Debug Analysis Report

### 错误概述 / Error Summary
[错误类型和简要描述]

### 根本原因 / Root Cause
[详细分析]

### 修复方案 / Fix
[具体代码修改]

### 预防建议 / Prevention
[如何避免类似问题]

例

入力 / Input

エラーメッセージ：

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (UserList.jsx:15:23)
    at renderWithHooks (react-dom.development.js:14985:18)

関連コード：

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

出力 / Output

デバッグ分析レポート

エラーの概要

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

UserList コンポーネントの 15 行目で .map() を呼び出した際、users 変数が undefined になっています。

根本原因

1. 直接的な原因: undefined に対して .map() メソッドを呼び出そうとしています
2. 根本的な原因:
   • 親コンポーネントから users prop が渡されていない可能性があります
   • データの取得が完了する前にコンポーネントがレンダリングされています
   • API の戻り値の形式が想定と異なっています

修正案

案 1: デフォルト値を設定する（推奨）

function UserList({ users = [] }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

案 2: 条件付きレンダリング

function UserList({ users }) {
  if (!users || users.length === 0) {
    return <p>No users found</p>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

案 3: オプショナルチェーン演算子

function UserList({ users }) {
  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

予防策

1. TypeScript を使用する - 型チェックを追加します

   interface Props {
     users: User[];
   }
   

2. PropTypes を追加する - 実行時の型チェックを追加します

   UserList.propTypes = {
     users: PropTypes.array.isRequired
   };
   

3. データソースを確認する - 親コンポーネントからデータが正しく渡されることを確認します

4. 読み込み状態を処理する - データの取得中にローディングインジケーターを表示します