Reactで配列のレンダリング方法を理解する

はじめに

この記事では、Reactで配列をレンダリングする方法と、コンポーネント内のさまざまな要素をレンダリングするときに使用するベストプラクティスについて説明します。

JavaScriptなどの最新のWeb言語を使用する利点の1つは、HTMLチャンクの生成をすばやく自動化できることです。

配列やオブジェクトに対してループのようなものを使用すると、アイテムごとにHTMLを一度記述するだけで済みます。さらに良いことに、将来編集をするときは一度適用するだけで済みます。

複数要素をレンダリングする

Reactで複数のJSX要素をレンダリングするには、.map()メソッドを使用して配列をループし、単一の要素を返すことができます。

以下では、reptiles配列をループして、配列内の各項目のli要素を返します。このメソッドは、配列内の項目ごとに単一の要素を表示するときに使用できます。

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

出力は次のようになります。

Output
- alligator
- snake
- lizard

次の例では、配列によってレンダリングされる要素のリストに一意のkeyを追加する理由について調べます。

コンポーネント内の要素コレクションをレンダリングする

この例では、配列をループして、前の例のように一連のリスト項目コンポーネントを作成します。

まず、<ol>コンポーネントを使用して<li>項目を保持するようにコードを更新します。<ol>コンポーネントは、項目の順序付きリストを作成します。

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

ただし、コンソールを見ると、配列またはイテレータ内の各子に一意のキーが必要であるという警告が表示されます。

コンポーネント内でコレクションをレンダリングしようとすると、keyを追加する必要があるため、警告が表示されます。

Reactでは、一意のkeyを使用して、コレクション内のどのコンポーネントを再レンダリングする必要があるかを判断します。一意のkeyを追加すると、更新が行われるたびにコンポーネント全体を再レンダリングする必要がなくなります。

このステップでは、コンポーネント内の複数の要素をレンダリングし、一意のkeyを追加します。警告を解決するために、コードを更新してリスト項目にkeyを追加します。

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

keyを追加したので、警告はコンソールに表示されなくなります。

次の例では、一般的な構文エラーが発生することなく、隣接する要素をレンダリングする方法を説明します。

隣接する要素のレンダリング

JSXでは、コンポーネント内の複数の要素をレンダリングするには、前後にラッパーを追加する必要があります。

この例では、最初に配列をループせずに項目のリストを返します。

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

これにより、コンソールにハードエラーが発生します。

このエラーを修正するには、ラッパーでli要素のブロックをラップする必要があります。リストの場合は、olまたはul要素でラップすることができます。

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

隣接する<li>要素が、囲みタグ<ol>でラップされ、エラーが表示されなくなります。

次のセクションでは、fragmentコンポーネントを使用したラッパーでリストをレンダリングします。

React.fragmentを使用した隣接する要素のレンダリング

React v16.2より前は、<div>要素でコンポーネントブロックをラップすることができました。これによりアプリケーションがdivsでいっぱいになり、よく「divスープ」と呼ばれていました。

この問題を解決するために、Reactはfragmentコンポーネントと呼ばれる新しいコンポーネントをリリースしました。

囲みタグ内でリストをレンダリングする必要があるが、divの使用を避けたい場合は、代わりにReact.Fragmentを使用できます。

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

レンダリングされたコードにはli要素のみが含まれ、React.Fragmentコンポーネントはコードに表示されません。

また、React.fragmentはキーを追加する必要がないことに注意してください。

React.fragmentの記述は、<div>を追加するよりも面倒であることに気づくかもしれません。幸い、Reactチームはこのコンポーネントを表す短い構文を開発しました。<React .Fragment></React.Fragment>の代わりに<> </>を使用できます。

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

まとめ

この記事では、Reactアプリケーションで配列をレンダリングする方法のさまざまな例を見てきました。

別のコンポーネント内で要素をレンダリングする場合は、一意のkeyを使用して、ラッパー要素内で要素をラップする必要があります。

使用例に応じて、キーを必要としないfragmentコンポーネントでラップされた単純なリストを作成できます。

Reactのベストプラクティスの詳細については、DigitalOceanのHow To Code in React.js（React.jsのコーディング方法）の全シリーズを参照してください。