top of page

【LWC】コンポーネント間のデータの受け渡し方法　その②別コンポーネント間の場合



コンポーネント間のデータ通信（データ受け渡し）方法は主に以下の２つがあります。


①同一コンポーネント間の通信

②別コンポーネント間の通信


＜LWCでのコンポーネント間のデータ通信方法＞

  1. 同一コンポーネント間のデータ通信

  2. 別コンポーネント間のデータ通信


1．については、別記事にて記載しておりますので、こちらを参照してください。

今回は「別コンポーネント間の通信」にて記載いたします。


１．別コンポーネントのデータ通信について

別コンポーネント間の通信は、メッセージチャンネルを介して実行されます。

実際の構築に基づいて作成していきます。

動作内容として、メッセージチャンネルに公開コンポーネントからデータを投げると、受信設定を行っているコンポーネントにて受信することができます。

今回は、以下のソースを作成していきます

  • メッセージチャンネル：AccountChannel

  • 公開CMP（LWC)：messageServiceCmpA

  • 購読CMP（LWC)：messageServiceCmpB

では、LWC以外の前準備として、必要なメッセージチャンネルの作り方から説明していきます。

前提条件として、開発ツールにはVisual Stodio Code（以下VSC）を利用し、Developer環境に接続しています。

 

＜今回作成するコンポーネントについて＞

左側の取引先一覧を選択すると、右側にて取引先の明細を表示します

左側：公開CMP（LWC)：messageServiceCmpA

右側：購読CMP（LWC)：messageServiceCmpB

↓取引先選択時の表示（左CMPで選択された取引先明細を右CMPにて表示しています）


①メッセージチャンネルの作成

メッセージチャンネルは、設置用のフォルダの作成からとなります。下図参照

  • VSCの左側のフォルダ「force-app/main/default」にて右クリック

  • 表示されたメニューから、「新しいフォルダ」をクリック

  • 「messageChannels」と入力してフォルダを作成

新規のメッセージチャンネルの設定ファイルを作成します。

  • 先ほど作成した「messageChannels」フォルダ上にて、右クリック

  • 表示されたメニューから、「新しいファイル」をクリック

  • メッセージチャンネル用のファイルを作成します。今回は、チェンネル名を便宜上追加して「AccountChannel.messageChannel-meta.xml」とします。

※「masterLabel」タグにてチェンネル名をセットします。

「AccountChannel.messageChannel-meta.xml」のソース内容です。

②各コンポーネントを作成

公開CMP（LWC）：messageServiceCmpA

・HTML

・Javascript

・Meta

購読CMP（LWC）：messageServiceCmpB

・HTML

・Javascript

・Meta

Apexクラス（取引先の取得）


ソースについて

＜設定部分 Javascript＞

  • メッセージの送受信には「wire」アノテーションが追加が必要です。

    • import { LightningElement, wire } from 'lwc';

  • 「lightning/messageService」のインポートが必要です。送信、受信で、関数名が異なる為、注意してください。

    • 送信：import { publish, MessageContext } from 'lightning/messageService';

    • 受信：import { subscribe, MessageContext } from 'lightning/messageService';

  • メッセージチャンネルは、事前準備で用意した値で設定してください。（今回は「AccountChannel」となります）”__c”を追記して指定します。

    • import AccMsg from '@salesforce/messageChannel/AccountChannel__c';

＜送受信部分 Javascript＞

  • 受信側の動作としては、受け取った取引先IDを、変数にセット。「lightning-record-view-form」を利用して、内容を表示しています。

  • 送信のペイロードは、オブジェクト形式で作成します。

基本的に、ページ全体をLWCにて構築する際には、同一コンポーネントで作成した方が良いと思いますが、レコード表示処理で、必要な機能が複数ある際、別コンポーネントにて作成すると、機能の取捨選択が配置のみで可能となります。

同一コンポーネントのデータ送信と異なり、概念が分かりづらい所もありますが、そういう設定をしないと動かないと割り切って使ってもらった方が良いと思います。



댓글

bottom of page