コンポーネント間の通信
- 2021.05.03
概要 Lightning Web Componentで複数のコンポーネント間でパラメータを引き渡して連動して動作するための通信を行う仕組みについて整理してみました。Custom EventとLightning Message Serviceの方法を用いて、下記のように殆ど同じ動作をするサンプルを作ってみたので、それぞれでどのような実装になるかを記載します。 デモ ソースコードはこちらhttps://github.com/yhayashi30/lwc-pub-sub Custom Event デモ Lightning Message Service デモ Custom Event Custom Eventは標準のDOMイベントとなります。Custom Eventは、コンポーネント間が階層になっている場合に上位と通信する際に使用することができます。detailパラメータであらゆる型のデータを引き渡すことができます。 Custom EventのPublisher サンプルコード Custom Eventを作成するには、CustomEvent() コンストラクタを使用します。Custom Event() コンストラクタでは、第一引数のイベント名を表す文字列のみが必須のパラメータとなります。(サンプルでは”selected”を使用。onは付けなくて良いので注意。)Custom Eventをディスパッチするには、EventTarget.dispatchEvent() メソッドを引数に作成したCustom Eventをセットして実行します。Custom Event自体にパラメータを設定したい場合には、detailプロパティを用いてJSONで自由に定義して、受信側でeventリスナーを通じてアクセスすることができます。サンプルコードでは選択したContactのSalesforce IDを渡すようになっております。 Custom EventのSubscriber サンプルコード subscriberとなるコンポーネントでは、publisherのコンポーネント(c-custom-event-publisher)を子コンポーネントとして設置します。publisherで作成したCustom Eventのイベント名に”on”を付与して(今回のサンプルコードでは”onselected”となる)リスンします。 Lightning Message Service Lightning Message Serviceを使用することで、Lightningページ内のコンポーネント間でフラットに通信を行うことができます。同じ Lightning ページに組み込まれた Visualforce ページ、Aura コンポーネント、および Lightning Web コンポーネント間で通信を行うこともできます。Lightning Message Serviceを使用するには、各コンポーネントから呼び出すLightning メッセージチャネルが必要となります。Lightning メッセージチャネルを作成するには、LightningMessageChannel メタデータ型を使用します。LightningMessageChannel を作成するには、SFDX プロジェクトを用いて、force-app/main/default/messageChannels/ ディレクトリにXMLの定義を含める必要があります。LightningMessageChannelのファイル名は、messageChannelName.messageChannel-meta.xml 形式とします。これを作成して、対象の組織にデプロイします。 Lightning メッセージチャネルのサンプル SFDXプロジェクトの以下のディレクトリに作成します。/force-app/main/default/messageChannels Record_Selected.messageChannel-meta.xml LMSのPublisher サンプルコード PublisherのコンポーネントからメッセージチャネルでメッセージをPublishするには、範囲設定されたモジュール @salesforce/messageChannel をコンポーネントの JavaScript ファイルに含め、Lightning Message Service の publish() 関数をコールします。 Publisherのコンポーネントの JavaScript ファイルでは、メッセージチャネルと、メッセージチャネルを操作するために必要な Lightning Message Service 関数をインポートします。 上記でインポートした@wire(MessageContext) を使用して MessageContext オブジェクトを作成します。 handleContactClick() メソッドは、Publishするメッセージコンテンツを作成します。Lightning Message Service の publish() 関数は、メッセージコンテキスト、メッセージチャネルの名前、メッセージペイロードの 3 つのパラメータを取ります。メッセージペイロードには自由にパラメータを設定することができるので、今回のサンプルコードではContactのSalesforceIDを設定します。 LMSのSubscriber サンプルコード Subscriberのコンポーネントでも、メッセージチャネルでメッセージの登録および登録解除を行うには、メッセージチャネルを @salesforce/messageChannel 範囲設定されたモジュールから Lightning Web コンポーネントにインポートします。 Lightning Message Service の subscribe() 関数と unsubscribe() 関数をJavaScriptファイルの中で呼び出すことで制御します。@wire(MessageContext) を使用してコンテキストオブジェクトを作成します。 connectedCallback()でコンポーネントの初期化処理で、Lightning Message Service の subscribe() メソッドをコールして subscription に割り当てます。subscribe() メソッドは、メッセージコンテキスト、メッセージチャネルの名前、公開されたメッセージを処理するリスナーメソッドの 3 つの必須パラメータを取ります。 disconnectedCallback()でコンポーネントの削除処理の中で、Lightning Message Service からのメッセージの受信を停止するためにお、登録参照を渡して unsubscribe() をコールします。 Custom Event vs LMSの比較 参考 Communicate with Eventshttps://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events Message Servicehttps://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation Lightning Message Service を使用した DOM 間の通信https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.use_message_channel ライフサイクルフックhttps://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.reference_lifecycle_hooks