リストの表示

項目のリストを表示するには、for:each ディレクティブまたは iterator ディレクティブを使用して、配列を反復処理します。このディレクティブは、反復する HTML 要素を囲むネストされた <template> タグに追加します。

iterator ディレクティブの first プロパティと last プロパティを使用すると、配列内の最初と最後の項目に特別な動作を適用できます。

使用するディレクティブにかかわらず、各項目に一意の ID を割り当てるには、key ディレクティブを使用する必要があります。リストが変更されると、フレームワークは key を使用して、変更された項目のみを再表示します。key は、テンプレート内でパフォーマンスを最適化するために使用されます。実行時に DOM に反映されることはありません。

コードエディタで確認するには、github.com/trailheadapps/lwc-recipes リポジトリにある helloForEach および helloIterator コンポーネントを開きます。コンポーネント IDE にコードをコピーすることもできます。

Tip

for:each

for:each ディレクティブを使用する場合、現在の項目にアクセスするには、for:item="currentItem" を使用します。この例では使用していませんが、現在の項目のインデックスにアクセスするには、for:index="index" を使用します。

ネストされたテンプレートの最初の要素にキーを割り当てるには、key={uniqueId} ディレクティブを使用します。

次の例では、コンポーネントの JavaScript クラスで定義されている contacts という名前の配列が反復処理されています。

1<!-- helloForEach.html -->
2<template>
3  <lightning-card title="HelloForEach" icon-name="custom:custom14">
4    <ul class="slds-m-around_medium">
5      <template for:each={contacts} for:item="contact">
6        <li key={contact.Id}>{contact.Name}, {contact.Title}</li>
7      </template>
8    </ul>
9  </lightning-card>
10</template>

1// helloForEach.js
2import { LightningElement } from "lwc";
3
4export default class HelloForEach extends LightningElement {
5  contacts = [
6    {
7      Id: 1,
8      Name: "Amy Taylor",
9      Title: "VP of Engineering",
10    },
11    {
12      Id: 2,
13      Name: "Michael Jones",
14      Title: "VP of Sales",
15    },
16    {
17      Id: 3,
18      Name: "Jennifer Wu",
19      Title: "CEO",
20    },
21  ];
22}

名前とタイトルのリスト。

リスト内のすべての項目には、key が必要です。リストが変更されると、フレームワークは、変更された項目のみを再表示できるようにするため、key を使用して各項目を識別します。key は、文字列または数字にする必要があります。オブジェクトにすることはできません。index を key の値として使用することはできません。受信データセットには、一意のキーを割り当ててください。データセットに新しい項目を追加するには、キーを追跡および生成する非公開のプロパティを使用してください。

Important

iterator

リスト内の最初または最後の項目に特別な動作を適用するには、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 クラスに定義されているスタイルが使用されます。

1<template>
2  <lightning-card title="HelloIterator" icon-name="custom:custom14">
3    <ul class="slds-m-around_medium">
4      <template iterator:it={contacts}>
5        <li key={it.value.Id}>
6          <div lwc:if={it.first} class="list-first"></div>
7          {it.value.Name}, {it.value.Title}
8          <div lwc:if={it.last} class="list-last"></div>
9        </li>
10      </template>
11    </ul>
12  </lightning-card>
13</template>

1.list-first {
2  border-top: 1px solid black;
3  padding-top: 5px;
4}
5
6.list-last {
7  border-bottom: 1px solid black;
8  padding-bottom: 5px;
9}

名前とタイトルのリスト。最初の名前とタイトルは太字で表示されています。

例

lwc-recipes リポジトリの wireGetPicklistValues コンポーネントは、lightning-input 基本コンポーネントを使用して、選択リスト値のリストを表示します。

関連トピック

HTML テンプレートディレクティブ

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。