JavaScript TypeErrorスタックトレースの解析

JavaScript TypeErrorスタックトレースの理解

TypeErrorはJavaScriptで最も一般的なエラーの1つで、値が期待される型ではない場合にスローされます。典型的な原因には、undefinedやnullでメソッドを呼び出す、非オブジェクトのプロパティにアクセスする、関数に間違った引数型を渡すなどがあります。

JavaScriptスタックトレースの構造

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (/app/src/components/UserList.tsx:42:18)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)

エラーメッセージの後の各行はスタックフレームを表します：

• 関数名 --- エラー発生時に実行されていた関数やメソッド
• ファイルパス --- コードを含むソースファイル
• 行番号 --- 実行されていた特定の行
• 列番号 --- 行上の正確な文字位置

トレースの読み方

JavaScriptスタックトレースは最新の呼び出しが最初に順序付けられます。最上部のフレームがエラーがスローされた場所で、後続の各フレームは呼び出し元を示します。通常、自分のコードを参照する最初の数フレーム（node_modulesやランタイム内部ではなく）を見てバグを見つけます。

一般的なTypeErrorパターン

• Cannot read properties of undefined (reading 'X') --- undefined変数のプロパティにアクセス
• X is not a function --- 関数でないものを呼び出し
• Cannot set properties of null --- nullのプロパティに代入
• X is not iterable --- 非イテラブルな値にspreadやfor...ofを使用

デバッグのヒント

1. 自分のコードを参照する最上部のフレームから始める
2. その行でどの変数がundefinedまたはnullかを確認する
3. その変数が設定されるべきだった場所まで逆方向にたどる
4. nullチェックやオプショナルチェイニング（?.）を追加してエラーを防止する