1. Reactのリストレンダリングとは？

Reactのリストレンダリングとは、配列（はいれつ）に入っている複数のデータを、画面に一覧として表示することです。配列とは、データを順番に箱の中へ入れて管理する仕組みのことです。たとえば、買い物メモや名前の一覧のように、同じ種類の情報をまとめて持つときに使われます。

パソコンを触ったことがない人でも、紙に「りんご・バナナ・みかん」と並べて書くイメージを思い浮かべてください。 Reactでは、この並んだデータをそのまま画面に表示できます。このときに使われるのが、JavaScriptのmap関数です。

2. map関数とは何をするもの？

map関数は、配列の中身を一つずつ取り出して、同じ処理を繰り返すための仕組みです。難しく聞こえますが、「箱の中身を順番に取り出して、同じ形で並べる機械」だと思ってください。

たとえば、名前が三つ入った配列があった場合、map関数を使うと、一人分ずつ取り出して「画面に表示する」という作業を自動で行ってくれます。人の手で一行ずつ書かなくてよいので、とても便利です。

3. 配列をそのまま画面に表示してみよう

まずは、一番シンプルな例から見てみましょう。果物の名前を配列に入れて、それをReactで表示します。


import React from "react";

function App() {
  const fruits = ["りんご", "バナナ", "みかん"];

  return (
    <div>
      <h1>フルーツ一覧</h1>
      <ul>
        {fruits.map((fruit) => (
          <li>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「フルーツ一覧」と表示され、その下に「りんご・バナナ・みかん」が箇条書きで並びます）

この例では、fruitsという配列の中身をmap関数で一つずつ取り出しています。そして、liタグを使ってリストとして表示しています。 liタグは「リストの一行」を表すHTMLの部品です。

4. keyとは何？なぜ必要なの？

Reactでリストレンダリングをするときには、keyという特別な目印が必要です。 keyとは、リストの一つ一つに付ける番号札のようなものです。 Reactは、この番号札を見て「どの行がどのデータか」を判断しています。

もしkeyがないと、画面の更新がうまくいかず、思わぬ表示崩れが起きることがあります。初心者のうちは「Reactのお約束」だと思って、必ず付けるようにしましょう。


import React from "react";

function App() {
  const animals = ["いぬ", "ねこ", "うさぎ"];

  return (
    <div>
      <h1>どうぶつ一覧</h1>
      <ul>
        {animals.map((animal, index) => (
          <li key={index}>{animal}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面に「どうぶつ一覧」と表示され、「いぬ・ねこ・うさぎ」が順番に表示されます）

5. オブジェクトの配列を表示する方法

実際の開発では、文字だけでなく、名前や年齢など複数の情報を持つことが多いです。その場合は、オブジェクトという仕組みを使います。オブジェクトとは、「名前と値をセットで持つ箱」のようなものです。


import React from "react";

function App() {
  const users = [
    { id: 1, name: "たろう", age: 20 },
    { id: 2, name: "はなこ", age: 25 },
    { id: 3, name: "じろう", age: 30 }
  ];

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}（{user.age}歳）
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（画面にユーザーの名前と年齢が一覧で表示されます）

このように、idをkeyとして使うことで、より安全にリストを管理できます。実務でも、この書き方はとてもよく使われます。