アプリをSalesforce ClassicからLightning Experience(LEX)に移行するにあたり、検討・整理した事項についてのメモです。
Salesforceの新しいUIであるLEXですが、開発する画面のLook & FeelをLEXに合わせるためには、私が知る範囲では少なくとも以下の4つの方法があります。
- Salesforce Lightning Design System(SLDS)を使って、スクラッチで作る
- React Lightning Design System や Design System for React のような、Reactベースで提供されているSLDSのコンポーネントを使って組み合わせていく
- Visualforceで
lightningStylesheets="true"を宣言した上でSLDSを読み込み、Visualforceの標準コンポーネントをLEX風にスタイル設定する - Lightning基本コンポーネントを組み合わせていく
まぁ、どれも根底のスタイル装飾はSLDSなわけですが、作り方・扱い方の違いという観点で、4つを分けました。
主観でメリット、デメリットを整理するとこんな感じです（デメリットと言ってよいものか迷うものもありますが…）。
| 方式 | メリット | デメリット |
|---|---|---|
| SLDSスクラッチ | 開発方式や表現力の自由度が高い | マークアップが辛い。 SLDSのバージョンアップに追随する場合、コストをかけて対応が必要。 |
| Reactライブラリ | 充実したフロントエンド開発のエコシステムに乗っかって開発ができる | SLDSのバージョンアップにライブラリが対応していく必要がある（利用については自己責任） |
| Visualforce | ある程度成熟したVFの成果物を大きく変えずにLEX化できる | 完璧ではないので、SLDSを使って細かい調整が必要になることもある。 Visualforceなので、表示領域の高さを固定にしておく必要がある（必要なコンテンツの高さだけ確保する、というのが難しい） |
| Lightning基本コンポーネント | 継続的なアップデートと後方互換性が見込まれる（多分） | 利用可能なコンポーネントには限りがある |
汎用性（適用範囲）と生産性の高さのバランスがよいので、総合的には2番目がベターかなー、という気がしています。
もう少し掘り下げると、それぞれの方式が適切な用途というのは、それぞれ次のような時かなと思っています。
| 方式 | あてはまるケース |
|---|---|
| SLDSスクラッチ | 慣れているSPA方式で開発したい場合（React以外のライブラリ利用時。Vue.jsとか…？） |
| Reactライブラリ | 慣れているSPA方式で開発したい場合（React利用時） |
| Visualforce | Visualforceの標準コンポーネントを駆使して作られた既存のVisualforceページをLEX対応したい場合 |
| Lightning基本コンポーネント | 新規で作る画面であり、比較的シンプルな場合 |
また、4つの方式は排他的なものではなく、複数を組み合わせて開発することもあるかもしれません。
分かりにくい表ですが、その場合の組み合わせ方は下表のような手段を利用することになりそうです*1。
1番目と2番めは、成果物はSPA方式の静的リソースであるという観点では一緒なので、同一のものと見なしています。
| 取り込む側＼取り込まれる側 | SLDSスクラッチ Reactライブラリ (=HTML,JS,CSS) |
Visualforce | Lightningコンポーネント |
|---|---|---|---|
| SLDSスクラッチ Reactライブラリ |
BrowserifyやWebpack等、普通のJSエコシステムの世界 | 無理（？） | Lightning Out |
| Visualforce | 静的リソースとして読み込み | VFコンポーネント化すればVF in VFは可。もしくはiframe | Lightning Out |
| Lightningコンポーネント | lightning:container, ltng:require | iframe | <lightning:コンポーネント名>, <c:コンポーネント名> |
*1:実際に試していないものもあるため、かなり雑なまとめです…。
