パステル色な日々

気ままに綴るブログ

Lightning Componentの開発は昨今のフロントエンドの開発と大差ないのか

Lightning Component

Lightning ComponentとはLightning Experience(LEX)上で動作するUIです。 従来のフロントエンド開発と同様にComponentはUIの部品を指しています。 従来はLEXのようなSPAではなく、もっと別のコンセプトがありました。 近年移行が進んでいますが、ユーザーはLEXとClassicを使い分けることが出来ます。 どうしても組織でClassicを使いたいという要件があってもLEXに移行する雰囲気がするのでLightning Component開発に踏み切りましょう。 僕は特にSalesforceのような業務アプリケーションにおいては使いやすさよりもできるか出来ないかのほうが重要視されると考えます。 であれば慣れ親しんだClassicでわざわざ作る理由はないのではないでしょうか。

Sandbox

SalesforceSaaSです。Lightning Componentを作成しても実行環境が利用中のSalesforce上だと開発中のデバッグには向かないですし、何よりユーザーに迷惑をかける可能性があります。

Sandboxは利用中のSalesforceのスナップショットです。 利用中のSalesforceのデータとメタデータをコピーして環境を作ることが出来ます。

ForceCodeを使った開発

割りと情報がなくて困ったLightning Componentの開発のやり方について説明します。 やり方はいろいろありますが、今回はSalesforceの開発者ツールとVSCodeを使って開発します。

Salesforceの開発者ツールからLigntning Componentを作成します。 開発はこの開発者ツール上で完結することも出来ます。 ですが、今回は慣れ親しんだエディタで開発して、Gitでバージョン管理することを考えて作成したComponentをローカルにダウンロードします。

VSCodeには予めForceCodeをインストールして、Salesforceと認証おきましょう。

$ mkdir -p my-proj/src
$ cd my-proj
$ touch src/package.xml

src ディレクトリの下に package.xml を作ったら

<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
  <types>
    <members>HelloComonent</members>
    <name>AuraDefinitionBundle</name>
  </types>
</Package>

中身にダウンロードしたいComponentの名前を書いてしまいましょう。 後はRetrieve PackageをRetrieve by package.xmlで実行するとダウンロードできます。 アップロードもForceCodeから行えます。 Lightning Componentの作成だけ開発者ツールでやらないといけないのが煩わしいですね。 注意が必要なのは同期していないということです。アップロードとダウンロードを繰り返すので常に上書きされることに注意してください。

Salesforce Developer Experience (SFDX)

2018年10月から始まった新たな体験です。 Force.com プラットフォーム *1 のアプリケーションを従来の慣れ親しんだ方法に近い形 *2 で開発することができます。 Sandboxではなくスクラッチ組織を作ってすぐに壊すことのできる環境を用意できます。 普段の開発はスクラッチ組織で行い。Staging環境をSandboxとして利用する方法がよいと思います。 その他にもCLIによるスムーズな開発がサポートされており、開発者ツールを利用せず従来のスピード感で開発することが出来ます。 利用するには組織のProduction環境で設定をONにするだけです。

*1: Force.com プラットフォームはSalesforceを構築するための基盤、つまりPaaS のサービス

*2: バージョン管理やCI, CLIツールの利用を指しています

言語

Lightning Componentの開発言語はJavaScriptとHtml、CSSです。 ただし、Salesforceの独自のタグが存在しているので要所では学習が必要になります。 また、JavaScriptはES2015に完全に対応していないため、Objectリテラルに対するスプレッド構文が利用できないです。 キホンはES5での開発だと思ったほうが良いでしょう。

ライブラリ

昨今のフロントエンド開発では切っても切り離せない多数のライブラリがありますが、これは静的ファイルとしてSalesforceに登録することで利用できます。 webpackを使ったbundleではなくライブラリは別にダウンロードされて実行されます。 また、AngularやReactといったライブラリを使いたい方もいると思います。 実際やってみた系の記事を見つけることが出来ますが、Visualforceページを利用したものが見つかると思います。 Lightning ComponentとVisualforceページは異なります。 VisualforceページをLightning Componentの中で利用することができます。

さて、AngularやReactを使う理由はなんでしょうか。Lightning Componentの開発はサポートされており、出来上がるものに差がないのであれば亜流の方法を選択する必要はないと考えます。 独自の価値を生み出すのであれば、利用した方がいいと思いますが慣れないから使うのであれば避けたほうが良いでしょう。 冷静になってください。 実際僕も余りの開発のやりにくさによって衝動に駆られました。

Lightning Design System

Lightning Design SystemはSalesforceのDesign Systemです。 組み込みのLightning Componentにも利用されており、美麗で使いやすいComponentパーツを素早く利用できる仕組みが整っています。 カスタムComponentを作るときには大いに利用しましょう。

結論

SFDXのような取り組みがはじまるくらいには開発がしにくいです。 JavaScriptライブラリの中にはバンドルされて利用されることを前提としてものも少なくありません。 ES2015も満足に使えないため昨今のJavaScript開発に慣れ親しんだ方はヤキモキするでしょう。

一方Lightning Desing Systemは素晴らしいです。 状態に応じたComponentのUIのDOMが手軽に利用できるため見た目に悩むことは殆どありませんでした。