【Lightning Web Component】HTML側での条件判定、繰り返し処理の仕方

こんにちは、アンダーソンです。
今回はLWCにおけるHTML側の条件判定、繰り返し処理についてまとめてみました。

Visualforceではrepeatタグやrenderedなどでできましたが、
特有のものは存在しないLWCでも簡単に条件判定や繰り返し処理ができますので、
それをみていきましょう。

条件によって表示を変えてみよう

今回はボタンを押すとフラグが変更するという簡単なロジックを作成しました。

export default class SampleComponent extends LightningElement {
    isChanged = false;

    flgChange(){
        if ( this.isChanged ) {
            this.isChanged = false;
        } else {
            this.isChanged = true;
        }
    }
}

<template>
    <lightning-card>
        <template if:false={isChanged}>
            <p>isChangedは{isChanged}</p>
        </template>
        <template if:true={isChanged}>
            <p>isChangedは{isChanged}</p>
        </template>
        <lightning-button onclick={flgChange} label="変更"></lightning-button>
    </lightning-card>
</template>

ものすごく簡単なコードですが、上記では
if:trueとif:falseを使って表示を変更しています。
変数が変更されるたびにレンダリングされて表示が切替る仕様になっています。

LWCではtemplateタグ以外でも、divタグ等でも条件判定を使うことができます。

<template>
    <lightning-card>
        <div if:false={isChanged}>
            <p>isChangedは{isChanged}</p>
        </div>
        <div if:true={isChanged}>
            <p>isChangedは{isChanged}</p>
        </div>
        <lightning-button onclick={flgChange} label="変更"></lightning-button>
    </lightning-card>
</template>

これで簡単に条件判定によって表示を切り替えることができます。

繰り返し表示をやってみよう

繰り返し処理を行うには、

• for:each
• for:item

の二つを使っていきます。
まずJavaScriptで配列を用意します。

    listItem = [ 
        { Id: 1,Name:"apple" },
        { Id: 2,Name:"orange" },
        { Id: 3,Name:"banana" },
        { Id: 4,Name:"strawberry" }
     ];

次にこの配列を先ほどの二つを使って
表示させていきます。

<template for:each={listItem} for:item="fruit">
        <li key={fruit.Id}>
            {fruit.Name}
        </li>
</template>

これで、下記のような表示になります。

for:eachで配列を指定し、個々の値をfor:itemで指定して、
そのマークアップ内で使用できる変数として使うことができます。

このようにすれば簡単に繰り返し表示ができますので是非使ってみてください。

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

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