Lightning Web Component (LWC)のご紹介

Spring19で Lightning Web Component（LWC）が発表されました。ドキュメントやサンプルが充実しており（以下のリンクを参照ください）、Qiitaや他のブログにも試してみた系の記事が投稿されてきています。

しかし、公式ドキュメントはいまだ英語だらけで概要の理解が進まなかったり、そもそもLWCって何なのか、どういう機能があるのかと疑問に思われる方は居るかと思います。本稿では英語が苦手でLWCについての学習を後回しにしてきた方のために、LWCの概要が把握できるように紹介したいと思います。

LWCの前身にあたるLightning Componentが発表されたのは2015年でした。当時はWeb標準でできることが限られていたため、共通的な機能を実現するにもSalesforce独自の技術として改良されてきました。そのため、いま人気のJavaScriptライブラリであるReactをつかって、MVCのV部分を実現した方が良いというような記事も散見されます。しかし、時代が変わりWeb標準でできることも多くなっており、LWCはWeb標準に寄せた技術として登場しました。このため汎用的なWebのスキル（主にJavaScript）を持っていれば簡単に扱うことができます。

それではLWCの登場によってLightning Componentはどうなってしまうのか。実はLWCと共存できます。いままでLightning Componentで作成した資産はそのまま利用可能で、機能追加したい場合はLWCを採用することも可能です。ただし、Salesforceとしては今後はLWCの改良を優先的に行っていくでしょうから、新規で開発する場合はLWCを採用した方が良いでしょう。

LWCの構成がどうなっているかを実際に作って試してみたいと思います。VS Codeでコマンドパレットを呼び出し（ショートカット：Shift + Ctrl + p）、以下のコマンドを入力し指示のとおりに進めていきます。

作成が完了すると以下の図のようにHTML、JSおよびXMLファイルが作成されます。
独自のスタイルを適用させたい場合はこのフォルダにCSSファイルを配置します。

デコレータはJavaScriptの標準機能です。デコレータをご存じない方のためにお伝えすると、Javaでいうアノテーションと同じようなもので、メソッドなどに機能（たとえばログ出力など）を追加する際に使います。LWCではSalesforce特有のデコレータが3つ（@api、@track、@wire）用意されています。それぞれの役割が直感的にわかるようにしたのが下の図です。

冒頭でも書きましたが、LWCはSpring19で実装された新機能です。UIの部分は変化が激しくキャッチアップが大変な分野の一つですが、それだけに古参のエンジニアに対抗できる分野でもあります。

経験の浅いエンジニアは積極的にこのような新技術に触れていきましょう！