Developer

【Lightning Web Component】iteratorを使った反復処理

Developer
この記事は約4分で読めます。

こんにちは、アンダーソンです。
今回はiteratorを使った反復処理を試してみようと思います。

以前にfor:eachを使った反復処理を書いたんですが

公式のドキュメントをみていると、iteratorという方法でも反復処理ができる
ようなので実際に試してみました。

スポンサーリンク

iteratorを使った反復処理

import { LightningElement } from 'lwc';

export default class SelectorTest extends LightningElement {
    values = [
        { 
            Id: 1,
            name: '藤浪',
            age: 26 
        },
        {
            Id: 2,
            name: '青柳',
            age: 26 
        },
        {
            Id: 3,
            name: '西',
            age: 29
        },
        {
            Id: 4,
            name: '秋山',
            age: 29
        }
    ];
}

今回上記のような配列を用意しました。
でHTMLの方は下記のようにしました。

<template>
    <lightning-card>
        <ul class="slds-var-m-around_medium">
            <template iterator:item={values}>
                <li key={item.value.Id}>
                    {item.value.name}選手は{item.value.age}歳です。
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

これで下記のように表示されます。

iterator:〇〇のところにくる名前がループ内での変数名になりますので、
今回の場合、itemという名前でループを回すことになります。

ループ中のプロパティにアクセスする

次にfor:eachではできないプロパティにアクセスしてみます。
iteratorでは下記のプロパティにアクセスできます。

  • value
  • index
  • first →Boolean
  • last →Boolean

for:eachとは違い、インデックスと最初の要素、最後の要素をとることができます。
ではやってみましょう。

<template>
    <lightning-card>
        <ul class="slds-var-m-around_medium">
            <template iterator:item={values}>
                <li key={item.value.Id}>
                    <div if:true={item.first}>一番目</div>
                    {item.index}:{it.value.name}選手は{it.value.age}歳です。
                    <div if:true={item.last}>最後</div>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

firstとlastは真偽値の為、ifで判定することができます。
上記の場合だとこのようになります。

ここでは、最初と最後のdivに対して一番目と最後と入れてますが、
クラスを指定してCSSで装飾なんてこともできます。

まとめ

最初と最後というのが意図的に取得できるiteratorでの
ループはまた違った見せ方ができる手法になると思います。

しっかりマスターしておきたいところですね。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。