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

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning Web コンポーネントの利点を挙げる。
  • Aura コンポーネントと Lightning Web コンポーネントを連携させる方法を説明する。
  • コンポーネントを移行させることが妥当な状況を判断する。

新しいプログラミングモデル

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 コンポーネントとは?

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

Lightning Web コンポーネントの利点

最新の JavaScript: HTML テンプレート、カスタム要素、Web コンポーネントなど、ES6+ 仕様の JavaScript 言語や Web 標準はここ数年で大幅に進化しています。Lightning Web コンポーネントを使用すれば、Lightning コンポーネントフレームワークで最新の JavaScript や Web 標準が利用できるようになります。開発者の生産性と満足度: Lightning Web コンポーネントでは、標準の JavaScript、HTML、CSS を利用することになるため、構築方法をより早く学習できます。Salesforce での作業を容易にする専有のコンポーネントや API が存在しますが、こうした専有機能にも標準的な方法でアクセスして使用します。Lightning Web コンポーネントではコードの記述量が減り、コードの判読、管理、単体テストが容易になります。開発に関する質問が生じたときも、使い慣れたエンジンで答えが簡単に見つかります。Web 標準を使用することで、開発やデバッグ作業が加速します。Lightning Web コンポーネントは標準の JavaScript を採用しているため、好みの開発ツールを使用でき、気になるツールを試してみることもできます。コードのパフォーマンス: Web 標準を使用することで、より多くの機能が JavaScript フレームワークではなく、ブラウザでネイティブに実行されるため、パフォーマンスが向上します。こうした改善はユースケースによって異なる場合がありますが、コンポーネントがすぐ表示されることに驚き、歓迎されるものと確信しています。

前提条件

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

本モジュールは、受講者が Aura コンポーネントプログラミングモデルを十分に理解していることを前提としているため、Lightning Web コンポーネントプログラミングモデルと比較する場合を除き、その機能を説明していません。Aura コンポーネントのことをよく知らない場合は、まず「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 コンポーネントを使い続ける。

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