React リスト

React では、何らかのループ処理を使用してリストをレンダリングします。
一般的には、JavaScript の map() 配列メソッドが推奨される手法です。

1. map() メソッドによるリストのレンダリング

まずは map() メソッドを使用したシンプルなリスト作成の例を見てみましょう。

function MyCars() {
  const cars = ['フォード', 'BMW', 'アウディ'];
  return (
    <>
      <h1>私の所有車リスト:</h1>
      <ul>
        {/* 配列をループして li 要素を生成 */}
        {cars.map((car) => <li>車種: { car }</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

このコードを React 環境で実行すると正常に動作しますが、コンソールにはリスト項目に "key" が提供されていないという警告（Warning）が表示されます。

2. React リストにおける Key の役割

Key（キー） は、React がどの要素が変更、追加、または削除されたかを追跡するために使用されます。これにより、リスト内の特定のアイテムが更新された際、リスト全体ではなく、そのアイテムだけを効率的に再レンダリングすることが可能になります。

Key は「兄弟要素（Siblings）」の間で一意（ユニーク）である必要がありますが、アプリケーション全体で一意である必要はありません。

一般的に、Key には各データに割り当てられた一意の ID を使用すべきです。最終手段として、配列のインデックスを Key として使用することも可能です。

2.1 ID を Key に使用した実装例

上記の例に Key を追加した、より実戦的なコードです。

function MyCars() {
  const cars = [
    {id: 1001, brand: 'フォード'},
    {id: 1002, brand: 'BMW'},
    {id: 1003, brand: 'アウディ'}
  ];
  return (
    <>
      <h1>私の所有車リスト:</h1>
      <ul>
        {/* 一意の ID を key プロパティに指定 */}
        {cars.map((car) => <li key={car.id}>車種: { car.brand }</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

3. 配列のインデックスを Key として使用する場合

配列のインデックスを Key として使用することも可能ですが、以下の条件を満たさない限り推奨されません。

• リストが静的（変更されない）であること
• リストが並べ替えられたり、フィルタリングされたりしないこと
• リストのアイテムに固有の ID が存在しないこと

3.1 インデックスを Key に使用した例

動的なリストには推奨されませんが、実装方法は以下の通りです。

function MyCars() {
  const cars = ['フォード', 'BMW', 'アウディ'];
  return (
    <>
      <h1>私の所有車リスト:</h1>
      <ul>
        {/* 第2引数の index を key に利用 */}
        {cars.map((car, index) => <li key={index}>車種: { car }</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);