てりーのフロントエンドBLOG

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. エラーの概要と原因

エラー内容：TypeError: x.map is not a function

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

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

原因

  • mapは配列に対してのみ使用できるメソッドです。
  • オブジェクトやundefined、nullなどの非配列データにmapを適用しようとすると、このエラーが発生します。
MDN Web Docs
Array.prototype.map() - JavaScript | MDN

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

2. エラーの解決方法

解決策①：Array.isArray()で配列か確認する

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処理でエラーが出ません。

3. よくある間違いとその解説

パターン1：オブジェクトに対して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

パターン2：undefinedやnullにmapを使用

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));

6. まとめ

この記事のポイント

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

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

📚次に読むべきおすすめ記事

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