はじめに
この記事では、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のコーディング方法)の全シリーズを参照してください。