【Lightning Web Component】Lightning Message Serviceを試してみました

こんにちは、アンダーソンです。
今回はLightning Message Serviceを実装してみました。

2020/7/8時点でベータ版の機能ですが、
今後間違いなく正式リリースされると思われますので、
是非この技術は身につけておきましょう。

Lightning Message Serviceの使い方

Lightning Message Serviceではまず、メタデータをデプロイしておく必要があります。
作成した、メタデータは
force-app/main/default/messageChannelsの配下におく必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>This is a sample Lightning Message Channel for the Lightning Web Components.</description>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <description>This is the record Id that changed</description>
        <fieldName>recordId</fieldName>
    </lightningMessageFields>
    <masterLabel>SampleMessageChannel</masterLabel>
</LightningMessageChannel>

次に各コンポーネントで使用するには、
先ほど作成した、messageChannelを読み込む必要があります。

import { publish, MessageContext } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

これでPublishする準備はOKです。
ちなみにサフィックスがカスタムオブジェクトと同じ、__ｃになっていますが、
あくまでもカスタムオブジェクトとは別なので覚えておきましょう。

次にpublishの仕方ですが、
publishメソッドを使って

publish(messageContext, messageChannel, message, publisherOptions);

この形で配信はOKです。
次に購読(subscribe)は下記のメソッドの読み込みが事前に必要です。

import { APPLICATION_SCOPE, MessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SAMPLEMessageChannel__c';

購読側には、購読(subscribe)と購読解除(unsubscribe)のメソッドが用意されています。

subscribe(messageContext, messageChannel, listener, subscriberOptions)

subscribeする時はかならず、4つ目の引数がいるようですので、
注意しましょう。

購読解除の場合は現在購読内容が登録されている、変数を渡すだけでOKです。

unsubscribe(subscription)

これでコンポーネント間でのやりとりができるようになります。
下記はLightning Web Component Specialist SuperBudgeの動きですが、
このようにできるので、是非他のコンポーネントを使って試してみてください！

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。