JavaScriptで「TypeError: Cannot read property ‘filter’ of undefined」と表示される場合、多くは対象の変数やオブジェクトが未定義（undefined）になっていることが原因です。本記事では、このエラーの原因と修正方法をわかりやすく解説します。
エラーの意味を理解する
JavaScriptのfilterメソッドは配列に対して使用するものです。つまり、対象が配列でない場合、または未定義の場合にこのエラーが発生します。
例：let items; items.filter(x => x.active); この場合、itemsが未定義なのでエラーになります。
原因の特定方法
1. 変数が正しく初期化されているか確認する。
2. データがAPIや外部から取得される場合、取得前にfilterを使おうとしていないか確認する。
3. オブジェクトや配列の階層が正しいかをチェックする。
修正方法
1. 変数を空配列で初期化する：let items = [];
2. Optional chainingを使用して安全にアクセスする：items?.filter(x => x.active)
3. データ取得後にfilterを実行するように順序を変更する。
実例
APIから取得したデータにfilterを使う場合：fetch('/api/data')
.then(res => res.json())
.then(data => {
const activeItems = data.items?.filter(item => item.active) || [];
console.log(activeItems);
});
Optional chainingと空配列でエラーを回避しています。
まとめ
「Cannot read property ‘filter’ of undefined」は対象が未定義のときに発生します。変数の初期化、Optional chainingの活用、データ取得のタイミング調整で解決可能です。まずは対象が確実に配列になっているかを確認しましょう。
コメント