Lightning Webコンポーネントを使ってみる

Salesforceでは、Visualforceページ、Lightning Auraコンポーネント、Lightning Webコンポーネントを使って、独自の仕組みを作り込むことができます。

Salesforceでは、Lightningへの移行を絶賛推進中です(まだ移行されていない方はギリギリになる前に準備されることをオススメします)

さて、この3つの方法ですが、どう使い分ければいいのでしょうか?

Visualforceページ・Classicで独自の仕組みを使っていて、Lightningでも同じ方法で使いたい方
・UIがLightingでも中身はClassicにしたい方
・見た目は、Lightingにしたいが新しいことを学ぶ暇がない方
Lightning Auraコンポーネント・一足先にLightning Auraコンポーネントにチャレンジされた方
Lightning Webコンポーネント・MEANスタックな方
・JavaScriptをこよなく愛されている方
・HTML+CSSが大好きな方
・これからSalesforceを始める方
・とにかく新しいものが好きな方
・Lighting Auraコンポーネントでチャレンジ失敗下方

これから始めるのであれば、Lightning Webコンポーネントをオススメします。

MEANスタックな方は、以下のように捉えると分かりやすいです。

M=Mongo・標準オブジェクト
・カスタムオブジェクト
E=Express・Apexクラス
A=Angular・Lighting Webコンポーネント
N=Node.js・Apexクラス
・Lighting Webコンポーネント
※ここは微妙・・・。

さて、どこから手を付ければいいでしょう?

Salesforceには、Trailheadという学習ツールがあります。誰でも使えますし(SalesforceユーザでなくてもOK)、最近はローカライズも追いつきつつあるので、学ぶにはとてもいいツールです。まずは、以下のTrailheadにチャレンジして、一通り学んでみてください。

https://trailhead.salesforce.com/ja/content/learn/trails/build-lightning-web-components

開発環境

開発環境は、以下の通りです。

  • Salesforce Developer Edition
  • Visualstudio Code
  • Salesforce Extension Pack
  • Salesforce DX

こんなものを作ってみます。下に配置しているボタンをクリックすると上のテキストが変わるだけです。

プロジェクトの作成

プロジェクトを作成します。

sfdx force:project:create -n learn-lwc

Salesforce Developer Edtion環境への接続

Salesforce Developer Edition環境にログインします。

sfdx force:org:web:login -d -a devde

Webコンポーネントの作成

まず、Webコンポーネントのひな形を作成します。

sfdx force:lightning:component:create --type lwc -n light

force-app/main/default/lwc/lightフォルダに、3つのファイルが作成されます。

light.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="light">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

light.js

import { LightningElement } from 'lwc';

export default class Light extends LightningElement {}
}

light.html

<template>
</template>

実装

1つずつ実装していきます。

light.js-meta.xml

Lightningアプリケーションビルダーのカスタムコンポートに表示されるようにする

<isExposed>false</isExposed><isExposed>true</isExposed> にします。

Webコンポーネントが利用できる対象を定義する

<targets> セクションを以下のように追加します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="light">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

light.js

import { LightningElement, track } from 'lwc';

export default class Light extends LightningElement {
    /**
     * 表示名
     * @trackを付けることで、displayNameに値を設定するとコンポーネントが再表示される
     */
    @track displayName = '';

    /**
     * 表示モードを切り替える
     * lightning-buttonのonclickに「onclick={modeChange)」と定義する
     * @param  mode 表示モード
     */
    modeChange(event) {
        this.displayName = event.target.label;
    }
}

light.html

<template>
    <div>
        <div class="display-label">
            {displayName}
        </div>
    </div>
    <div>
            <lightning-button-group class="slds-align_absolute-center">
                    <lightning-button variant="barand" label="brand" onclick={modeChange}>
                    </lightning-button>
                    <lightning-button variant="destructive" label="destructive" onclick={modeChange}>
                        </lightning-button>
                        <lightning-button variant="success" label="success" onclick={modeChange}>
                            </lightning-button>
            </lightning-button-group>
    </div>
</template>

light.css

独自のスタイルを定義するために、light.cssを作成します。デフォルトでは作成されないので、同じフォルダにlight.cssを作成します。

.display-label {
    background-color: white;
    text-align: center;
}

リリース

Visualstudio Codeのコマンドパレットで、SFDX: Deploy This Source to Orgを実行して、Salesforceにリリースします。

完成

適当なホーム画面に、lightコンポーネントを配置します。こんな感じに完成です。

感想

Lightning Auraコンポーネントが発表されたときには不思議でした。こんなに理解しにくい実装はないなと・・・。

Lightning Webコンポーネントが出て、時流に乗ってきました。MEANスタックな方は親しみやすいですし、Javascript、HTML、CSSという業界の標準を採用したと言うことは、新しいスキルセットが要らないというメリットがあります。

素晴らしい!Salesforce。