Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

関連しないコンポーネント間で通信する

メモ

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

DOM のサブツリー間 (場合によっては、同一組織にログインしている異なるブラウザーウィンドウ間) で通信するには、Lightning Message Service (LMS) を使用します。LMS は、Lightning Web コンポーネント、Aura コンポーネント、Visualforce ページ間の通信を促進する公開、登録サービスです。  

コンポーネントと共通の親の両方を制御していない場合、関連していないコンポーネント間の通信には LMS を使用します。LMS は強力で効果的な使いやすいツールですが、必要でないときには使用しないでください。DOM イベントを起動する方がはるかに効率的です。制御できない親を持つコンポーネント間で通信する必要がある場合 (アプリケーションビルダーの 2 つのスロット間など)、Lightning Message Service が最適です。

複数の要素 (親要素内に 1 つの要素が配置されている場合など) が含まれるドキュメントオブジェクトが表示されている LMS 通信の図。要素間の LMS チャネルが一方向および双方向の矢印で表されている。

3 つ目のビジネスユニットが、この数値操作プロジェクトに加わりたいと思っています。単独のコンポーネントに以前の数と現在の数をまとめて、必要なときにいつでも表示できるようにする必要があります。まず、メッセージチャネルを作成して、コンポーネントで使用できるようにしましょう。

「remoteControl」という名前のコンポーネントが「counts」という名前の関連していないコンポーネントに情報を送信する。

Lightning メッセージチャネルを作成する

  1. Visual Studio Code で、default フォルダーに messageChannels という名前のフォルダーを作成します。
  2. messageChannels フォルダーに、Count_Updated.messageChannel-meta.xml という名前のファイルを作成します。
  3. Count_Updated.messageChannel-meta.xml で、次のコードを貼り付けます。
    <?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>CountUpdated</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass Count updates</description>
     <lightningMessageFields>
        <fieldName>operator</fieldName>
        <description>This is the operator type of the manipulation</description>
    </lightningMessageFields>
    <lightningMessageFields>
         <fieldName>constant</fieldName>
        <description>This is the number for the manipulation</description>
     </lightningMessageFields>
</LightningMessageChannel>
メモ

XML でバリデーションエラーが発生したら、次のステップを実行して XML のバリデーションをオフにする必要があります。

    • VS Code で、[File (ファイル)] > [Preferences (ユーザー設定)] > [Settings (設定)] (Windows) または [Code (コード)] > [Settings (設定)] > [Settings (設定)] (macOS) をクリックします。
    • Validation (バリデーション) を検索します。
    • [XML] を選択し、[Validation (バリデーション)] を選択解除します。
  1. ファイルを保存してリリースします。

パブリッシャーコンポーネントを作成する

  1. remoteControl という名前で Lightning Web コンポーネントを作成します。
  2. remoteControl.js の内容を次のコードで置き換えます。
    import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import COUNT_UPDATED_CHANNEL from '@salesforce/messageChannel/Count_Updated__c';
export default class RemoteControl extends LightningElement {
  @wire(MessageContext)
  messageContext;
  handleIncrement() {
    // this.counter++;
    const payload = {
      operator: 'add',
      constant: 1
    };
    publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
  }
  handleDecrement() {
    // this.counter--;
    const payload = {
      operator: 'subtract',
      constant: 1
    };
    publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
  }
  handleMultiply(event) {
    const factor = event.detail;
     // this.counter *= factor;
    const payload = {
      operator: 'multiply',
      constant: factor
    };
    publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
  }
}
    Lightning Message Service から publish と MessageContext をインポートします。作成したチャネル (Count_Updated__c) もインポートします。データペイロードが publish 関数と一緒に送信されます。
  3. ファイルを保存します。
  4. remoteControl.html を開き、template タグの間に次のコードを追加します。
      <lightning-card title="Remote Control" icon-name="action:change_record_type">
    <c-controls
      class="slds-show slds-is-relative"
      onadd={handleIncrement}
      onsubtract={handleDecrement}
      onmultiply={handleMultiply}>
    </c-controls>
  </lightning-card>
    controls コンポーネントを再使用していることに注目してください。
  5. ファイルを保存します。
  6. remoteControl コンポーネントが Lightning アプリケーションページで使用できるようにするために、remoteControl.js-meta.xml を更新します。
        <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
  7. ファイルを保存します。

サブスクライバーコンポーネントを作成する

  1. counts という名前で Lightning Web コンポーネントを作成します。
  2. counts.js の内容を次のコードで置き換えます。
    import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import COUNT_UPDATED_CHANNEL from '@salesforce/messageChannel/Count_Updated__c';
export default class Counts extends LightningElement {
  subscription = null;
  priorCount = 0;
  counter = 0;
  @wire(MessageContext)
  messageContext;
  subscribeToMessageChannel() {
    this.subscription = subscribe(
      this.messageContext,
      COUNT_UPDATED_CHANNEL,
      (message) => this.handleMessage(message)
    );
  }
  handleMessage(message) {
    this.priorCount = this.counter;
    if(message.operator == 'add') {
      this.counter += message.constant;
    }else if(message.operator == 'subtract') {
      this.counter -= message.constant;
    } else {
      this.counter *= message.constant;
    }
  }
  connectedCallback() {
    this.subscribeToMessageChannel();
  }
}

@wire(MessageContext) への参照によって、コンポーネントの破棄ライフサイクル中に unsubscribe が実行されます。

  1. ファイルを保存します。
  2. counts.html を開いて、template タグの間に次のコードを追加します。
      <lightning-card title="Counts" icon-name="action:change_record_type">
    <p class="slds-text-align_center slds-var-m-vertical_medium">
      Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
    </p>
    <p class="slds-text-align_center slds-var-m-vertical_medium">
      Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
    </p>
  </lightning-card>
  3. ファイルを保存します。
  4. counts コンポーネントが Lightning アプリケーションページで使用できるようにするために、counts.js-meta.xml を更新します。
        <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
  5. ファイルを保存します。

新しいコンポーネントを Event Comms アプリケーションに追加する

  1. lwc フォルダーをリリースして、Event Comms アプリケーションページを更新します。
  2. 編集する [Event Comms (イベント通信)] ページを開きます。
  3. [remoteControl] コンポーネントをページの右の領域にドラッグします。
  4. [counts] コンポーネントを右の領域の remoteControl コンポーネントのすぐ下にドラッグします。
  5. [Save (保存)] をクリックして、Lightning アプリケーションビルダーを終了します。

通信を確認する

  1. Remote Control (リモートコントロール) のボタンをクリックして、counts コンポーネントの数を変更します。

Lightning Message Service を使用して Aura コンポーネントと Visualforce ページとも通信できます。異なる種別のコンポーネントの同期を維持するのに最も簡潔な方法です。 

Lightning Web コンポーネント間で通信する方法について実務的な知識を得ることができました。子-親、親-子、関連していないコンポーネント間の各シナリオに取り組みました。必ず以下のリソースを確認して、Lightning Web コンポーネントとの通信について知識を深めてください。

リソース

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む