関連しないコンポーネント間で通信する
DOM のサブツリー間 (場合によっては、同一組織にログインしている異なるブラウザーウィンドウ間) で通信するには、Lightning Message Service (LMS) を使用します。LMS は、Lightning Web コンポーネント、Aura コンポーネント、Visualforce ページ間の通信を促進する公開、登録サービスです。
コンポーネントと共通の親の両方を制御していない場合、関連していないコンポーネント間の通信には LMS を使用します。LMS は強力で効果的な使いやすいツールですが、必要でないときには使用しないでください。DOM イベントを起動する方がはるかに効率的です。制御できない親を持つコンポーネント間で通信する必要がある場合 (アプリケーションビルダーの 2 つのスロット間など)、Lightning Message Service が最適です。
3 つ目のビジネスユニットが、この数値操作プロジェクトに加わりたいと思っています。単独のコンポーネントに以前の数と現在の数をまとめて、必要なときにいつでも表示できるようにする必要があります。まず、メッセージチャネルを作成して、コンポーネントで使用できるようにしましょう。
Lightning メッセージチャネルを作成する
- Visual Studio Code で、default フォルダーに
messageChannels
という名前のフォルダーを作成します。
-
messageChannels フォルダーに、
Count_Updated.messageChannel-meta.xml
という名前のファイルを作成します。
-
Count_Updated.messageChannel-meta.xml で、次のコードを貼り付けます。
- ファイルを保存してリリースします。
パブリッシャーコンポーネントを作成する
-
remoteControl
という名前で Lightning Web コンポーネントを作成します。
-
remoteControl.js の内容を次のコードで置き換えます。Lightning Message Service から
publish
とMessageContext
をインポートします。作成したチャネル (Count_Updated__c
) もインポートします。データペイロードがpublish
関数と一緒に送信されます。
- ファイルを保存します。
-
remoteControl.html を開き、
template
タグの間に次のコードを追加します。controls コンポーネントを再使用していることに注目してください。
- ファイルを保存します。
- remoteControl コンポーネントが Lightning アプリケーションページで使用できるようにするために、remoteControl.js-meta.xml を更新します。
- ファイルを保存します。
サブスクライバーコンポーネントを作成する
-
counts
という名前で Lightning Web コンポーネントを作成します。
-
counts.js の内容を次のコードで置き換えます。
@wire(MessageContext)
への参照によって、コンポーネントの破棄ライフサイクル中に unsubscribe
が実行されます。
- ファイルを保存します。
-
counts.html を開いて、
template
タグの間に次のコードを追加します。 - ファイルを保存します。
- counts コンポーネントが Lightning アプリケーションページで使用できるようにするために、counts.js-meta.xml を更新します。
- ファイルを保存します。
新しいコンポーネントを Event Comms アプリケーションに追加する
-
lwc フォルダーをリリースして、Event Comms アプリケーションページを更新します。
- 編集する [Event Comms (イベント通信)] ページを開きます。
-
[remoteControl] コンポーネントをページの右の領域にドラッグします。
-
[counts] コンポーネントを右の領域の remoteControl コンポーネントのすぐ下にドラッグします。
-
[Save (保存)] をクリックして、Lightning アプリケーションビルダーを終了します。
通信を確認する
- Remote Control (リモートコントロール) のボタンをクリックして、counts コンポーネントの数を変更します。
Lightning Message Service を使用して Aura コンポーネントと Visualforce ページとも通信できます。異なる種別のコンポーネントの同期を維持するのに最も簡潔な方法です。
Lightning Web コンポーネント間で通信する方法について実務的な知識を得ることができました。子-親、親-子、関連していないコンポーネント間の各シナリオに取り組みました。必ず以下のリソースを確認して、Lightning Web コンポーネントとの通信について知識を深めてください。
リソース
- Lightning Web Components Dev Guide (Lightning Web コンポーネント開発者ガイド): Communicate Across the DOM (DOM 全体での通信)
- Lightning Web Components Dev Guide (Lightning Web コンポーネント開発者ガイド): Configure Event Propagation (イベント伝達の設定)
- Lightning Web Components Dev Guide (Lightning Web コンポーネント開発者ガイド): Events Best Practices (イベントのベストプラクティス)
- Lightning Web Components Dev Guide (Lightning Web コンポーネント開発者ガイド): Lightning Message Service
- Lightning Web Components Component Reference (Lightning Web コンポーネントのコンポーネントリファレンス): Message Service
- GitHub: LWC レシピ: lmsPublisherWebComponent
- GitHub: LWC レシピ: lmsSubscriberWebComponent
- Salesforce 開発者ブログ: Lightning Message Service [Developer Preview] (Lightning Message Service (開発者プレビュー))
- Salesforce 開発者ブログ: Step Up Your LWC Skills (LWC スキルのステップアップ)
- Salesforce 開発者ブログ: Inter-Component Communication Patterns for Lightning Web Components (Lightning Web コンポーネントのコンポーネント間の通信パターン)