1. リストレンダリングとは何か

リストレンダリングとは、配列のデータを使って、同じ形の表示を何個も並べることです。

たとえば、名前の一覧や商品リストなど、繰り返し表示したいときによく使われます。

Reactではmapという仕組みを使って、データ一つ一つを画面に表示します。

2. シンプルなリスト表示の基本

まずは、一番基本的なリストの表示方法を確認しましょう。難しいことは考えず、配列をそのまま画面に出します。


import React from "react";

function App() {
  const names = ["たろう", "はなこ", "じろう"];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

export default App;

（画面に名前のリストが縦に表示されます）

このように、Reactはデータの数だけ表示を作ります。データが増えれば、その分表示も増えます。

3. パフォーマンスとはどういう意味か

パフォーマンスとは、動きの速さや滑らかさのことです。画面がすぐ反応するかどうかを表します。

データが少ないうちは問題ありませんが、何百、何千と増えてくると、画面を描き直す処理が重くなります。

例えるなら、メモ帳に数行書くのはすぐでも、何百ページも書き直すと時間がかかるのと同じです。

4. keyがパフォーマンスに関係する理由

keyは、Reactがリストの中身を見分けるための番号札です。これがあることで、どの項目が変わったのかを判断できます。

keyが正しくないと、全部を書き直したと勘違いして、無駄な処理が増えてしまいます。

人の名前リストに番号が付いていないと、誰が誰だか分からなくなるのと同じです。

5. 安定したkeyを使う例

indexをkeyにするのは簡単ですが、並び替えや削除があると問題になることがあります。

できるだけ、データごとに決まった番号を使いましょう。


import React from "react";

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default App;

（ユーザーの名前が安定した形で表示されます）

6. 無駄な再描画を減らす考え方

Reactでは、状態が変わると画面を描き直します。しかし、関係ない部分まで描き直すと重くなります。

リストの一部だけが変わるなら、その部分だけが更新されるのが理想です。

正しいkeyを使うことは、その理想に近づくための第一歩です。

7. コンポーネントに分けると軽くなる理由

リストの一行を部品として分けると、 Reactは変更があった部品だけを更新しやすくなります。

大きな紙に全部書くより、付箋を貼り替えるほうが楽なのと同じです。


import React from "react";

function Item({ name }) {
  return <li>{name}</li>;
}

function App() {
  const names = ["たろう", "はなこ", "じろう"];

  return (
    <ul>
      {names.map((name, index) => (
        <Item key={index} name={name} />
      ))}
    </ul>
  );
}

export default App;

（リストの一行一行が部品として表示されます）