Spring ’19リリースで、Lightning Web Components(LWC)が発表されて早くも2ヶ月ほと経過しましたが、皆さんはもうLWCを試してみましたでしょうか？

Lightning Web ComponentsはSalesforceが注力している次世代のUI開発フレームワークで、今後も多くの機能追加や改善が行われていく予定となっています。

本番環境への導入も今後増えていくと思われますので、開発者の皆さんは今のうちにこの新しいフレームワークに慣れておくことをお勧めします。

そこで今回はLWCを覚えるに必要なステップを簡単まとめておきました。

1. Web Componentsの理解

LWCのベースとなっているWeb Components自体は、World Wide Web Consortium (W3C)という標準化団体で規定しているもので、HTMLなどと同様に特定のベンダーに依存しない業界標準仕様です。実際に、例えばGoogleでWeb Componentsと検索すればWeb Componentsに関する情報・チュートリアルなどが数多く見つかります。そしてそれらの知識はLightning Web Componentsの理解をする上でも非常に大きな基礎知識となります。これは今までのVisualforceやAura Compoentnsといった独自仕様をベースとしたSalesforceのテクノロジとは大きな違いです。

皆さんは業界標準であるWeb Componentsの知識を学ぶことで、LWCの前提知識の大半を学ぶことが出来ます。
例えばMozillaでは一部日本語でWeb Componentsの概要を解説するページを設けています。

Web Components | MDM
https://developer.mozilla.org/ja/docs/Web/Web_Components

2. LWCの概要の理解

先日LWCの概要を説明するWebセミナーを開催しています。まずはこちらのWebセミナーを閲覧して、LWCの概要を把握しましょう。
またLWCで効率的に開発するには、Salesforce DXの知識を覚えることも重要となりますので、合わせて習得するのが良いでしょう。

Salesforce DXとLightning Web ComponentsでモダンSalesforceアプリ開発

3. LWCのサンプルアプリケーションを実際に試す

LWCをより理解するには実際のサンプルアプリケーションを動かして、編集してみるのが近道です。
英語ではSample Galleryと呼ばれいるLWCアプリケーションのショーケースサイトが公開されていますが、残念ながらサイト自体は英語です。

SAMPLE GALLERY
https://trailhead.salesforce.com/ja/sample-gallery

しかし、このなかで特に有用だと思われる2のアプリケーションの日本語版を提供していますので、そちらを是非試してみてください。

LWC Recipe日本語版
LWCの理解しやすい小さな粒度のコードを集めたサンプル集です

E-Bikes 日本語版
電気自動車の販売企業を例に取ったサンプルLWCアプリケーションです

4. LWCのTrailheadをやってみる

現在まだ英語版しかありませんが、LWCのTrailもTrailheadに用意されています。

日本語版の準備を進めていますが、英語でも問題がないという方はぜひチャレンジしてみて下さい。

Build Lightning Web Components
Develop reusable Lightning web components using JavaScript and HTML.