条件に応じた DOM 要素の表示

条件に応じて HTML を表示するには、条件コンテンツを囲むネストされた <template> タグに lwc:if|elseif={property} および lwc:else ディレクティブを追加します。

ディレクティブは、特別な HTML 属性です。Lightning Web Components のプログラミングモデルには、マークアップを使用して DOM を操作できるカスタムディレクティブがいくつか用意されています。

Tip

lwc:if|elseif ディレクティブは、テンプレートに {property} をバインドし、そのデータが真値 (truthy) と偽値 (falsy) のいずれであるかに応じて DOM 要素を削除および挿入します。

従来の if:true および if:false ディレクティブは今後廃止と削除が予定されているため、現在は推奨されません。コードが今後の変更に対応できるように、lwc:if|elseif|else 条件ディレクティブを代わりに使用することをお勧めします。

Note

次の例には、property1 と property2 の 2 つのプロパティがあります。

1<template>
2  <template lwc:if={property1}> Statement1 </template>
3  <template lwc:elseif={property2}> Statement2 </template>
4  <template lwc:else> Statement3 </template>
5</template>

3 つのステートメントの 1 つだけが表示されます。

Statement1 は property1 が true の場合に表示されます。
Statement2 は property1 が false で、property2 が true の場合に表示されます。
Statement3 は property1 と property2 が false の場合に表示されます。

この例では 3 つのディレクティブをすべて使用していますが、lwc:elseif と lwc:else は省略可能です。

別の例を見てみましょう。このテンプレートには、[Show details (詳細を表示)] というラベルが付いたチェックボックスがあります。このチェックボックスをオンまたはオフにすると、handleChange 関数が areDetailsVisible プロパティの値を設定します。areDetailsVisible プロパティが true の場合、lwc:if ディレクティブは、ネストされたテンプレートを表示し、これにより [These are the details! (詳細は次のとおりです。)] が示されます。

1<!-- helloConditionalRendering.html -->
2<template>
3  <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
4    <div class="slds-m-around_medium">
5      <lightning-input
6        type="checkbox"
7        label="Show details"
8        onchange={handleChange}
9      ></lightning-input>
10      <template lwc:if={areDetailsVisible}>
11        <div class="slds-m-vertical_medium">These are the details!</div>
12      </template>
13    </div>
14  </lightning-card>
15</template>

JavaScript は、DOM を操作するのではなく、プロパティの値を変更するだけです。

1// helloConditionalRendering.js
2import { LightningElement } from "lwc";
3
4export default class HelloConditionalRendering extends LightningElement {
5  areDetailsVisible = false;
6
7  handleChange(event) {
8    this.areDetailsVisible = event.target.checked;
9  }
10}

[Show details (詳細を表示)] というラベルが付いているチェックボックス。

[Show details (詳細を表示)] チェックボックスがオンになっており、下に詳細なテキストが示されています。

マークアップで Boolean のプロパティ値を切り替えるには、デフォルト値を false に設定します。「Boolean のプロパティ」を参照してください。

Note

このサンプルコードは、github.com/trailheadapps/lwc-recipes リポジトリからの helloConditionalRendering コンポーネントです。

Tip

関連トピック

The Japanese Summer '24 guide is now live

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