2019.05.16

Lightning Web Component (LWC)のご紹介

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
Closeup network space

Closeup network space

はじめに

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

しかし、公式ドキュメントはいまだ英語だらけで概要の理解が進まなかったり、そもそもLWCって何なのか、どういう機能があるのかと疑問に思われる方は居るかと思います。本稿では英語が苦手で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を使う上で必要なものは組織、CLI、IDEの3つ

LWCを実際に試す系の記事にも書かれているので、本セクションはおさらいの意味をかねてサラッと記載します。
  • DevHubが有効化されたSpring19以降の組織
  • Developer Edition(DE)(ここから作成できます)でLWCを試すことが可能です。

  • Salesforce CLI
  • Visual Studio Code(VS Code)(執筆時点で開発者コンソールは未対応)
  • 本稿を作成するにあたりSalesforceの公式ドキュメント(英語。。。)を読んだのですが、IDEでの開発はVS Code一択だと明記されています。まだEclipseを使用している方は、これを機にVS Codeの導入してみてはいかがでしょうか。導入の詳細は過去記事をご参照ください

LWCはHTML、JavaScript、XML、CSSの4ファイルで構成される

LWCの構成がどうなっているかを実際に作って試してみたいと思います。VS Codeでコマンドパレットを呼び出し(ショートカット:Shift + Ctrl + p)、以下のコマンドを入力し指示のとおりに進めていきます。
>sfdx:create light
create-lwc-command
作成が完了すると以下の図のようにHTML、JSおよびXMLファイルが作成されます。
独自のスタイルを適用させたい場合はこのフォルダにCSSファイルを配置します。

コンポーネント作成後

LWC作成後のフォルダ構成
  • HTMLファイル
  • 画面構成を記述します。 ファイルは必ず<template>タグで開始します。作成直後は<template>タグのみ記載された状態です。

  • JSファイル
  • ロジックを記述します。 クラスやメソッドにデコレータ(後述します)を追加することで組織のデータを簡単に読み込んだり、コンポーネント間の連携が簡単に実現できます。

  • XMLファイル
  • 各種設定を記述します。 作成したコンポーネントをどこで使用するか等を記載します。

  • CSSファイル
  • デフォルトでは作成されません。CSSファイルがなくてもLEXのスタイルが適用されますが、独自のスタイルを設定したい場合は作成します。

Salesforce特有のデコレータは3つ

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

Salesforce特有のデコレータ早わかり図

  • @track
  • 画面とJavaScriptを連携するためのデコレータです。画面での変更、たとえば入力に対して反応させたい場合に使用します。Apexでいうprivateメソッドのように自コンポーネント内でのみ使用することができます。

  • @api
  • @trackとほぼ同じです。JavaScriptで定義したメソッドを他のコンポーネントでも参照したい場合に使用します。@trackと併用することはできません。

  • @wire
  • JavaScriptの変数とApexのメソッドを紐づけたいときに使用します。

さいごに

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

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

関連する記事