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

コンポーネントのテンプレートのプロパティをコンポーネントの 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 リポジトリにある hellohelloBinding、および helloExpressions コンポーネントを開きます。webcomponents.dev/create/lwc にコードをコピーすることもできます。

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

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

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

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

イベントの処理については、別のトピックで詳しく説明します。JavaScript クラスでは、handleChangeevent オブジェクトが渡されることに注目してください。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 は、名と姓を組み合わせて大文字にします。

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

関連トピック