テンプレートでのデータバインド

コンポーネントのテンプレートのプロパティをコンポーネントの JavaScript クラスのプロパティにバインドします。

テンプレートで、スペースを含まずにプロパティを大括弧で囲みます ({property})。プロパティの値を計算するには、JavaScript クラスで JavaScript getter を使用します (get property(){})。テンプレートの property には、JavaScript 識別子 (例: person) またはオブジェクトからプロパティにアクセスするためのドット表記 (例: person.firstName) を指定できます。LWC では、person[2].name['John'] のような式は使用できません。

テンプレートで使用されるプロパティには、for:each ディレクティブまたは iterator ディレクティブで使用される場合を除き、プリミティブ値が含まれている必要があります。

例: コンポーネントテンプレートのプロパティと JavaScript のプロパティのバインド

コードエディタで確認するには、github.com/trailheadapps/lwc-recipes リポジトリにある hello、helloBinding、および helloExpressions コンポーネントを開きます。webcomponents.dev/create/lwc にコードをコピーすることもできます。

データバインドの最も簡単な例を示します。テンプレートの greeting プロパティは、JavaScript クラスの greeting プロパティにバインドされています。

1<!-- hello.html -->
2<template> Hello, {greeting}! </template>

1// hello.js
2import { LightningElement } from "lwc";
3
4export default class Hello extends LightningElement {
5  greeting = "World";
6}

{ } で囲んだプロパティは、有効な JavaScript 識別子またはメンバー式である必要があります。たとえば、{data} と {data.name} はどちらも有効です。プロパティの前後にスペースを入れないでください。たとえば、{ data } は有効な HTML 記述ではありません。

このコンポーネントは、ハードコードされた文字列ではなく、挨拶先の名前を尋ねる入力項目を使用しています。

lightning-input フィールドは、onchange 属性を使用して値の変化をリスンします。値が変化すると、JavaScript ファイルの handleChange 関数が実行されます。handleChange 関数をテンプレートにバインドするには、同じ構文 ({handleChange}) を使用します。

1<!-- helloBinding.html -->
2<template>
3  <p>Hello, {greeting}!</p>
4  <lightning-input label="Name" value={greeting} onchange={handleChange}></lightning-input>
5</template>

イベントの処理については、別のトピックで詳しく説明します。JavaScript クラスでは、handleChange に event オブジェクトが渡されることに注目してください。event オブジェクトには変更イベントの情報が含まれます。コンポーネントは、event オブジェクトを使用して、ユーザが入力項目に入力した値を取得します。

1// helloBinding.js
2import { LightningElement } from "lwc";
3
4export default class HelloBinding extends LightningElement {
5  greeting = "World";
6
7  handleChange(event) {
8    this.greeting = event.target.value;
9  }
10}

このコードの大部分は、標準の HTML および JavaScript です。

テンプレートで使用されている式は、コンポーネントが再表示されるときに再評価されます。

Note

式ではなく getter の使用

プロパティの値を計算するには、JavaScript getter を使用します。たとえば、名前をすべて大文字に変換するには、テンプレートで式を使用するのではなく、JavaScript クラスで getter 関数を使用します。

getter は JavaScript 関数であるため、式よりはるかに強力です。getter では、単体テストも行えるため、バグを減らして作業を楽しくしてくれます。

JavaScript クラスで値を計算する getter を定義します。

1get propertyName() { ... }

テンプレートから getter にアクセスします。

1{
2  propertyName;
3}

この例では、ユーザが名と姓を入力しています。JavaScript getter は新しい値の uppercasedFullName を計算して、テンプレートが DEANNA LI と表示しています。

テンプレートの uppercasedFullName プロパティは、JavaScript クラスの get uppercasedFullName() getter にバインドされています。

1<!-- helloExpressions.html -->
2<template>
3  <div class="slds-m-around_medium">
4    <lightning-input
5      name="firstName"
6      label="First Name"
7      onchange={handleChange}
8    ></lightning-input>
9    <lightning-input name="lastName" label="Last Name" onchange={handleChange}></lightning-input>
10    <p class="slds-m-top_medium">Uppercased Full Name: {uppercasedFullName}</p>
11  </div>
12</template>

handleChange 関数は、firstName プロパティと lastName プロパティをユーザが入力した値に設定します。uppercasedFullName() getter は、名と姓を組み合わせて大文字にします。

1// helloExpressions.js
2import { LightningElement } from "lwc";
3
4export default class HelloExpressions extends LightningElement {
5  firstName = "";
6  lastName = "";
7
8  handleChange(event) {
9    const field = event.target.name;
10    if (field === "firstName") {
11      this.firstName = event.target.value;
12    } else if (field === "lastName") {
13      this.lastName = event.target.value;
14    }
15  }
16
17  get uppercasedFullName() {
18    return `${this.firstName} ${this.lastName}`.toUpperCase();
19  }
20}

すべてのフィールドはリアクティブです。フィールドがテンプレートで使用されているか、またはテンプレートで使用されているプロパティの getter で間接的に使用されている場合、コンポーネントはプロパティの値が変化した時点で再表示されます。この例では、firstName と lastName が変化すると、これらは uppercasedFullName getter で使用されているため、テンプレートが再表示され、テンプレートでそのプロパティが使用されます。「フィールド、オブジェクト、配列のリアクティビティ」を参照してください。

Tip

関連トピック

The Japanese Summer '24 guide is now live

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