Reactのmap関数でエラー｜配列じゃない時の対処法

みなさん、Reactでmap関数を使っていてエラーが出た経験ありませんか？

「Cannot read properties of undefined (reading 'map')」「TypeError: data.map is not a function」

こんなエラーメッセージを見たことがありませんか？

これらのエラーは、配列以外のデータに対してmap関数を使用した時に発生します。

でも大丈夫です！

この記事では、map関数でエラーが発生する原因と、安全にmap関数を使用する方法を詳しく解説します。 実践的な対処法と予防策も含めて、確実にエラーを解決できるようになりますよ。

map関数でエラーが発生する原因を知ろう

map関数は配列に対してのみ使用できる関数です。

配列以外のデータに使用するとエラーが発生してしまいます。

よくあるエラーパターンを確認しよう

以下のようなケースでエラーが発生します。

// ❌ エラーが発生するコード例
function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// itemsがundefined、null、または配列以外の場合エラー

このコードでitemsが配列以外の値だとエラーが発生します。

「あれ？なんで動かないの？」と思った経験がある方も多いでしょう。 実は、itemsの値によってはmap関数が使えないんです。

エラーメッセージの種類を覚えよう

map関数で発生する主なエラーメッセージです。

よく見るエラーなので、覚えておくと便利ですよ。

• Cannot read properties of undefined (reading 'map')
• TypeError: data.map is not a function
• Cannot read properties of null (reading 'map')

これらのエラーは全て、配列以外のデータにmap関数を使用した場合に発生します。

最初のエラーはundefinedに対してmapを使った場合。 2番目は配列じゃないデータに対してmapを使った場合。 3番目はnullに対してmapを使った場合ですね。

安全なmap関数の使用方法をマスターしよう

エラーを防ぐために、map関数を安全に使用する方法をご紹介します。

一つずつ覚えていけば、確実にエラーを防げますよ。

基本的な条件分岐で安全にしよう

最も基本的な対処法は、配列かどうかを事前にチェックすることです。

// ✅ 基本的な条件分岐
function ItemList({ items }) {
  if (!items || !Array.isArray(items)) {
    return <div>データがありません</div>;
  }
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

この方法なら、配列以外のデータが渡されてもエラーになりません。

!itemsでundefinedやnullをチェック。 !Array.isArray(items)で配列以外をチェック。

これで安心してmap関数を使えますね。

短縮記法で簡潔に書こう

より短く書きたい場合は、論理演算子を使用できます。

// ✅ 短縮記法での条件分岐
function ItemList({ items }) {
  return (
    <ul>
      {items && items.map && items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

この書き方なら、itemsが存在し、かつmap関数が使える場合のみ実行されます。

items &&で存在チェック。 items.map &&でmap関数が使えるかチェック。

短くて読みやすい書き方ですね。

デフォルト値で安全性を高めよう

デフォルト値を設定することで、より安全にmap関数を使用できます。

// ✅ デフォルト値を設定
function ItemList({ items = [] }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

この方法なら、itemsが未定義でも空の配列として扱われます。

items = []と書くだけで、未定義の場合に空配列になります。 シンプルで効果的な方法ですよ。

APIデータでの安全な実装を学ぼう

実際の開発では、APIから取得したデータを表示することが多いです。

「APIのデータって、思った形じゃないことあるよね」という経験ありませんか？

ローディング状態を考慮した実装

// ✅ ローディング状態を考慮した実装
function UserList() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetchUsers()
      .then(data => {
        setUsers(Array.isArray(data) ? data : []);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;
  if (!users || users.length === 0) return <div>ユーザーがいません</div>;
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

この実装なら、どんな状況でもエラーが発生しません。

最初はloadingがtrueなので「読み込み中...」を表示。 エラーが発生したら「エラー: ...」を表示。 データが空なら「ユーザーがいません」を表示。

全てのパターンに対応できていますね。

APIレスポンスの型チェックをしよう

APIから取得したデータが期待通りの形式かチェックしましょう。

// ✅ API レスポンスの型チェック
function processApiData(response) {
  // レスポンスの構造を確認
  if (!response || typeof response !== 'object') {
    return [];
  }
  
  // 配列が含まれているかチェック
  const data = response.data || response.items || response;
  
  return Array.isArray(data) ? data : [];
}

function DataList() {
  const [items, setItems] = useState([]);
  
  useEffect(() => {
    fetchData()
      .then(response => {
        const processedData = processApiData(response);
        setItems(processedData);
      })
      .catch(error => {
        console.error('データ取得エラー:', error);
        setItems([]);
      });
  }, []);
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

この方法なら、APIのレスポンス形式が変わってもエラーになりません。

processApiData関数で、レスポンスの構造をチェック。 response.data、response.items、responseの順番で探してみる。

これで色々なAPIの形式に対応できますね。

エラーハンドリングのベストプラクティス

より堅牢なエラーハンドリングを実装しましょう。

これができれば、プロレベルの実装ですよ。

カスタムフックで共通化しよう

// ✅ カスタムフックでの共通化
function useArrayData(initialData = []) {
  const [data, setData] = useState(initialData);
  
  const setArrayData = (newData) => {
    if (Array.isArray(newData)) {
      setData(newData);
    } else {
      console.warn('配列以外のデータが渡されました:', newData);
      setData([]);
    }
  };
  
  return [data, setArrayData];
}

// 使用例
function ProductList() {
  const [products, setProducts] = useArrayData();
  
  useEffect(() => {
    fetchProducts().then(setProducts);
  }, []);
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

このカスタムフックなら、どのコンポーネントでも安全にmap関数を使用できます。

useArrayDataフックが配列以外のデータを自動で弾いてくれます。 警告メッセージも出してくれるので、デバッグも簡単ですね。

一度作っておけば、色んなところで再利用できます。

TypeScriptで型安全性を高めよう

TypeScriptを使用する場合の型チェック方法も確認しましょう。

// ✅ TypeScriptでの型安全な実装
interface User {
  id: number;
  name: string;
  email: string;
}

interface UserListProps {
  users: User[];
}

function UserList({ users }: UserListProps) {
  // TypeScriptが型チェックするため、usersは必ず配列
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

// 使用時の型チェック
function App() {
  const [users, setUsers] = useState<User[]>([]);
  
  return <UserList users={users} />;
}

TypeScriptを使用すれば、コンパイル時にエラーを検出できます。

UserListPropsでusersはUser[]（配列）と型定義。 これで、配列以外のデータが渡されるとコンパイルエラーになります。

エラーを事前に防げるので、とても安全ですね。

デバッグのコツを身につけよう

map関数のエラーを素早く見つけるデバッグ方法をご紹介します。

エラーが起きても、冷静に対処できるようになりますよ。

console.logで確認しよう

// ✅ デバッグ用コード
function ItemList({ items }) {
  console.log('items:', items);
  console.log('items type:', typeof items);
  console.log('is array:', Array.isArray(items));
  
  if (!Array.isArray(items)) {
    console.warn('Expected array but got:', items);
    return <div>データが配列ではありません</div>;
  }
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

このようにデータの型と内容を確認してから処理しましょう。

console.logでデータの値を確認。 typeofでデータの型を確認。 Array.isArrayで配列かどうかを確認。

これで問題の原因がすぐわかりますね。

React Developer Toolsを活用しよう

React Developer Toolsを使用すると、propsの値を直接確認できます。

使い方はとても簡単

1. コンポーネントを選択
2. Propsタブでデータを確認
3. 配列かどうかをチェック

この方法なら、データの流れを視覚的に確認できます。

「あ、ここで配列じゃないデータが渡されてる！」とすぐわかりますよ。

よくある間違いと対処法を覚えよう

map関数を使用する際のよくある間違いを確認しましょう。

これを知っておけば、同じ間違いを繰り返さずに済みます。

間違い1：初期値の設定忘れ

// ❌ 間違ったコード
function ItemList() {
  const [items, setItems] = useState(); // 初期値がundefined
  
  useEffect(() => {
    fetchItems().then(setItems);
  }, []);
  
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

// ✅ 正しいコード
function ItemList() {
  const [items, setItems] = useState([]); // 初期値を空配列に設定
  
  useEffect(() => {
    fetchItems().then(setItems);
  }, []);
  
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

初期値を適切に設定することで、エラーを防げます。

useState()だと初期値がundefinedになってしまいます。 useState([])と書けば、最初から空配列になりますね。

「あ、初期値忘れてた！」はよくあるパターンです。

間違い2：条件分岐の不備

// ❌ 間違ったコード
function ItemList({ items }) {
  return (
    <ul>
      {items && items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// ✅ 正しいコード
function ItemList({ items }) {
  return (
    <ul>
      {Array.isArray(items) && items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Array.isArray()を使用して、確実に配列かどうかをチェックしましょう。

items &&だけだと、itemsが文字列や数値の場合もチェックを通ってしまいます。 Array.isArray(items)なら、確実に配列の場合のみ実行されますね。

より安全な条件分岐を心がけましょう。

まとめ：Reactのmap関数を安全に使おう！

お疲れ様でした！ Reactでmap関数を安全に使用するための重要なポイントをまとめます。

エラーの原因

なぜエラーが起きるのかを覚えておきましょう。

• 配列以外のデータでmap関数を使用するとエラーが発生する
• undefined、null、文字列、数値などは配列ではない
• APIのレスポンス形式が期待と異なる場合がある

対処法

実践で使える解決策です。

• 事前に配列かどうかをチェックする
• 初期値を適切に設定する（空配列など）
• 条件分岐で安全な実装を心がける
• TypeScriptを使用すると型安全性が向上する

実践のコツ

開発で役立つポイントです。

• console.logでデータを確認する習慣をつける
• React Developer Toolsでpropsを視覚的にチェック
• カスタムフックで共通処理をまとめる
• ローディング状態やエラー状態も考慮する

これらの方法を理解すれば、map関数のエラーを確実に防ぐことができます。

エラーが発生した時は、まずデータが配列かどうかを確認してみてください。 きっと、問題の原因がすぐに見つかりますよ。

ぜひ実際のプロジェクトでこれらの安全な実装方法を試してみてくださいね！