Lightning Web Components(LWC)を始めよう
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.
