Lightning Web コンポーネント（lwc）とは
Web業界で標準的に使われる技術（HTML・CSS・JS）を使って、Salesforceのアプリケーションを開発する手法。
Reactのようにコンポーネントを作ってアプリケーションを構築できる。
元々はWeb ComponentsというWeb標準の技術があり、それを使いやすく拡張したもの。
Web Componentsの説明はこちらの記事が分かりやすかったです。
何が嬉しいのか
- 標準的な言語を使うので、Salesforce以外の開発で使えるスキルが身につく。
- （HTML,CSS,JSが使える人なら）Salesforce開発に参加しやすくなる。
- カプセル化されてて扱いやすく、動作も軽い。
1と2はSalesforce開発周りの人には嬉しいですよね。
Visualforce・Apexとかは癖が強いので、以下のような悩みを抱えがちです。
-
開発者（個人）：自分のスキルがニッチになって、市場価値が低くならないか心配
-
開発会社：できる人もやりたがる人もいないから、プロジェクトに人が集められない
lwcはそんな人達の悩みを和らげるために作られました。
基本的な書き方
ディレクトリ構成
- js ：必須
- html：必須
- css ：任意（cssを使いたかったら必要）
- xml ：任意（Salesforce組織に存在する場合は必要）
上記が1つずつ入ったディレクトリが、1コンポーネントになります。
文法
JS
- lwcモジュール（Lightning Web コンポーネントのコアモジュール）から、必要な機能をインポートする
- htmlファイル・他JSファイルで使うクラス・プロパティをエクスポートする
サンプル（トレイルヘッドより）
import { LightningElement } from 'lwc'; //lwcモジュールのインポート
export default class App extends LightningElement { //クラスのエクスポート
name = 'Electra X4';
description = 'A sweet bike built for comfort.';
category = 'Mountain';
material = 'Steel';
price = '$2,700';
pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
ready = false;
connectedCallback() {
setTimeout(() => {
this.ready = true;
}, 3000);
}
}
html
- "template"タグ（JS経由でHTMLを生成するタグ）で囲む
- {}で囲ってJSの変数を表示できる
サンプル（トレイルヘッドより)
<template>
<div>
<div>Name: {name}</div>
<div>Description: {description}</div>
<div>Category: {category}</div>
<div>Material: {material}</div>
<div>Price: {price}</div>
<div><img src={pictureUrl}/></div>
</div>
</template>
- コンポーネント間で呼び出しを行うときは以下のように書きます
<c-コンポーネント名></c-コンポーネント名>
css
- 普通のCSS
xml
- 基本的にはsfdxコマンドの
lightning:component:createで作られる内容でOK - Salesforce上にlwcを表示するときは、というタグに表示したいページ名を入れる必要があるので注意
サンプル(トレイルヘッドより)
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<!-- The apiVersion may need to be increased for the current release -->
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target> //表示したいページ名
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
lwcをSalesforce上に表示する流れ
-
ディレクトリ構成の内容でディレクトリを作成
（sfdxコマンドのlightning:component:createで作ると早い） - Salesforce組織にデプロイ
- アプリケーションビルダーを使って、Salesforce画面に表示
- アプリケーションビルダーの操作手順はこちら
- ※「コンポーネントの新しいページの作成」という単元です
※lwcを含んだAuraコンポーネントをナビゲーションタブ化する方法もあります。
まとめ
Salesforce技術の応用範囲が広がるのは嬉しいですね。
次回はもう少し応用的なサンプルを載せてみようと思います。
基礎はしっかり固めつつ、こういう新しい技術も積極的にキャッチアップしていきたいものです。