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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連トピック

• 子コンポーネントのプロパティの設定
• フィールド、プロパティ、属性
• リアクティビティ