繰り返しでのコンポーネント描画

Reactでは、配列の要素を .map() 関数を使って繰り返し処理し、リストを描画するのが一般的です。この際、各要素に key を与えることで、Reactはリストの差分を正確に検出し、効率よく再レンダリングできます。

基本的な使用例

export const NameList = () => {
  const names = ["Alice", "Bob", "Charlie"];

  return (

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

ただし、上記のように index を key に使うのは注意が必要です。次章で解説します。

key={index} はアンチパターン？

❌ indexをkeyに使うことで起こりうる問題

key は各要素の恒久的な識別子として扱われるため、配列の並びが変更された場合に index を使っていると以下のような問題が発生する可能性があります：

• 入力フォームやアニメーションの状態が意図せずリセットされる
• Reactが誤ってDOMを再利用してしまい、表示と状態がズレる
• 不要な再レンダリングやエフェクトが起こる

// ⚠️ indexをkeyに使った場合、要素の並び替えに弱い
const items = ["A", "B", "C"];
setItems(["C", "A", "B"]);

このような変更があると "C" は元の "A" のDOMとして再利用される可能性があり、予期せぬ動作になります。

✅ 推奨: 一意な識別子（id）をkeyに使う

type Item = {
  id: string;
  label: string;
};

const items: Item[] = [
  { id: "a1", label: "りんご" },
  { id: "b2", label: "ばなな" },
];

export const ItemList = () => {
  return (

<ul>
      {items.map((item) => (
        <li key={item.id}>{item.label}</li>
      ))}
    </ul>
  );
};

このように データ固有の id を使うことで、並び順の変更や状態保持があっても安全です。