React のリストとキー

はじめに

React では、データのコレクションから複数の類似したコンポーネントを表示する必要がよくあります。JavaScript の配列メソッド（map()など）を使用してデータの配列を操作し、JSX 要素の配列に変換できます。

「キー」は、要素のリストを作成する際に含める必要がある特別な文字列属性です。キーは、React がどのアイテムが変更されたか、追加されたか、または削除されたかを識別するのに役立ちます。これにより、React はユーザーインターフェースを効率的に更新できます。

この実験では、データの配列を取得し、それをコンポーネントのリストに変換してレンダリングする方法を学びます。また、key prop の重要な役割についても理解します。

コンポーネント内にアイテムの配列を作成する

このステップでは、リストとして表示したいデータを定義することから始めます。ほとんどのアプリケーションでは、このデータは API やデータベースから取得されますが、この実験では、コンポーネント内で直接簡単な配列を定義します。

まず、正しいディレクトリにいることを確認してください。React アプリケーション my-app は、/home/labex/project ディレクトリに作成されています。

WebIDE の左側にあるファイルエクスプローラーを使用して、ファイル my-app/src/App.jsx を開きます。

App コンポーネント関数内で、return ステートメントの前に、文字列の配列となる products という名前の定数を定義します。

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  return (
    <>
      <h1>My Product List</h1>
    </>
  );
}

export default App;

この時点では、配列は定義されていますが、まだレンダリングされていません。次のステップで、このデータを表示する方法を示します。

map メソッドで配列を JSX 要素にマッピングする

このステップでは、JavaScript のmap()メソッドを使用して、products配列を JSX 要素のリストに変換します。map()メソッドは、元の配列の各要素に関数を呼び出すことで新しい配列を作成します。

各製品文字列を<li>（リストアイテム）要素にマッピングします。

src/App.jsxファイルを変更します。returnステートメント内で、マッピングロジックを波括弧{}で囲んで埋め込みます。

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

次に、プロジェクトの依存関係をインストールし、開発サーバーを起動して結果を確認しましょう。

WebIDE で新しいターミナルを開きます。まず、プロジェクトディレクトリに移動します。

cd my-app

次に、依存関係をインストールします。

npm install

最後に、開発サーバーを起動します。--hostおよび--portフラグは、LabEx 環境内でアプリケーションにアクセスできるようにするために必要です。

npm run dev -- --host 0.0.0.0 --port 8080

サーバーが起動したら、LabEx インターフェースのWeb 8080タブに切り替えます。製品のリストが表示されるはずです。ただし、ブラウザの開発者コンソールを開くと（右クリック -> 検証 -> コンソール）、次の警告が表示されます。「Warning: Each child in a list should have a unique "key" prop.」（リスト内の各子要素には、一意の「key」プロップが必要です。）これは次のステップで修正します。

各リストアイテムにユニークな key プロップを割り当てる

このステップでは、各リストアイテムに一意のkeyを提供することで、コンソール警告を修正します。キーは、React が各アイテムの ID を追跡するために不可欠であり、データが変更されたときにリストを効率的に再レンダリングするのに役立ちます。

キーを選択する最良の方法は、兄弟の中でリストアイテムを一意に識別する文字列を使用することです。多くの場合、データから取得した ID を使用します。

データを、それぞれに一意のidを持つオブジェクトの配列に変更しましょう。src/App.jsxを次のように更新します。各製品のidをキーとして使用します。

function App() {
  const products = [
    { id: "p1", name: "Laptop" },
    { id: "p2", name: "Mouse" },
    { id: "p3", name: "Keyboard" },
    { id: "p4", name: "Monitor" }
  ];

  const listItems = products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

<li>要素に追加されたkey={product.id}プロップに注目してください。キーは React が内部的に使用する特別なプロップであり、コンポーネントに渡されることはありません。

ファイルを保存した後、Web 8080タブと開発者コンソールを再度確認してください。リストは以前と同様にレンダリングされるはずですが、キーが見つからないという警告は消えています。

ユニークな ID がない場合はインデックスを key として使用する

このステップでは、データに安定した一意の ID がない場合の対処方法を学びます。そのような場合、最終手段として配列内のアイテムのインデックスを使用できます。

map()関数は、現在のアイテムのインデックスをオプションの 2 番目の引数として提供します。このインデックスをキーとして使用できます。

products配列を文字列の単純な配列に戻し、インデックスをキーとして使用しましょう。src/App.jsxを次のように変更します。

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

重要な注意点： アイテムの順序が変更される可能性がある場合、インデックスをキーとして使用することは推奨されません。これはパフォーマンスに悪影響を与え、コンポーネントの状態に問題を引き起こす可能性があります。リストにアイテムを追加、削除、または並べ替えを行うと、インデックスが変更され、React のレンダリングアルゴリズムを混乱させる可能性があります。リストが静的で、決して並べ替えられない場合にのみ使用してください。

ul または ol タグ内にマップされたリストをレンダリングする

このステップでは、リストアイテムを<ul>（順序なしリスト）または<ol>（順序付きリスト）タグでラップします。これは、セマンティックに正しい HTML を作成するために重要であり、アクセシビリティと SEO に役立ちます。

現在、一連の<li>要素をフラグメント（<>...</>）の直下にレンダリングしています。適切な順序なしリストを作成するために、listItems変数を<ul>タグでラップしましょう。

src/App.jsxを最終コードで更新してください。

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default App;

これで、Web 8080タブに戻ってください。リストが、標準的な HTML の<ul>要素から期待されるように、箇条書きで正しくフォーマットされているのがわかります。これで、正しいキーとセマンティックな HTML を使用して、React で動的なリストを正常にレンダリングしました。

まとめ

実験完了おめでとうございます！

この実験では、React でリストをレンダリングする基本的な概念を学びました。以下の点を実践しました。

• コンポーネント内でデータ配列を定義する。
• map()メソッドを使用して、データ配列を JSX 要素の配列に変換する。
• React の効率的なレンダリングを助けるための、リストアイテムにおけるkeyプロップの重要な重要性。
• データから安定した一意の ID をキーとして使用する方法。
• 配列のインデックスを最終手段としてキーとして使用する方法と、その潜在的な欠点。
• セマンティックな HTML のために、リストアイテムを<ul>または<ol>でラップする方法。

これらのスキルは、React で動的でデータ駆動型のアプリケーションを構築するために不可欠です。