親から子に通信する

メモ

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

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

親コンポーネントから子コンポーネントへの通信を有効にするには、子が公開プロパティか公開関数を公開します。その後、親は子の公開プロパティを更新したり、子の公開関数をコールしたりすることができます。

augmentor-to-numerator が表示されている親-子通信の図。

また、何らかの機能を追加する場合は、子コンポーネントの公開プロパティを getter と setter に更新します。

では、シンプルな公開プロパティの更新から始めましょう。別のビジネスユニットが、作成した Numerator を見つけました。このコンポーネントを使用して、機能を追加したいと考えています。まず依頼されたのは、カウンターの開始数値を設定できるようにすることです。元のビジネスユースケースに影響する変更は行いたくないため、numerator コンポーネントを別のコンポーネントでラップすることにしましょう。このコンポーネントで新しい機能を保持します。

公開プロパティを更新する

親コンポーネントがプロパティを更新できるように、子コンポーネント内の @api デコレーターでプロパティを公開して、パブリックにします。

子コンポーネント (numerator) の公開プロパティを公開します。

Visual Studio Code で、numerator.js を開き、@api デコレーターを counter プロパティに適用します。
```
  @api counter = 0;
```
lwc モジュールから api デコレーターをインポートします。
ファイルを保存します。

augmentor という名前の新しい親コンポーネントを作成し、コーディングします。

augmentor という名前の Lightning Web コンポーネントを作成します。

augmentor.js の Augmentor クラス内に次のコードを貼り付けます。

  startCounter = 0;
  handleStartChange(event) {
    this.startCounter = parseInt(event.target.value);
  }

ファイルを保存します。

augmentor.html を開いて、template タグの間に次のコードを追加します。

  <lightning-card title="Augmentor" icon-name="action:download">
    <lightning-layout>
      <lightning-layout-item flexibility="auto" padding="around-small">
        <lightning-input
          label="Set Starting Counter"
          type="number"
          min="0"
          max="1000000"
          value={startCounter}
          onchange={handleStartChange}>
        </lightning-input>
      </lightning-layout-item>
    </lightning-layout>
    <c-numerator
      class="slds-show slds-is-relative"
      counter={startCounter}>
    </c-numerator>
  </lightning-card>

ファイルを保存します。
augmentor コンポーネントが Lightning アプリケーションページで使用できるようにするために、augmentor.js-meta.xml を更新します。
```
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
    </targets>
```
ファイルを保存します。

新しいコンポーネント (augmentor) を Event Comms アプリケーションページに追加します。

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

通信を確認します。

変更内容を Salesforce で見るには、Event Comms アプリケーションページを更新します。
[Set Starting Counter (開始カウンターを設定)] 項目に数値を入力します。
入力した数値に件数が更新されます。
乗算ボタンの 1 つをクリックします。
カウンターは更新されますが、[Set Starting Counter (開始カウンターを設定)] は変わりません。
元の numerator コンポーネントの値を変更します。
引き続き、想定どおりに動作します。

情報 (startCounter) が親コンポーネント (augmentor) から子コンポーネント (numerator) の counter プロパティに送信される。

Set Starting Counter (開始カウンターを設定) を numerator コンポーネントに追加する代わりに、独自のコンポーネント (augmentor) に配置したため、numerator は引き続き元のビジネスケースに対応します。numerator が子 (controls) と親 (augmentor) の両方から入力を受信するようになりました。

公開関数をコールする

次の依頼は、件数を 100 万増やすことです。開始カウンターの設定を変更することは望んでいません。つまり、startCounter プロパティを更新すればよいというわけではありません。augmentor コンポーネントには、追加する現在の件数もありません。子に対して公開関数をコールして更新を行います。

親コンポーネントがコールできるように、子コンポーネント内の @api デコレーターで関数を公開してパブリックにします。

子コンポーネント (numerator) に公開関数を作成します。

numerator.js を開き、次の maximizeCounter 関数を handleMultiply 関数の後に追加します。
```
  @api
  maximizeCounter() {
    this.counter += 1000000;
  }
```
ファイルを保存します。

親コンポーネント (augmentor) に、ボタンとそのハンドラーを追加します。

augmentor.js を開き、次の handleMaximizeCounter 関数を handleStartChange 関数の後に追加します。
```
  handleMaximizeCounter() {
    this.template.querySelector('c-numerator').maximizeCounter();
  }
```
この関数は augmentor.html 内の c-numerator タグを見つけ、公開関数 maximizeCounter をコールします。
ファイルを保存します。

augmentor.html を開き、次の lightning-button を Set Starting Counter (開始カウンターを設定) lightning-input の後に追加します。

        <lightning-button
          class="slds-var-p-vertical_xx-small"
          label="Add 1m To Counter"
          onclick={handleMaximizeCounter}>
        </lightning-button>

ファイルを保存します。

通信を確認します。

変更内容を Salesforce で見るには、lwc フォルダーをリリースして Event Comms アプリケーションページを更新します。
[Add 1m To Counter (100 万をカウンターに追加)] をクリックします。
件数が 100 万増加します。

親 (augmentor) で新しいボタンによって handleMaximizeCounter ハンドラーがトリガーされ、それによって子コンポーネント (numerator) がコールされて公開関数 maximizeCounter がトリガーされます。

前述の説明に対応する図。

公開 getter および setter を使用する

この課題は、このステップの最初でプロパティを更新した方法によく似ています。実際に、親コンポーネントの変更はまったく行いません。子コンポーネントで、公開 getter および setter を使用して公開カウンタープロパティを実装するだけです。

Event Comms を使用している両方のビジネスユニットは更新内容を気に入っています。今度は、件数が変わったときに件数の以前の値を確認したいと考えています。counter プロパティを変更するたびに、現在の件数を取得する方法が必要です。新しい値を設定する前に、現在の件数を取得して保存することができます。_currentCount という新しい非公開変数を使用して操作できるようにしましょう。以前の件数を保持して表示できるようにするには、priorCount という変数を使用します。

機能を追加するには、getter と setter (get と set、accessor プロパティとも呼ばれます) として counter プロパティを実装します。その後、カウンターが設定されるたびに、新しいカウンター値を設定する前に現在のカウンター値 (_currentCount) が priorCount 変数に保存されます。

以前の件数を子コンポーネント (numerator) に追加します。

numerator.html を開き、Count (件数) を含むパラグラフの直前に次のパラグラフを追加します。

      <p class="slds-text-align_center slds-var-m-vertical_medium">
        Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
      </p>

ファイルを保存します。
numerator.js を開き、@api counter = 0; をコメントにします (行の先頭に // を追加します)。
コメントの後に次のコードを追加します。
```
  _currentCount = 0;
  priorCount = 0;
  @api
  get counter() {
    return this._currentCount;
  }
  set counter(value) {
    this.priorCount = this._currentCount;
    this._currentCount = value;
  }
```
このコードによって、counter が getter (get) および setter (set) 関数を含むプロパティに変わります。priorCount および _currentCount プロパティも追加されます。
ファイルを保存します。

通信を確認します。

変更内容を Salesforce で見るには、lwc フォルダーをリリースして Event Comms アプリケーションページを更新します。
[Add (加算)]、[X2]、[Add 1m To Counter (100 万をカウンターに追加)] をクリックしてカウンター値を変更します。
カウンターを更新すると、以前のカウンターの同期が維持されます。
Numerator コンポーネントと Augmentor コンポーネントのボタンをクリックして、元の機能が影響を受けないことを確認します。

getter と setter を使用して新しい priorCount プロパティを更新するように numerator コンポーネントを更新しました。親コンポーネント (augmentor) は、引き続き情報 (startCounter) を子コンポーネント (numerator) に送信します。ただし、numerator が getter と setter を使用して _currentCount プロパティを get し、_currentCount および priorCount プロパティを set するようになりました。

前述の説明に対応する図。

チャレンジ (省略可能 — このコードの確認は行いません)

件数に追加する数値を指定する引数を受け入れるように handleMaximizeCounter と maximizeCounter を更新してください。ヒント: ステップ 1 で実行した内容を確認し、multiply カスタムイベントを使用して data-factor を送信します。

まとめ

Lightning Web コンポーネント間の子-親通信と親-子通信に取り組みました。次のステップでは、Lightning Message Service を使用して、親と子のリレーションのないコンポーネント間で通信します。

ヘルプをお探しですか?

もっと探す

親から子に通信する

メモ

公開プロパティを更新する

公開関数をコールする

公開 getter および setter を使用する

まとめ

リソース