Lightning Web Componentsの「構成」に関する部分です。「コンポーネントは別のコンポーネントの本体に追加できます。構成によって、シンプルなビルディングブロックコンポーネントから複雑なコンポーネントを構築できます。」と最初のページに記載がありました。LWC開発するにあたり重要度高めの内容かと思います。
構成 | Lightning Web Components 開発者ガイド | Salesforce Developers
コンポーネントの構成
コンポーネントの基本の書き方。ここは特別な話は特にない感じ。
用語の方が覚えておくと良いのかも。オーナー、コンテナ、親と子という名称で分けられているとのこと。
子コンポーネントのプロパティの設定
子となるコンポーネントを開発するときの基本情報。「@api」デコレータを宣言することでその変数を公開プロパティにできる (親から子に値を渡したりできる) 感じ。LWCでは、キャメルケースで命名するとHTML側では単語間をハイフンで区切れる。「itemName → item-name」変数名の宣言はこれを意識すること。
データフロー
「コードが複雑になり、思わぬ副作用が発生することを回避するには、データが親から子に一方向に流れるようにする必要があります。」と最初に記載されていました。子→親のデータの流れはなるべく避けるべきとのことです。
コンポーネントに渡されるオブジェクトは参照のみ
オブジェクトや配列でデータをひと纏めされたものを渡しでも参照のみとなるのとこと。
コンポーネントに渡される非プリミティブ値 (オブジェクトや配列など) は参照のみです。コンポーネントは、オブジェクトまたは配列のコンテンツを変更できません。コンポーネントがコンテンツを変更しようとすると、ブラウザコンソールにエラーが表示されます。データを変更するには、変更するオブジェクトの浅いコピーを作成します。
公開プロパティのプリミティブ値の使用
参照のみじゃない形で値を渡せるのはプリミティブ値となるので、基本はこの形式で値を渡す。このあたりは実際にコード書いて覚える感じになると思います。
子コンポーネントでのメソッドのコール
LWC開発の実践的な話。子コンポーネントのメソッドを実行する方法についての話。これはサンプルコードが用意されているので実際に動作を確認してみました。
子コンポーネント
親コンポーネント
アプリケーション
リリース結果。PlayボタンとPauseボタンが用意されていてボタンクリックで動画の再生と一時停止を実行できます。これが子コンポーネント側で処理されています。
補足
サンプルコード内の動画ファイルですが外部のファイルを参照する形となっています。
なので、そのままだとセキュリティエラーとなります。これを回避するのは確かCSP信頼済みサイトの設定で許可します。(全部にチェックがついていますが、本来は必要なメディア種別のみ許可する感じ。)
Developer Edtion組織の個人検証用の場合は、より厳格なコンテンツセキュリティポリシーを有効化をオフにする方法もあります。
このあたりの話はこちらのページにまとめまれています。
設定はすぐに反映されないかも。自分が試したときはCSP設定したあともエラー解決せず→厳格な〜を無効にしてエラー解決しました。が、試しに設定をオフにしてもエラーが発生しなかったです。実際には外部のファイル読み込みはできるかぎり避けるべきで静的リソースにアップロードしてから参照するようにするべきなので、特別理由がなければそうした方がいいです。
子コンポーネントのメソッド呼び出しは、@apiで公開プロパティにするのを忘れない。(@apiはVisualforceの@RemoteAction的な感じと思えばわかりやすかなと思います)。それと、querySelectorで情報を取得するという感じになるようです。
戻り値はreturnで取得。ここでも画面上の値の取得でquerySelectorがでてきます。querySelectorであれこれ操作するのが少し慣れるの大変そう。
子コンポーネントのスプレッドプロパティ
「lwc:spread」ディレクトリを使うことでオブジェクトの一連のプロパティを子コンポーネントに渡せるようです。
これもサンプルコードを動かして確認しました。
子コンポーネント
親コンポーネント
動作確認
親コンポーネント側で定義されたオブジェクト変数「childProps」の値が子コンポーネント側に渡されてHTMLの値として適用できたことを確認できました。こういう値の渡し方は「lwc:spread」を使用するというのを覚えておけば良いみたいです。
続きのサンプルで、HTMLの属性を渡すこともできるようです。CSSの指定で使ったりするclassNameやIdの値渡しです。こうときも「lwc:spread」を使用します。
スロットにマークアップを渡す
親コンポーネントがコンポーネントにマークアップを渡すことができる仕組みをスロットと呼ぶみたいです。とりあえずサンプルコードでイメージ確認。
子コンポーネント
親コンポーネント
動作確認
子コンポーネント側で「Slot」タグを宣言すると、親コンポーネントで子コンポーネント呼び出し時のタグの中にHTMLを宣言するとそれが子コンポーネント側に渡されて使用できるという感じかと思います。
別の方法で名前付きスロットという考え方もあります。
子コンポーネント
親コンポーネント
動作確認
First Name , Last Name, Descriptionに指定の値を渡すことができました。子コンポーネントにマークアップを渡すときにはスロットの仕組みを使えばいいという内容でした。
その他のスロットの仕組み
スロットの話の残りは以下のようなものもありましたという感じで終わり。slotchangeの仕組みはちょっと重要度高め。
スロット経由で渡される要素へのアクセス
条件に応じたスロットの表示
slotchange でのコードの実行
コンポーネントが所有する要素へのアクセス
querySelector()
Domで要素を選択するときにはquerySelectorを使用する。querySelector で ID セレクタは使用するのはNG。DOM 要素のクエリでグローバルプロパティの window や document は使用するのもNG。JavascriptでDomを操作するのもNG。とのこと。
ref
ref は、セレクタなしで DOM 要素を見つけ、指定されたテンプレートに含まれる要素のみを照会できる仕組み。IDの代わりになる仕組みかと思います。
「querySelector」と「ref」で要素へのアクセスを行うとのことです。
Shadow DOM
Shadow DOM は、Web コンポーネントの内部ドキュメントオブジェクトモデル (DOM) 構造をカプセル化する標準です。特別な宣言が必要なわけでなく自動で適用される仕組みかなと思います。(たぶん)
Youtube動画でも詳細についての解説があるようです。
Light DOM
Light DOMは、特別な理由があるときにShadow DOM の制限を回避できる仕組みとのことです。
使い方は「lwc:render-mode="light"」を宣言すればいいようです。
イベントとスロットとかその他細かい仕様がまだありましたが、今回は省略。Shadow DOMでコンポーネントを守っていて、何か理由があるときにはLight DOMで制限を緩和するとかそんなイメージかと思います。「Lightning Web Components では現在、すべてのコンポーネントが Shadow DOM に強制されます。」ということで基本は特に意識する必要はなさそうです。
混合 Shadow モード (開発者プレビュー) でのコンポーネントの作成
こういう仕様があるって感じ。
スロットとデータを使用したコンポーネントの構成方法の比較
こういう仕様があるって感じ。
コンポーネントの連動関係の表示
少し重要な情報。設定→Lightning コンポーネント→対象のコンポーネントを選択して詳細ページへアクセス。こうすると関連するファイルの一覧が表示できるみたいです。使えるといえば使えるかも。
まとめ
値の受け渡しとか要素の取得はこのあたりで確認できました。
