複数のテンプレートの表示

複数のデザインを持つコンポーネントを表示することもできますが、1 つのファイル内に HTML を混在させたくはありません。たとえば、あるバージョンのコンポーネントはプレーンで、別のバージョンでは画像と追加のテキストが表示されるとします。この場合は、複数の HTML テンプレートをインポートし、条件に応じて各バージョンを表示するビジネスロジックを作成します。このパターンは、一部の JavaScript フレームワークで使用されるコード分割に似ています。

コンポーネントで複数のテンプレートを表示できますが、代わりに lwc:if|elseif|else ディレクティブを使用して、ネストされたテンプレートを条件に応じて表示することをお勧めします。

Note

コンポーネントバンドル内に複数の HTML ファイルを作成します。これらのファイルをすべてインポートし、コンポーネントの状態に応じて適切なテンプレートが返されるようにするための条件を render() メソッドに追加します。render() メソッドから返される値は、HTML ファイルからインポートされたデフォルトのエクスポートであるテンプレート参照でなければなりません。

この例の場合、テンプレート参照は、templateOne と templateTwo です。

1// miscMultipleTemplates.js
2
3import { LightningElement } from "lwc";
4import templateOne from "./templateOne.html";
5import templateTwo from "./templateTwo.html";
6
7export default class MiscMultipleTemplates extends LightningElement {
8  showTemplateOne = true;
9
10  render() {
11    return this.showTemplateOne ? templateOne : templateTwo;
12  }
13
14  switchTemplate() {
15    this.showTemplateOne = !this.showTemplateOne;
16  }
17}

1<!-- templateOne.html -->
2<template>
3  <lightning-card title="Template One">
4    <div>This is template one.</div>
5    <p class="margin-vertical-small">
6      <lightning-button label="Switch Templates" onclick={switchTemplate}> </lightning-button>
7    </p>
8  </lightning-card>
9</template>

1<!-- templateTwo.html -->
2<template>
3  <lightning-card title="Template Two">
4    <div>This is template two.</div>
5    <p class="margin-vertical-small">
6      <lightning-button label="Switch Templates" onclick={switchTemplate}> </lightning-button>
7    </p>
8  </lightning-card>
9</template>

追加テンプレートから CSS を参照するには、CSS のファイル名が外部テンプレートのファイル名と一致している必要があります。たとえば、templateTwo.html は、templateTwo.css からのみ CSS を参照できます。miscMultipleTemplates.css や templateOne.css から CSS を参照することはできません。

1MiscMultipleTemplates
2   ├──miscMultipleTemplates.js
3   ├──miscMultipleTemplates.js-meta.xml
4   ├──templateOne.html
5   ├──templateOne.css
6   ├──templateTwo.html
7   └──templateTwo.css

miscMultipleTemplates.html という同じ名前のテンプレートが含まれている場合、デフォルトの render() メソッドは、前の例で説明した上書きが含まれていない限り、そのテンプレートを返します。

lwc-recipes リポジトリの miscMultipleTemplates コンポーネントをチェックアウトしてください。

Tip

関連トピック

The Japanese Summer '24 guide is now live

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