Lightning Web コンポーネントを Aura コンポーネントと連携させる方法について

Lightning コンポーネントを、Aura コンポーネントプログラミングモデル (元のモデル) と Lightning Web コンポーネントプログラミングモデル (新しいモデル) の 2 つのモデルで作成できるようになりました。Lightning Web コンポーネントは、皆さんが Aura コンポーネントの開発をやっと習得したちょうどその頃に考案されました! 「一体どうして?」と思うでしょう。私たちが Lightning Web コンポーネントモデルを開発したのは、数年前に元の Aura モデルを構築した時点には存在していなかった Web 標準に適合させるためでした。

前の段落で大文字と小文字の表記に違いがあることに気付かれましたか? もしそうなら、鋭い眼力をお持ちです。「Lightning Web コンポーネント」というプログラミングモデルを表す場合と、「Lightning Web コンポーネント」というコンポーネント自体を表す場合があります。

同様に、これまで使用してきたプログラミングモデルも「Aura コンポーネント」プログラミングモデルと呼ばれるようになり、このモデルで Aura コンポーネントを作成します。

繰り返しになりますが、Lightning Web コンポーネントプログラミングモデルで Lightning Web コンポーネントを作成し、Aura コンポーネントプログラミングモデルで Aura コンポーネントを作成します。

このモジュールの目的は、Aura コンポーネントのスキルを活用して Lightning Web コンポーネントのスキルをいち早く習得できるようにすることです。この 2 種類のコンポーネントが同一のアプリケーションでうまく連携することを学習します。

Lightning Web コンポーネントは、W3C の Web コンポーネント標準の実装です。ブラウザーで適切に実行される一定の Web コンポーネントをサポートし、Salesforce でサポートされているすべてのブラウザーで動作させるために必要な機能のみを追加します。

このモジュールに取りかかる前に、新しいプログラミングモデルについてわかりやすく解説する「Lightning Web Components Basics (Lightning Web コンポーネントの基本)」モジュールを修了してください。

本モジュールは、受講者が Aura コンポーネントプログラミングモデルを十分に理解していることを前提としているため、Lightning Web コンポーネントプログラミングモデルと比較する場合を除き、その機能を説明していません。Aura コンポーネントのことをよく知らない場合は、まず『Lightning Aura コンポーネント開発者ガイド』を参照してください。

また、最新の JavaScript 開発や ES6 JavaScript の機能についても理解している必要があります。これらの用語を混同していると思われる場合は、「Modern JavaScript Development (最新の JavaScript 開発)」モジュールで確認できます。同モジュールには、Web コンポーネントの開発に必要な JavaScript のあらゆるスキルが説明されています。

新しいプログラミングモデルや言語を学ぶことはジャーニーです。新しいコードを実行することには、オープンカーで公道に出て運転するようなスリル感があります。運転中に、コードの行を変更し、エラーを受け取ります。急ブレーキをかけても、交通渋滞にはまってしまえば、何とかして出口を見つけようとします。これがジャーニーの醍醐味です。エラーは一時的な減速にすぎません。いずれ目的地にたどり着くでしょう。うまくいけば夕食に間に合うかもしれません。

Lightning Web コンポーネントのジャーニーの準備にぜひこのモジュールを役立ててください。このモジュールを、旅立つ前にスーツケースに荷物をつめるようなものと考えます。冒険に何が必要かを順を追って説明していきます。目的地に着いてスーツケースを開けたときに、下着を入れ忘れたことに気付いた、なんてことにならないようにします。

まず、コンポーネントをどのように組み合わせるのかから見ていきましょう。コンポーネントは別のコンポーネントのボディに追加できます。コンポーネントのこうした構成によって、シンプルなビルディングブロックコンポーネントから複雑なコンポーネントを構築できます。コンポーネントの構成は、Aura コンポーネントと Lightning Web コンポーネントのどちらにとっても基本的な概念です。

あなたが Aura コンポーネントの開発に多くの時間や労力を費やしてきたであろうことを私たちは認識しています。そのため、私たちは時間をかけて、同一のアプリケーションで Aura コンポーネントと Lightning Web コンポーネントを組み合わせられるようにしました。たとえば、新しい Lightning Web コンポーネントを記述して、Aura コンポーネントを搭載したアプリケーションに追加できます。

Aura コンポーネントと Lightning Web コンポーネントは、一緒に組み合わせられるほか、どちらもイベントと通信できます。これは健全な共存のあり方です。

あらゆる関係と同様、構成されたコンポーネントにもうまく連携させるためのルールがあります。

重要

Aura コンポーネントに Lightning Web コンポーネントを含めることができる。

Lightning Web コンポーネントに Aura コンポーネントを含めることはできない。

構築している Lightning Web コンポーネントのボディに他のサブコンポーネントを含めるつもりである場合は、そのサブコンポーネントも Lightning Web コンポーネントとして構築する必要があります。Lightning Web コンポーネントに Aura コンポーネントを含めることはできません。

コンポーネントをネストしたツリーの一番外側のコンポーネントが Lightning Web コンポーネントである場合は、ネストするいずれのコンポーネントも Aura コンポーネントにすることができません。

2 つのプログラミングモデルを連携させることの利点の 1 つは、ある Aura コンポーネントを Lightning Web コンポーネントに移行することにした場合に、アプリケーションが引き続き機能することです。新しいコンポーネントを Lightning Web コンポーネントにすることにした場合でも、Aura コンポーネントに対して行った投資を継続して活用できます。

また、ES6 モジュールで新しいコードを記述し、Lightning Web コンポーネントと Aura コンポーネントからそのコードにアクセスすることができます。こうしたパターンにより、Aura 開発者に最新の JavaScript 開発の扉が開かれます。

コードの移行が端的に行われることはめったにありません。Lightning Web コンポーネントのプログラミングモデルは基本的に、Aura コンポーネントのモデルと異なります。Aura コンポーネントから Lightning Web コンポーネントへの移行は 1 行ずつ変換すればよいというようなものではなく、コンポーネント全体の設計を見直すよい機会になります。Aura コンポーネントを移行する前に、コンポーネントの属性、インターフェース、構造、パターン、データフローを検証します。

最も簡単に移行できるのは、UI のみを表示するシンプルなコンポーネントです。Lightning Web コンポーネントへの移行候補に挙げられるのは、パフォーマンスが極めて重要な Aura コンポーネントです。

個々のコンポーネントを移行するよりも、コンポーネントの大規模なツリー (コンポーネント内のコンポーネント) を移行するほうが、パフォーマンスや開発者の生産性に大きな向上がみられます。その一方で、1 つのコンポーネントを移行して、Aura プログラミングモデルの概念が Lightning Web コンポーネントプログラミングモデルにどのように対応付けられるかを確認することも有益な学習体験です。

1 つのコンポーネントを移行し終えたら、あなたやその組織にとって次の作業が妥当なものかどうかを判断しやすくなります。

• 大規模な移行に取り組む。
• 新しいコンポーネントのみを Lightning Web コンポーネントにする。
• 当面は Aura コンポーネントを使い続ける。

こうした判断はあなたに委ねられ、ユースケースや使用可能なリソースによっても左右されます。どのような判断を下すにしろ、コンポーネントを移行することは貴重な学習体験になります。