リストの表示
項目のリストを表示するには、for:each ディレクティブまたは iterator ディレクティブを使用して、配列を反復処理します。このディレクティブは、反復する HTML 要素を囲むネストされた <template> タグに追加します。
iterator ディレクティブの first プロパティと last プロパティを使用すると、配列内の最初と最後の項目に特別な動作を適用できます。
使用するディレクティブにかかわらず、各項目に一意の ID を割り当てるには、key ディレクティブを使用する必要があります。リストが変更されると、フレームワークは key を使用して、変更された項目のみを再表示します。key は、テンプレート内でパフォーマンスを最適化するために使用されます。実行時に DOM に反映されることはありません。
コードエディタで確認するには、github.com/trailheadapps/lwc-recipes リポジトリにある helloForEach および helloIterator コンポーネントを開きます。コンポーネント IDE にコードをコピーすることもできます。
for:each ディレクティブを使用する場合、現在の項目にアクセスするには、for:item="currentItem" を使用します。この例では使用していませんが、現在の項目のインデックスにアクセスするには、for:index="index" を使用します。
ネストされたテンプレートの最初の要素にキーを割り当てるには、key={uniqueId} ディレクティブを使用します。
次の例では、コンポーネントの JavaScript クラスで定義されている contacts という名前の配列が反復処理されています。
リスト内のすべての項目には、key が必要です。リストが変更されると、フレームワークは、変更された項目のみを再表示できるようにするため、key を使用して各項目を識別します。key は、文字列または数字にする必要があります。オブジェクトにすることはできません。index を key の値として使用することはできません。受信データセットには、一意のキーを割り当ててください。データセットに新しい項目を追加するには、キーを追跡および生成する非公開のプロパティを使用してください。
リスト内の最初または最後の項目に特別な動作を適用するには、iterator:iteratorName={array} という形式の iterator ディレクティブを使用します。この iterator ディレクティブは、template タグ上で使用します。
iteratorName を使用すると、次のプロパティにアクセスできます。
value— リスト内の項目の値。このプロパティは、配列のプロパティにアクセスするために使用します。たとえば、{iteratorName}.value.{propertyName}のように使用します。index— リスト内の項目のインデックス。first— この項目がリスト内の最初の項目であるかどうかを示す Boolean 値。last— この項目がリスト内の最後の項目であるかどうかを示す Boolean 値。
このサンプルコードでは、前の例と同じ配列が使用されています。リスト内の最初および最後の項目に特別な表示を適用するため、コードでは、lwc:if ディレクティブとともに first および last プロパティが使用されています。
項目がリスト内の最初の項目の場合は、<div> タグの表示時に、CSS list-first クラスに定義されているスタイルが使用されます。項目がリスト内の最後の項目の場合は、<div> タグの表示時に、CSS list-last クラスに定義されているスタイルが使用されます。
lwc-recipes リポジトリの wireGetPicklistValues コンポーネントは、lightning-input 基本コンポーネントを使用して、選択リスト値のリストを表示します。
関連トピック