Lightning基本コンポーネントのライブエディタを作ってみる #salesforce

昨日のエントリで検討した通り、シンプルな画面を新規開発する場合においては、Lightning基本コンポーネントを極力使って開発する、というのも、今後は一つの選択肢なんじゃないかなーという仮説を立ててみました。

Lightning基本コンポーネントについては、以下に書かれています。

developer.salesforce.com

しかし、実際に開発する場合、上記ドキュメント(リファレンス)を参照しながら、ということになると思うのですが、案外しんどいことに気づきます。
それはなぜかというと、ドキュメントがテキストのみであり、結果としてどういうUIになるか、仕上がりのプレビューがないことに起因します。

そのため、ちゃんとしたものを作ろうとすると、開発者ガイド、SLDSのドキュメント、場合によってはちょんプロを作ったりと、試行錯誤して作っていくことになりそうだなと予想しています。
(と、思っているんですけど、皆さんどうしているんでしょうね…?)

というわけで、本題です。

開発のハードルを下げるためには、「ライブエディタ(リアルタイムプレビュー)とかあったらいいんじゃない?」と思い立ち、空き時間を利用して作り始めてみました。
まぁ、車輪の再発明の気もしなくもないですが、練習も兼ねてなのでいいかなと。

作ってる画面の例として、lightning:layout の場合は、以下のようなものです*1

f:id:jappy:20171214005821p:plain

このライブエディタ自体も、極力Lightning基本コンポーネントを使って開発するように、意識しています。

動きとしては、コンポーネントの属性値 horizontalAlign などを入力パラメータとして受け取って、その度にコントローラ側で $A.createComponentsコンポーネントを再作成し、PreviewとCodeに反映しています。
実際に動かしてみると、 horizontalAlign 属性には center, space, spread, endの4つのオプションがあるわけですが、それぞれのオプションで配置にどのような違いがあるのかも一目瞭然で、なかなか便利そうな気がしています。

まだまだ作りが荒いですが、モチベを保つ意味で紹介してみました。 sfdxでCI/CDをやりつつ、年内くらいには形になるといいな…。

*1:PreviewとCodeで数字がズレているのはバグですね…