Lightning Web Components をほんのちょっぴり体験した

はじめに

SalesforceがLightning Componentsを世に送り出したのが2015年の夏頃でしたでしょうか。昨年あたりから「だいぶ小慣れてきた」などの意見を耳にする一方で、独自のフレームワークであるがゆえに「ツラい」という意見も多数ありました。
そんな中で、次世代のSalesforce用UIフレームワークとしてLightning Web Components(以下、LWC)が誕生しました。

先にリリースされていたLightning ComponentsはAura Componentsとして、LWCとAura Componentsをひっくるめて、Lightning Componentsと呼ぶようです。

"Introducing Lightning Web Components" より抜粋

本記事では、そんなLWCをほんのちょっぴり体験したことを共有します。
なお、本記事はSalesforce Platform Advent Calendar 2018の21日目です。

何はともあれQuickStart

LWCのQuickStart用のTrailheadモジュールがすでに公開されています。
Quick Start: Lightning Web Components
まずは、このモジュールを一通りやってみると良いでしょう。

Set Up Your Salesforce DX Environment

まずは環境を整えるということで

1. pre-release Developer Edtionの取得およびDevHub有効化
2. salesforce CLIのインストールおよびpre-release用プラグインのインストール
   といった作業を進めます。

Set Up Visual Studio Code

ローカルでの開発ではデファクトスタンダードと化したVisual Studio Code(VSCode)を使います。
余談ですが、Force.com IDEは来年10月にサポートも切れるということで役目を終える模様です。
ありがとう Force.com IDE...
※あと、誰かWelkin Suiteを試して欲しいですね..

こちらも手順に沿って、salesforce extension packをインストールすればOKです。
なお、Trailheadモジュールでは、ステップの確認は実質なくて、ただボタンを押すだけのようです。

Create a Hello World Lightning Web Component

いよいよLWCを作成します。これまた手順通りに進めましょう。
ちなみに、sfdx force:source:push する際に思わぬ罠があるようなので、ご注意ください。

その他サンプルアプリケーション

一旦、QuickStartが終わりましたら、Sample Galleryよりサンプルアプリケーションをデプロイしてみて試してみましょう。
例えばEBikesというアプリケーションを試すには、READMEの手順に沿って、ソースコードをScratchOrgにデプロイすればOKです。

が、実際に試してみたところ、sfdx force:source:pushで以下のエラーが発生しました

PROJECT PATH                                                                    ERROR
──────────────────────────────────────────────────────────────────────────────  ───────────────────────────────────────────────────────────────────────────────
force-app/main/default/objects/Order_Item__c/Order_Item__c.object-meta.xml      Cannot specify a startsWith attribute for this language

詳細まで調べていませんが、
force-app/main/default/objects/Order_Item__c/Order_Item__c.object-meta.xml にて、<startsWith>タグを削除して再度pushすれば正常に処理されました。

※force-app/main/default/objects/Order__c/Orde__c.object-meta.xmlも同様に修正しました

もう少し詳しく

※LWCの中身をもっとみてみようという場合には、Lightning Web Components Dev Guideを確認すると良いでしょう。

Web Componentsがベース

Web Componentsは大きく4つの仕様から構成されています。

• Shadow DOM
• Custom Elements
• HTML Templates
• HTML Imports（ただ、HTML importsの実装が進まず、代わりにES Modulesを使ってコンポーネント宣言するjsを読み込むのがスタンダードになるとか？）

LWCはWeb Componentsをベースにして、Salesforceとの連携部分(Work with Salesforce Data)や、セキュリティの強化(Security with Lightning Locker)などを付け足したもの、というイメージなのかな、と思います。
※ただLightning Lockerは様々な制約を課してる？模様...。(詳細は誰か詳しい人お願いします！ (Dynamic component creation in Lightning Web Components) etc)

そのほか、ES Modulesの仕組みがあるので、異なるコンポーネントの機能を利用することも簡単に可能となります。

Salesforceとのデータ連携について

大きくは以下2つの方法が推奨されているようです。

• Lightning Data Serviceを使う

例えば、lightning/uiRecordApiといったモジュールが用意されていますので、それをインポートして利用します。

import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class Example extends LightningElement {
    @wire(getRecord, { recordId: '001xxxxxxxxxxxxxxx', fields: [NAME_FIELD] })
    propertyOrFunction;
}

• Apexで定義したメソッドを使う

Apexクラス側で@AuraEnabledアノテーションをつけてstaticなメソッドを定義しておけば、LWCでインポートして利用します。

public with sharing class ContactController {

    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [SELECT Id, Name, Title, Phone, Email, Picture__c FROM Contact WHERE Picture__c != null LIMIT 10];
    }

}

import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
...

テストについて

LWCでは、Jestを使うことが推奨されているようです。(Test Lightning Web Components)
JestはFacebook製のテストフレームワークで、"高速なテスト実行", "ゼロ・コンフィグレーション", "コードカバレッジ機能を内蔵"といった特徴を備えています。

サンプルアプリケーションのEBikesで、試すことができるようで、実際に試してみました。

（↓こちらの環境です）

$ node -v
v10.14.2

1. npmのインストール

EBikesのプロジェクト直下にて、以下のコマンドで必要なモジュールをインストールします。

$ npm install
$ npm install @salesforce/lwc-jest --save-dev

1. テストを実行する

$ npm run test:unit

> ebikes-lwc@1.0.0 test:unit /Users/takahiro-yonei/dev/salesforce/12_Pre/ebikes-lwc
> lwc-jest

 PASS  force-app/main/default/lwc/productFilter/__tests__/productFilter.test.js (13.516s)
  c-product-filter
    filterChange event
      ✓ fired when slider value changes (819ms)
      ✓ fired when search value changes (522ms)
      ✓ fired when checkbox is toggled (952ms)
...(途中略)
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        17.107s, estimated 20s
Ran all test suites.

Jestでは、以下の条件にマッチしたファイルをテストコードとして認識して、テストを実行します。

• __test__ディレクトリ内の、ファイル名の末尾が.jsのファイル
• ファイル名の末尾が.test.jsのファイル
• ファイル名の末尾が.spec.jsのファイル

EBikesアプリケーションの場合、force-app/main/default/lwc/productFilterに__test__というディレクトリがあり、その中にproductFilter.test.jsというファイルがあるのでそれがテストコードとして認識され、テスト実行された、という具合です。

Jestを使ったテストのセットアップ方法の詳細はコチラにあります。

Playground

Playgroundが用意されていて、色々試してみることもできるようです。

LEXへの組み込み

AppBuilderに組み込むことが可能です。その場合、　コンポーネントの.js-meta.xmlファイルに設定情報を定義しておくようです。（以下、例）

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>45.0</apiVersion>
  <isExposed>false</isExposed>
  <masterLabel>Best Component Ever</masterLabel>
  <description>This is a demo component.</description>
  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <property name="prop1" type="String" />
          <objects>
              <object>Account</object>
              <object>Opportunity</object>
              <object>Warehouse__c</object>
          </objects>
      </targetConfig>
      <targetConfig targets="lightning__AppPage, lightning_HomePage">
          <property name="prop2" type="Boolean" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

さいごに

以上、ほんのちょっぴり触ってみたあたりの話でした。

さて、LWCが誕生した背景には一体何があるのでしょうか。
おそらく、Lightning Componentsでは解決できなかった「何か」をクリアすべく創られたものだと思いますが、LWCはそれをクリアできるでしょうか？
今回（？）は、かなりWebの標準技術をベースにしたものとして創られているようですので、Lightning Componentに手を出すのに躊躇していたエンジニアには非常に関心が高いものになっているのではないでしょうか？（たぶん）

現時点ではクリアすべき技術的な課題が多く残されていると思いますが、まだ産まれたばかりのUIフレームワークですので、暖かくいじっていきたいと思います。
そして、今後の動向を継続してウォッチしていきましょう！

それでは楽しいLWCライフを