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

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

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

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

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

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

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! (詳細は次のとおりです。)] が示されます。

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

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

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

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

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

関連トピック