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

Developer

2020.08.24

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

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

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

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

Contents

1 iteratorを使った反復処理
2 ループ中のプロパティにアクセスする
3 まとめ

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で判定することができます。
上記の場合だとこのようになります。