1. ネストされたリストとは何か

ネストとは「入れ子」という意味です。ネストされたリストとは、リストの中にさらに別のリストが入っている状態を指します。たとえば、学校のクラス一覧があり、その中に生徒の名前一覧がある場合などが該当します。

現実世界ではよく見かける構造ですが、プログラミング初心者にとっては急に難しく感じやすい部分です。しかし、Reactでは基本のリスト表示を理解していれば、考え方は同じです。

大切なのは「外側のリストを一つずつ表示し、その中で内側のリストを表示する」という順番です。焦らず、一段ずつ階段を上るように考えましょう。

2. シンプルなネストされたデータ構造

ネストされたリストを扱うためには、まずデータの形を理解する必要があります。 Reactでは、配列とオブジェクトを組み合わせたデータをよく使います。

たとえば、「カテゴリ」と「その中の商品」という関係は、ネスト構造の代表例です。外側がカテゴリの一覧で、内側が商品リストという形になります。

このようなデータ構造をそのまま画面に反映できるのが、Reactの便利なところです。

3. ネストされたリストをmapで表示する基本例


import React from "react";

function App() {
  const categories = [
    {
      id: 1,
      name: "果物",
      items: ["りんご", "みかん", "ぶどう"]
    },
    {
      id: 2,
      name: "野菜",
      items: ["にんじん", "じゃがいも"]
    }
  ];

  return (
    <div>
      {categories.map(category => (
        <div key={category.id}>
          <h3>{category.name}</h3>
          <ul>
            {category.items.map(item => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

（「果物」「野菜」という見出しの下に、それぞれの項目がリスト表示されます）

この例では、外側のmapでカテゴリを表示し、内側のmapで項目を表示しています。 mapが二回出てきますが、それぞれ役割が違うだけです。

外側は「カテゴリを一つずつ表示する係」、内側は「その中身を表示する係」と考えると分かりやすくなります。

4. ネストされたリストとkeyの考え方

ネストされたリストでも、keyは必ず必要です。 keyはReactが要素を区別するための目印でした。

外側のリストにはカテゴリ専用のkeyを、内側のリストには項目専用のkeyを設定します。同じ画面内で重ならなければ問題ありません。

初心者のうちは「どのmapにどのkeyを付けるのか」を意識するだけで十分です。無理に難しいことを考える必要はありません。

5. オブジェクトを使ったネスト例


import React from "react";

function App() {
  const classes = [
    {
      classId: "a",
      className: "1年1組",
      students: [
        { id: 1, name: "たろう" },
        { id: 2, name: "はなこ" }
      ]
    }
  ];

  return (
    <div>
      {classes.map(cls => (
        <div key={cls.classId}>
          <h3>{cls.className}</h3>
          <ul>
            {cls.students.map(student => (
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

（クラス名の下に生徒の名前が一覧で表示されます）

このように、内側がオブジェクトの配列であっても考え方は同じです。データの形に合わせてmapを使い分けるだけで、画面は正しく表示されます。