C
React 一覧
前へ6 / 22次へ
React/コンポーネント/Lesson 06

リストとKey

25分·theory
このチャプター
4/4
JavaScript

リストとKey

💡 なぜ学ぶ必要があるのか？

🎯 配列データを画面に表示するための最も基本的な方法です。
💼 Keyを誤って使うとバグが発生するため、必ず習得する必要があります。
⚡ 商品一覧、コメント、検索結果など、あらゆるリストで必要になります。
🏢 실무에서는
実務では、データベースから取得した商品の配列を `map()` で商品カードの一覧に変換します。Keyを正しく設定しないと、アイテムを削除したときに誤った項目が消えるバグが発生します。

リストとKey — mapで配列をUIに変換する

日常的な例え: 生徒名簿

先生が生徒名簿を見て出席カードを一枚ずつ作るように、
Reactはmap()を使って配列をコンポーネントのリストに変換します。

基本パターン

jsx
const fruits = ["りんご", "バナナ", "ぶどう"];
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

Keyはなぜ必要なのか？

Reactがリスト内でどの項目が追加・削除・変更されたかを判断できるよう、

各要素に一意の識別子を付けます。

Keyの推奨優先順位

1. key={item.id} — サーバーからの一意のID（最善）

2. key={item.slug} — 一意の文字列

3. key={index} — インデックス（リストが変化しない場合のみ）

Keyを使わないと？

  • ▸パフォーマンス低下（リスト全体が再レンダリング）
  • ▸コンソールに警告が表示される
  • ▸アニメーションや状態が誤動作する可能性あり
💻 商品リストのレンダリング + Keyの正しい使い方 
// ===== 入力: 商品データ配列 =====
const products = [
  { id: 1, name: "ノートパソコン", price: 1200000, inStock: true },
  { id: 2, name: "マウス", price: 45000, inStock: true },
  { id: 3, name: "キーボード", price: 89000, inStock: false },
];

// ===== 処理: mapで配列 → コンポーネント変換 =====
function ProductList() {
  return (
    <ul>
      {products.map(product => (
        // keyは必ず固有の値、idがあればidを使用
        <ProductItem key={product.id} product={product} />
      ))}
    </ul>
  );
}

// ===== 個別商品コンポーネント =====
function ProductItem({ product }) {
  const { name, price, inStock } = product;  // 分割代入

  // 出力: 商品カードUI
  return (
    <li style={{ opacity: inStock ? 1 : 0.5 }}>
      <strong>{name}</strong>
      <span>{price.toLocaleString()}円</span>
      {/* 条件付きレンダリング: 在庫状況表示 */}
      {inStock ? (
        <span style={{ color: "green" }}>在庫あり</span>
      ) : (
        <span style={{ color: "red" }}>品切れ</span>
      )}
    </li>
  );
}

💡 💡 Keyのヒント

  • ▸DB ID: 最も理想的なKey
  • ▸インデックスKey: ソートや削除のない静的なリストのみ
  • ▸crypto.randomUUID(): クライアントでIDを生成する
  • ▸パフォーマンス: Keyが正しければ、ReactはDOMの最小限の部分だけを更新する

このコンセプトはReactコンポーネント開発において核心的です。Reactの宣言的UIパラダイムを理解し、propsとstateの違いを明確に区別してください。コンポーネントは入力（props）に対して常に同じ出力（JSX）を返す純粋関数のように動作する必要があります。

⚛️ Reactパターン — リストとKey

リストとKeyをReactでどのように使うか、コードとともにステップバイステップで学びましょう。
1 🧩 1. リストとKeyを使うシナリオ
この機能が必要な状況。
↓
2 💻 2. コードを書く
リストとKeyの基本的な使い方。
↓
3 🎨 3. レンダリング結果
ユーザーが見る画面。
↓
4 💡 4. 実践的なヒント
よくある落とし穴とベストプラクティス。

📋 リストレンダリング + 追加・削除

コードを直接編集すると0.7秒後に自動で反映されます。React 18 + Babelでブラウザ上で即時実行。
🖥️ 実行結果 — レンダリングされたReactコンポーネント
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

確認クイズ

リストレンダリングでkey propを使わないと？
💡 keyがない場合、Reactはリストの変更時にどの要素が変わったかを判断できず、全体を再レンダリングします。コンソールに 'Each child in a list should have a unique key prop' という警告が表示されます。
先に読むとよい概念: 条件付きレンダリング
次のおすすめ: useState
前へ一覧次へ
リストとkey - React