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

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

さて、この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 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>

実装

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

light.js-meta.xml

Lightning Webコンポーネントがアプリケーションビルダーに表示されるように、<isExposed>false</isExposed> を <isExposed>true</isExposed> にします。

<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にリリースします。

完成

適当なホーム画面に、Lightning Webコンポーネントを配置します。