TypeError: x.map is not a function の原因と解決方法【初心者向け完全ガイド】

・x.map is not a functionの原因と解決策
・ map処理でよくある間違いの解説

こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ！

👉 本記事ではJavaScriptでmap処理を行った時に出るx.map is not a functionエラーについて解説していきます！

1. エラーの概要と原因

このエラーは、JavaScriptでmapメソッドを呼び出そうとしたときに、その対象が配列ではない場合に発生します。

const obj = { a: 1, b: 2 }; obj.map(item => console.log(item));  // Uncaught TypeError: obj.map is not a function

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からな…

Array.isArray()を使うことで、対象が配列かどうかを確認できます。

const data = { a: 1, b: 2 };  if (Array.isArray(data)) {   data.map(item => console.log(item)); } else {   console.log('これは配列ではありません'); }

上記のコードでは、dataをArray.isArray()で配列かどうかチェックして、配列だった場合のみmap処理をしています。

APIのレスポンスや変数の初期値を、確実に配列にしておくことも重要です。

let data = []; // 初期値を空配列にする  // APIからデータが入ることを想定 data = someApiResponse || []; data.map(item => console.log(item));

上記のコードでは、dataの初期値を空配列にして、あとでsomeApiResponseを入れています！
この書き方だとsomeApiResponseがなかった時もdataはnullやundefinedにならず、空配列になるためmap処理でエラーが出ません。

const obj = { a: 1, b: 2 }; obj.map(item => console.log(item));  // Uncaught TypeError: obj.map is not a function

一番最初のサンプルコードで書いた例ですね！
objがオブジェクトなのでmapを受け入れてくれません。

解決策： オブジェクトの場合はObject.keys()やObject.values()を使って配列に変換する

Object.keys(obj).map(key => console.log(key));  // a, b

let data = null; data.map(item => console.log(item)); // Uncaught TypeError: Cannot read properties of null (reading 'map')

dataに入れた値がnullやundefinedになっている事は、実務だと良くあります！

解決策： デフォルト値を配列に設定する
以下のようにnullやundefinednの時は空配列として処理を行うようにしてあげましょう！

let data = null; (data || []).map(item => console.log(item));

TypeError: x.map is not a functionは、対象が配列ではない場合に発生するエラー。
主な原因は以下の通り
- データが配列ではなく、オブジェクトやnull、undefinedになっている。
- APIレスポンスを正しく処理していない。
解決策としては
- Array.isArray()で対象が配列か確認する。
- 初期値を確実に配列にしておく。

エラーの意味を理解し、今回学んだ解決策を活用すれば、同じエラーで悩むことはなくなるはずです！

さらにJavaScriptやReactの理解を深めたい方には、以下の記事がおすすめです！