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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連トピック

• スロットにマークアップを渡す
• カスタム Aura トークンの使用