条件分岐

Litは通常のJavaScript式を活用するため、条件演算子、関数呼び出し、`if`文や`switch`文などの標準的なJavaScriptの制御フロー構文を使用して、条件付きコンテンツをレンダリングできます。

JavaScriptの条件分岐では、ネストされたテンプレート式を組み合わせることもでき、テンプレートの結果を変数に格納して他の場所で使うこともできます。

条件演算子`?`を使用した三項演算子は、インライン条件分岐を追加する優れた方法です。

render() {
  return this.userName
    ? html`Welcome ${this.userName}`
    : html`Please log in <button>Login</button>`;
}

テンプレート内で使用する値を計算するために、テンプレートの外部でif文を使用して条件ロジックを表現できます。

render() {
  let message;
  if (this.userName) {
    message = html`Welcome ${this.userName}`;
  } else {
    message = html`Please log in <button>Login</button>`;
  }
  return html`<p class="message">${message}</p>`;
}

あるいは、ロジックを別の関数に分割して、テンプレートを簡略化することもできます。

getUserMessage() {
  if (this.userName) {
    return html`Welcome ${this.userName}`;
  } else {
    return html`Please log in <button>Login</button>`;
  }
}
render() {
  return html`<p>${this.getUserMessage()}</p>`;
}

ほとんどの場合、条件付きテンプレートにはJavaScriptの条件分岐で十分です。ただし、大規模で複雑なテンプレートを切り替える場合は、切り替えごとにDOMを再作成するコストを削減したい場合があります。

この場合、`cache` _ディレクティブ_を使用できます。cacheディレクティブは、現在レンダリングされていないテンプレートのDOMをキャッシュします。

render() {
  return html`${cache(this.userName ?
    html`Welcome ${this.userName}`:
    html`Please log in <button>Login</button>`)
  }`;
}

詳しくは、cacheディレクティブをご覧ください。

条件演算子のある分岐で何もレンダリングしたくない場合があります。これは、子式によく必要で、属性式にも必要なことがあります。

子式の場合、値`undefined`、`null`、空文字列（`''`）、およびLitのnothingセンチネル値はすべてノードをレンダリングしません。詳しくは、子コンテンツの削除をご覧ください。

この例では、値が存在する場合はレンダリングし、そうでない場合は何もレンダリングしません。

render() {
  return html`<user-name>${this.userName ?? nothing}</user-name>`;
}

属性式の場合、Litのnothingセンチネル値は属性を削除します。詳しくは、属性の削除をご覧ください。

この例では、`aria-label`属性を条件付きでレンダリングします。

html`<button aria-label="${this.ariaLabel || nothing}"></button>`

このページを編集