リストのレンダリングとkeyの役割

mapを使ってデータの配列を画面上の要素のリストに変え、keyで各要素を識別しましょう。

8 分 · 3 問

インターフェースはリストであふれています。会話の中のメッセージ、店舗の商品、プレイリストの曲……。タグを手作業でコピー＆ペーストする代わりに、データの 配列 から出発し、map メソッドで変換します。おさらいすると、map は配列の すべての要素 に関数を適用し、その結果からなる 新しい配列 を返します。

const fruits = ["apple", "banana", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

Reactでもまったく同じことをします。ただし、map に渡す関数は文字列ではなく JSX を返します。ReactはJSX要素の配列を表示する方法を知っていて、それらを次々に描画します。唯一の条件は、各要素に key という名前の特別なpropを与えることです。

function FruitList() {
  const fruits = ["apple", "banana", "kiwi"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

key は何のためにあるのでしょう？ それは 一意のラベル で、リストが変化する（追加、削除、並べ替え）ときにReactが各要素を見分けるためのものです。クロークの番号札のようなもので、番号がなければ正しいコートを返すすべがありません。keyのおかげで、Reactは実際に変わったものだけを更新します。実際には、いちばん良いkeyはデータから来る 一意で安定した識別子、たとえば id フィールドです。

const tasks = [
  { id: 1, label: "Buy groceries" },
  { id: 2, label: "Water the plants" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. Reactでリストを描画するにはどの配列メソッドを使いますか？
   • push
   • map
   • forEach
2. key propは何のためにありますか？
   • リストを自動的にアルファベット順に並べ替えるため
   • リストをパスワードで保護するため
   • Reactがリストの各要素を識別できるようにするため
3. keyにとっていちばん良い値は何ですか？
   • データから来る一意で安定した識別子
   • どんな場合でも、配列内の要素のインデックス
   • レンダリングのたびに生成される乱数