LWCのif/elseを使った動的レンダリング方法

Lightning Web Componentsにおけるif/else条件分岐の基本と実践例

Lightning Web Components (LWC) では、JavaScriptコード内でif/else条件分岐を使用してロジックを制御するほか、テンプレート内で や を使用して、条件に応じたコンポーネントの表示を切り替えることができます。

以下に、if/else条件分岐の両方の使い方について、具体的なコード例を紹介します。

---

1. JavaScriptでのif/else条件分岐

JavaScriptコード内で条件分岐を行い、特定のプロパティの値を設定する例です。

import { LightningElement, track } from 'lwc';

export default class ConditionalExample extends LightningElement {
    @track isActive = false;

    connectedCallback() {
        // ここで条件をチェックし、isActiveを更新する
        if (Math.random() >= 0.5) {
            this.isActive = true;
        } else {
            this.isActive = false;
        }
        console.log('isActive:', this.isActive);
    }
}

このコードでは、connectedCallback() でランダムな値に基づいて isActive を設定しています。if/else文を利用して条件に応じた処理を実行しています。

---

2. テンプレートでの条件分岐（if/else構文の実現）

LWCのテンプレートでは、明示的なif/else文は存在しませんが、 と を併用することで同様の動作を実現できます。

<template>
    <!-- isActiveがtrueの場合の表示 -->
    <template if:true={isActive}>
        <p>コンポーネントはアクティブです！</p>
    </template>
    <!-- isActiveがfalseの場合の表示 -->
    <template if:false={isActive}>
        <p>コンポーネントはアクティブではありません。</p>
    </template>
</template>

このテンプレートは、JavaScriptで設定された isActive の値に応じて、適切なメッセージを表示します。

---

まとめ

• JavaScriptでのif/else: ロジックを制御するために使用し、変数の値を設定する際に利用します。
• テンプレート内の条件分岐: と を使って、条件に基づくUIの表示を実現します。

これらの手法を組み合わせることで、LWCで柔軟かつ動的なコンポーネントの表示制御が可能になります。これにより、ユーザーにとってより直感的なインターフェースを提供できるでしょう。