Part 3です。Lightning Web Components 開発者ガイドの「Lightning Web コンポーネントの作成」の「HTML テンプレート」のところです。
HTML テンプレート | Lightning Web Components 開発者ガイド | Salesforce Developers
HTML テンプレートの使用
最初に仕組みの話から。templateタグはc-my-componentというように裏側の処理で変換されることで動作するようになっています。
for:each、iterator:iteratorName、lwc:if、lwc:elseといったLWC用の特別な HTML 属性はディレクティブと呼ぶ。
データバインド
JS側で変数を宣言して、HTML側で『{変数名}』と宣言するとデータバインドできる。(変数の値をHTML側で使える)
ボタンクリックなどのイベントの処理で変数に値をセットするときは「this.変数名」という感じ。
式ではなく getter の使用による値の取得もできる。get uppercasedFullNameのところ。
条件に応じたDOM 要素の表示
「lwc:if」「lwc:elseif」「lwc:else」を使って、表示/非表示を制御できる。
チェックボックスをチェック→onchangeイベント実行→変数の値を更新→表示/非表示を切り替えという場合は次のようになるとのこと。
リストの表示
for:each ディレクティブまたは iterator ディレクティブをつかってリスト表示できます。2種類ありますがそれぞれ役割があるようです。
for:each
for:each ディレクティブを使用する場合、for:item="currentItem" という形で現在の項目にアクセスできます。
iterator
リスト内の最初または最後の項目に特別な動作を適用するときなどはこちらを使用するとのこと。
仕様はこういう感じ。
複数のテンプレートの表示
複雑なコンポーネント開発するときにこういうこともできますという感じだと思います。
なるべく「lwc:if」をつかった切り替えをする形にした方がいいとのことです。
まとめ
HTMLテンプレートのところにはデータバインド、表示 / 非表示の切り替え、リスト表示の紹介となっていました。このあたりがLWC開発のHTML側の基本処理となる感じです。
