SE（たぶん）の雑感記

一応SEやっている筆者の思ったことを書き連ねます。会計学もやってたので、両方を生かした記事を書きたいと考えています。　でもテーマが定まってない感がすごい。

トップ > Salesforce > Lightning Web Componentはプログラマにとって習得難易度が低いのか（所感）

Lightning Web Componentはプログラマにとって習得難易度が低いのか（所感）

Salesforce

この記事はSalesforce 開発者向けブログ投稿キャンペーンへのエントリー記事です。

はい、せっかくなので書いてみました。

さて。Salesforceでコードを書いて開発する場合、大きく分けてフロント側とバック側があり、バックエンドはApexという言語一択となります。一方、フロントエンドは三択あります。

  • Visualforce
  • Lightning Component(Aura)
  • Lightning Web Component

このうち、最も新しいのが Lightning Web Compnentと呼ばれる開発です。2019年から正式に動いたのかな…？（うろ覚え）

想定開発者

React, Angular, Vueあたりのフロントエンドフレームワークを触ったことがある人にとって、Salesforceフロントエンド開発の習得難易度がどんなものか、という点に関して、私見を述べたものです。

筆者はAngularがっつり触ったの三カ月ぐらいのぺーぺーです。

何を作るためにあるのか

先ほど書いた通り、Salesforceのフロント開発です。

Salesforceの画面は様々なパーツで構成されますが、シンプルな画面（取引先）はこんな感じです。これはTrailhead*1の環境で動かしています*2。

f:id:hiroronn:20200630220706p:plain

そして、ページ内のパーツの部分としてコンポーネントというものがあります。

help.salesforce.com

要は、このページ上に表示するパーツを作るのが、Salesforceのフロント開発です。

構成要素

最近のフロントエンド開発の流れを汲んでいます。基本は

のみで動作します。

HTML

<template>
  <lightning-card title={name}  icon-name="standard:person_account">
    <p>{annualRevenuePerPerson}</p>
    </lightning-card>    
</template>

かなり雑に書いたものですが。特徴はこんな感じです。

  • templateタグで括る
  • コンポーネント用の独自タグが用意されている（Angular Materialみたいな感じ）
  • JSとの双方向バインド（{}で囲った部分）

developer.salesforce.com

ここだけ見ると、AngularとかVue.jsのような感じがします。当然、ifなども使えます。<div if:true={}></div>のような形です。

JavaScript

データアクセスなどを行います。ここはSalesforceの世界をある程度知っておく必要があります。

一人当たり売上高を計算するという、必要性は分からないものをちゃちゃっと作りました。言い訳になりますが…10分ぐらいで調べながら書いたので、ゼロ除算とかガン無視の雑プログラムです。絶対そのまま使わないでください。

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const fields = [
    'Account.Name',
    'Account.AnnualRevenue',
    'Account.NumberOfEmployees'
];
export default class AccountDetail extends LightningElement {
    @api recordId;

    name;
    annualRevenue;
    numberOfEmployees;

    @wire(getRecord, { recordId: '$recordId', fields: fields })
    loadAccount( {error, data}) {
        if(error) {
            console.log('raise error.');
        } else if(data) {
            this.name = data.fields.Name.value + 'の一人当たり売上高';
            this.annualRevenue = data.fields.AnnualRevenue.value;
            this.numberOfEmployees = data.fields.NumberOfEmployees.value;
        } else {
            this.name = 'test account';
            this.annualRevenue = 100000;
            this.numberOfEmployees = 20;
        }
    }

    get annualRevenuePerPerson() {
        return (this.annualRevenue && this.numberOfEmployees) ? this.annualRevenue / this.numberOfEmployees : 0;
    }
    
}

Salesforce側のライブラリが、単純なデータアクセスなら受け持ってくれます。getRecordなどがその部分です。

また、@apiや@wireなどのデコレータが標準で用意されており、ぱっと見分かりづらいもののいろいろやってくれます。まあそのあたりはSalesforceのおまじない*3と割り切ってしまえば、ふつうのJSだ、と私は思いました。

CSS

デザイン周りはコンポーネントライブラリである程度受け持ってくれますが、どうしても自分で変えたい場合は書くことになります。普通のCSSです。

デプロイ

Lightning Web Componentを使う場合は、VSCodeからのリリースが必須です。長くなりすぎるので割愛します。サーバー適用するだけなら簡単です。

ローカルでの動作確認

あまり簡単ではありません。

https://releasenotes.docs.salesforce.com/ja-jp/winter20/release-notes/rn_lwc_local_dev.htm

一応、あるにはあるのですが、スクラッチ組織*4へのpushは必須です。完全ローカルデバッグができる日は来るのだろうか…データアクセスを伴う部分が課題かもしれません。

完成したもの

f:id:hiroronn:20200630223133p:plain

画面右に適当にタブ増やして配置しました。画面に表示するだけなら、Salesforce特有の部分調べながらで30分ほどで書けました。実用性は知りません*5。

開発者は何を習得しないといけないのか

列挙すると

  • SalesforceのAPI呼び出し方（JavaScript）
  • HTMLでの属性など（仕様読めばある程度分かる）
  • 開発環境のつくり方
  • デプロイや、変更をローカルに取り込む方法

とはいえ、Salesforce管理者から

営業メンバーの効率向上のために、どうしても画面作ってほしい…

と言われても、フロントエンドフレームワークに慣れた人ならたぶんさくっと書けます。私見では技術転用が利くようになったなと感じます。

結論

習得難易度は低いし、技術転用が利くので楽しい。

社内のエンジニアにもソースなど見せてみたところ、

Vueっぽい

という意見もあったので、主要なフロントエンドのフレームワークに近い作りのようです。

参考になるTrailhead

trailhead.salesforce.com

Salesforceで熊追跡する需要ないだろ、とツッコミ入れたくなる気分は抑えましょう。普通に勉強になります。lightning-mapという、地図を表示するコンポーネントの練習にもなります。

最後に：要望的なもの

  • sassサポートしてほしい
  • TypeScriptはダメですか…？
    • 私見：Salesforceオブジェクトアクセス時にどうやっても型anyになってしまうので、無理かな？という気はする

*1:Salesforceを実際に触りながら学べる学習サイト

*2:DevHub有効にし、スクラッチ組織上で動作させている

*3:他のフロントエンドフレームワークで言うと、外のAPI呼び出しと同義

*4:開発に使う、使い捨てのSalesforce環境

*5:これぐらいならオブジェクトに数式作ったほうが良い