はじめに
Salesforce UI開発フレームワーク”Lightning Web Component”についての基礎・導入編として基本的な部分にフォーカスをあてて紹介します。
Lightning Web Component（以下LWC）はSpring’19で発表され、HTML5をベースとしたWeb ComponentとしてSalesforceのフレームワークとなります。Web標準をベースとしているので、Salesforce独自の専用知識を新たに習得する必要が無く、これまで培っていたWeb標準の知識で開発に活用できる点がメリットです。
パフォーマンス性についても従来と比べて画面構築や多くの処理をWebブラウザがネイティブに実行されるためJavaSscirptで構築していた時よりもパフォーマンスが向上します。
また、LWCの前身であるAuraコンポーネントとの互換性が保たれているので既存開発していたリソースの流用や併用できる点も大きな利点の一つかなと思います。
環境構築
LWCはSalesforce TrailheadなどにおいてもVSCodeを使うことを前提としているため、ここではWindows版のVSCodeで環境構築する手順として記載します。
前提準備1：VSCodeの拡張機能（Salesforce Extension Pack）をインストールする
-
- 拡張機能をインストール後にVSCode上でコマンドパレットを
CTRL+SHIFT+Pで開き、SFDX: Create Project with Manifest (SFDX: マニフェストファイルを使用してプロジェクトを作成)を実行する（このコマンドによって、Salesforce開発に必要なファイルとフォルダ構成が自動生成されます） - テンプレート”標準のプロジェクトテンプレート”を選択する
- プロジェクト名を入力する
- 拡張機能をインストール後にVSCode上でコマンドパレットを
LWCコンポーネントの作成
VSCode上の「LWC」ディレクトリを右クリックしSFDX:Create Lightning Web Componentを選択するとコンポーネントとして構成するファイル（html, js, meta）がそれぞれ自動で生成されます。
まず初めにJavaScriptファイルにコンポーネントクラスを定義します。クラスはLightningElementを継承しクラスを作成する必要があります。
|
1 2 3 4 |
import { LightningElement, track } from 'lwc'; // クラス定義（LightningElementを継承） export default class LwcCustomComponent extends LightningElement { } |
- 変数定義
データを格納する変数をクラス内に定義する。クラス内に定義した変数は、同コンポーネントのhtmlソースから参照がすることが出来ます。
|
1 2 3 4 5 |
import { LightningElement, api } from 'lwc'; export default class LwcCustomComponent extends LightningElement { // 変数定義 variable = 'Hello World!'; } |
また、JavaScript内で定義した変数を別のコンポーネントで参照したい場合、デコレータ@api属性を付与する事でコンポーネント間とでデータ参照する行う事が可能です。クラス内で定義した変数の値が変更されると、同名のコンポーネント(html）は再レンダリングされます。
|
1 2 3 4 |
import { LightningElement, track } from 'lwc'; export default class LwcCustomComponent extends LightningElement { @api variable; } |
- データの取得
LWCからSalesforce上のデータ（レコード情報）を取得する方法としては、デコレータ@wire属性を使う。もしくは、Apexクラスのstatic関数を呼び出す事でSalesforce上のデータを取得して各コンポーネントへの出力も可能です。
- ビュー(HTML)の作成
最後にtemplateタグ以下にHTMLを記述する。{変数名}と記載する事でJavaScriptクラスで定義した同名コンポーネントの変数を出力する事が可能です。
|
1 2 3 4 5 |
<template> <div class="container"> <p>{variable}</p> </div> </template> |
また、コンポーネントから別のコンポーネントへのアクセスの際には、コンポーネント名（例えばコンポーネント名"LwcChildComponent"）を"c-lwc-child-component"（「c」は標準ネームスペース）というケバブケース（ダッシュ区切り）で指定するとコンポーネント同士を接続する事が出来ます。
|
1 2 3 4 5 6 7 |
<template> <div class="container"> <p>{variable}</p> <!-- 別コンポーネント（LwcChildComponent）呼び出し --> <c-lwc-child-component></c-lwc-child-component> </div> </template> |
最後に
今回はLWCのコンポーネントとして簡単な実装例について説明しました。Spring’19でリリースされたまだ比較的新しい機能ではありますが、Web標準をベースとした高い親和性やWeb Componentとしての有用性は従来のVisualforceを使ったカスタマイズ開発よりも流用性・メンテナンス性の高いモジュールとして開発できる点で期待が大きいと思いますので積極的な活用を検討してみては如何でしょうか？