こんにちは、アピリオ北嵐です。昨年はどっぷりとHerokuの世界でエンタープライズ系の開発をしていたのですが、再びSalesforceの世界に戻ってきました。現在はLightning Experienceを本格的に導入するプロジェクトに参画していて、Lightningコンポーネントベースの開発を行っているのですが、なんとSpring'19からLightningコンポーネントの仕様が一新され、Lightning Web Componentsなるものが登場しているではないですか。
これまで積み上げてきた従来のLightningコンポーネントの知識がレガシー化してしまうのは少々寂しいものの、この新しいLightning Componentsの仕組みにはフロントエンジニアとして大いに興味をそそられましたので、外部向けの勉強会を開催しました。当日参加して下さった方はありがとうございました。まだまだ日本語のリソースも少ないLightning Web Componentsですので、この勉強会の内容をこのブログシリーズでお伝えしていこうと思います。
1. Lightning Web Components登場の背景
Lightning Experience（以下LEXと記述）環境とLightningコンポーネントは、従来のClassic環境に代わるSalesforceの次世代プラットフォームとしてこれから本格的に普及していく段階にありますので、このタイミングでのLightning Web Componentsの登場には少し驚きがありましたが、公式ブログ：Introducing Lightning Web Componentsを読みますとその辺りの事情が丁寧に説明されています。内容としては以下のような話になります。
Spring’15から提供されているLightningコンポーネントはAuraフレームワークと呼ばれるプログラミングモデルをベースとして提供されてきました。Auraフレームワークは2013年ごろに開発された技術で、この時代はまだまだJavaScriptによるコンポーネントベース/エンタープライズ開発を行うための標準が確立されておらず、モジュール化（AMD/CommonJS等）やフレームワーク（React/Angular等）の仕組みもOSSごとに独自の仕組みが提供されていました。Auraフレームワークも独自のコンポーネントモデルとモジュール化の仕組みを持っていて、下記のような特長を持っています。
- 状態をクライアントのみに持ち、サーバーサイドには状態を持たない
- クライアントとサーバー間の通信にはJSONフォーマット（REST）を使用する
- イベントドリブン
- モバイルプラットフォーム およびクロスブラウザのサポート
当時としては十分に先進的であり、JavaScriptベースでコンポーネント開発を行うための意欲的なフレームワークだったのですが、結果としてAuraベースの従来のLightningコンポーネントでは、標準の欠如による開発面（学習面、再利用）での非効率化が大きな課題となってしまいました（確かにAuraは独自ワールドだったので、他のOSSを利用するには苦労がありました）。
2. Web Components
この問題を根本的に解決するために、よりモダンな技術をベースとした新しいLightning Web Components（以下LWCと記述）が提供されることになりました。2014年からの5年間でJavaScriptによるWeb開発の標準化が進み、独自のコンポーネントモデルやJavaScriptの言語拡張を行う必要性が小さくなりました。LWCのベースになっているのは、再利用可能なカプセル化された独自のHTMLタグを作成できる”Web components”プラットフォームであり、多くのWeb標準をベースとしている技術となります。
[ブログ Introducing Lightning Web Componentsより]
Web Componentsを構成する最新のWeb標準には下記のようなものがあります。注目して欲しいのはES6のサポートです。IEに代表される古いブラウザサポートの問題から、従来からあるレガシーJavaScriptを使って開発を行っている方はまだまだ多いと思いますが、LWCは基本的にモダンブラウザしかサポートしませんので、2015年にデビューしたES6以降のJavaScriptを使って実装します。
[Web Componentsを構成するWeb標準]
3. LWCとAuraコンポーネントの共存
今後は両者を区別するために、従来のLightningコンポーネントはLightning Aura Components（以下Auraコンポーネントと記述）と呼ばれます。Auraコンポーネントのサポートがすぐに打ち切られるわけではなく、AuraコンポーネントとLWCは共存させることができます。注意するのは、Auraコンポーネントの中にLWCを含めることはできますが、その逆（LWCの中にAuraコンポーネントを含める）はできません。具体的な例としては標準のLightningコンポーネントの実装は既にLWCの実装に切り替えられていて、LWCとして実装されたコンポーネントをAuraコンポーネントで包含するような形で作成されています。
[ブログ Introducing Lightning Web Componentsより]
おわりに
今回はLWCの登場した背景と今後の位置付けについて説明しました。次回以降はLWCの構成や実装方法について、従来のAuraコンポーネントと比較する形で説明していきたいと思います。最後にまだまだ英語ばかりとはなりますが、LWCの参考リソース（2019年3月時点）をご紹介しておきます。なお、Spring'19時点でLWCがサポートする機能はLightningコンポーネントと同じではなく制限がありますのでご注意ください。
・ 公式の開発ガイド： Lightning Web Components Developer Guide
・ LWC版の標準コンポーネントのリファレンス： Lightning Web Components Component Reference
・ 日本語のリソース：Qiita: Lightning Web Components覚え書き
・ LWCがサポートする機能：サポートされるSF機能
■ Lightning Web Components 入門（全5回）シリーズは下記のリンクからご覧いただけます。
・ Lightning Web Components入門（1）Aura Components からLightning Web Componentsへ
・ Lightning Web Components入門（2）LWCの基本的な構成
・ Lightning Web Components入門（3）コンポーネントの実装方法
・ Lightning Web Components入門（4）Salesforce CLI
・ Lightning Web Components入門（5）応用編
著者について
Naoki Kitaarashi のコンテンツをもっと見る
