Lightning Web コンポーネントからの Aura コンポーネントの作成

Lightning Web コンポーネントから Aura コンポーネントを作成することはできますが、その逆はできません。階層構造の下方に向かって通信するため、親は子に対してプロパティを設定します。Lightning Web コンポーネントを Aura コンポーネントにネストするタイミングと方法を決めるには、ファセットとスロットについて理解することが重要です。

Aura コンポーネントで Aura コンポーネントまたは Lightning Web コンポーネントを参照するときは、キャメルケースを使用し、名前空間とコンポーネント名はコロンで区切ります。

次の Aura コンポーネントは、基本 Lightning コンポーネントの lightning:card と、Lightning Web コンポーネントの c:lwcHelloWorld で構成されています。

1<!-- auraComponent.cmp file -->
2<aura:component implements="flexipage:availableForAllPageTypes">
3  <lightning:card title="Aura Hello World" iconName="custom:custom30" />
4  <c:lwcHelloWorld name="Earthling" />
5</aura:component>

lwcHelloWorld コードは、有名な挨拶を表示します。(このコードも lightning-card コンポーネントを参照します。ほとんどの基本 Lightning コンポーネントは、Aura および LWC として使用できます。)

1<!-- lwcHelloWorld.html -->
2<template>
3  <lightning-card title="LWC Hello World" icon-name="custom:custom14">
4    <div class="slds-card__body slds-card__body_inner">Hello, {name}!</div>
5  </lightning-card>
6</template>

コンポーネントには公開プロパティの name があり、Aura コンポーネントで name 属性を使用して設定します。

1// lwcHelloWorld.js
2import { LightningElement, api } from "lwc";
3
4export default class HelloWorld extends LightningElement {
5  @api name;
6}

Aura コンポーネント内にネストされた Lightning Web コンポーネント。

サンプルアプリケーションの trailheadapps/pure-aloe で、子 Lightning Web コンポーネントである irrigationManager に対してプロパティを設定する irrigationWrapperManager Aura コンポーネントを参照してください。

Tip

ファセットとスロット

Aura コンポーネントと Lightning Web コンポーネントでは、別のコンポーネントの本体にコンポーネントを追加できます。Aura では、ファセットにコンポーネントを追加します。Lightning Web コンポーネントでは、スロットにコンポーネントを追加します。

Aura では、body 属性はファセットです。ファセットとは、Aura.Component[] 型の任意の属性であり、属性にコンポーネントの配列を設定できるということを専門的に表現した用語です。

簡単に言えば、ファセットはサンドイッチのようなものです。サンドイッチ (ファセット) には、何種類もの具 (コンポーネント) を好きなだけ挟むことができます。

1<aura:component>
2  <!-- start of component body facet-->
3  <p>Feeling hungry?</p>
4  <c:bacon />
5  <c:lettuce />
6  <c:tomato />
7  <!-- end of component body facet -->
8</aura:component>

Aura コンポーネントと Lightning Web コンポーネントのどちらを作成すべきかの判断

Aura のファセットについて説明しましたが、もっと詳しい情報が欲しいところですね。では、Aura コンポーネントと Lightning Web コンポーネントのどちらを作成すべきかの判断に、ファセットがどのように影響するかについて説明しましょう。

作成中の新しい Lightning Web コンポーネントの本体に他のサブコンポーネントを含めるつもりである場合は、そのサブコンポーネントも Lightning Web コンポーネントでなければなりません。Lightning Web コンポーネントに Aura コンポーネントを含めることはできません。

ネストされたコンポーネントのツリーの一番外側にある Lightning Web コンポーネントを考えてください。ロシアのマトリョーシカ人形に例えて考えてみましょう。一番大きい人形が Lightning Web コンポーネントです。一番大きいマトリョーシカ人形の中には少し小さい人形が入っていて、その中にはさらに小さい人形、そしてその中にもさらに小さい人形が入っています。一番大きい人形が Lightning Web コンポーネントであるとすると、Aura コンポーネントは、その中の小さい人形のいずれにもなれません。

例: スロットへのコンポーネントの受け渡し

本体に他のコンポーネントを含めることができる c-wrapper という Lightning Web コンポーネントを考えてください。<slot> タグは、オーナーコンポーネントがマークアップを渡すことのできるプレースホルダです。

1<!-- wrapper.html -->
2<template>
3  <slot></slot>
4</template>

Lightning Web コンポーネントの c-app は、lightning-card コンポーネントをスロットに渡します。

1<!-- app.html -->
2<template>
3  <c-wrapper>
4    <lightning-card>
5      <lightning-icon icon-name="utility:connected_apps"></lightning-icon>
6      Card Title
7      <p class="slds-p-horizontal_small">Card Body</p>
8    </lightning-card>
9  </c-wrapper>
10</template>

スロットを含む Lightning Web コンポーネントは、Aura コンポーネント内でネストできすが、スロットは使用できません。

Important

親 Aura コンポーネントからの子 Lightning Web コンポーネントメソッドのコール

Lightning Web コンポーネントで定義されているメソッドを Aura コンポーネントからコールするには、Aura コンポーネントを参照する場合と同じように、Lightning Web コンポーネントに対して aura:id を指定して cmp.find() を使用します。たとえば、cmp.find('childLwc').childLwcMethod() のように使用します。

Lightning Web コンポーネントは、Aura コンポーネントが表示されるまでは作成されません。それまでは (たとえば Aura コンポーネントの初期化中は) Lightning Web コンポーネントのメソッドをコールすることはできません。

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。