LWCの開発者ガイドのフィールド、プロパティ、属性のところです。
フィールド、プロパティ、属性 | Lightning Web Components 開発者ガイド | Salesforce Developers
Public のプロパティ
他のページでもなんどか出てきた、@apiを宣言するとパブリックプロパティになるという話。一応、@apiを宣言するときは『import { LightningElement, api } from "lwc";』という感じで「api」を宣言しておく必要がある。
フィールド、オブジェクト、配列のリアクティビティ
getterが使用されている場合は値変更時にコンポーネントの再描画が行われて新しい値を表示できると解説がありました。
こういうのです。
テキストボックスに入力した情報が大文字変換されて画面に表示されました。
オブジェクトのプロパティの監視
@trackを宣言することでその変数の値が変更されたときに再描画が実行されるとのことです。
こういう感じ。
新しいプロパティを使用したオブジェクトの再表示
@trackのアノテーションが付与されていても、過度な再表示が発生しないような仕組みとなっていりょうです。
プロパティ名と属性
プロパティ名とHTML属性名に関するルール雰囲気でわかる内容。
Web API のプロパティ
こういうのが使えますという話。
getter と setter
LWCのgetterとsetterの書き方。サンプルコードのように書けばいいだけ。
Boolean のプロパティ
一般的な話。Importantの「マークアップで false と指定する唯一の方法は、Boolean 属性を省略することです。マークアップで show="false" に設定すると、true に評価されます。」はちょっと参考になった。(LWC関係なくfalseってセットしてもtrue扱いになるなって思ってた時期あった。)
動的な値指定はgetterをつかいましょうとのこと。
HTML 属性への JavaScript プロパティの反映
setterで、『setAttribute()』をコールすることでHTML属性に値変更を反映できるとのこと。
例えばtabindexの変更とかもできる。
その他の使用例。あとHTML属性をなくしたい場合は『removeAttribute()』を使用する。
getter での属性の連動関係の管理
順序保証ない仕様への対応として getterをつかいましょうって感じの話。
「コンポーネントは、@api のアノテーションが付けられたプロパティの値を変更してはいけません。」っていうのは重要そう。
まとめ
@api、@track、getter、setter、setAttribute()、removeAttribute()、あたりの内容について確認できました。
