Dreamforce2018 day1 Advanced Lightning Components

ついにDreamforce 2018が始まりました。

噂で聞いていた通り町中がSalesforceだらけでお祭りのような雰囲気でした。

私は初めてDreamforceに参加するということで気合を入れて朝一のセッションから参加してきました。

その内容をお伝えしていきたいと思います。

私が参加したセッションは「Advanced Lightning Components」で、大きめの会場でしたが人が多くセッション開始時にはほぼ満席となっていました。

Lightning Componentsへの関心の高さがうかがえました。

それではセッション内容についてご紹介していきます。 Lightning Componentsでデータを効率的にキャッシュする方法についてがメインのお話でした。

Storable Actionsの使いどころと使い方

Storable Actionsは直近参照したことのあるデータであればサーバへ問い合わせはせずに クライアントのキャッシュからデータを返すことができる仕組みです。 Apexメソッドのアノテーションに「@AuraEnabled(cacheable=true)」と記述することで有効化されます。

使いどころとしては下記の2つを紹介されていました。

• ページングされた一覧で1ページ目、2ページ目、・・・とページを移動した後に、前のページに戻るとき
• 一覧の検索条件で一度検索した条件で再度検索するとき

このキャッシュはrefreshAgeと呼ばれる期間が過ぎると、データはキャッシュから返しつつ、 非同期でキャッシュのデータを更新してクライアントに返すようになっています。

そのため、キャッシュを使ったApexをLightning Componentsから呼び出すときはjavascriptのPromiseを使うと効率的に記述できるそうです。

下記画像の実装例1ではLightning ComponentからStorable Actionsが有効化されているApexを呼び出すPromiseを返却しています。

実装例2では実装例1のPromiseを受け取るのでthenを使ってメソッドチェーンの記述ができるようになります。

Lightning Data Serviceの使いどころと使い方

異なるコンポーネントであっても同じレコードを参照していればクライアントのキャッシュから値を返してくれる仕組みとなります。

Lightning Data Serviceが使えるコンポーネントとして下記4つのコンポーネントが紹介されていました。

どれもレコードの参照画面や編集画面によく使うコンポーネントとなっています。

• force:recordData

　　　　表示(編集)するレコードのどの項目をどう表示するかというところから記述できます

• lightning:recordViewForm
• lightning:recordEditForm

　　　　表示(編集)するレコードのどの項目を表示するかとレイアウトを記述できます

　　　　項目の型によってどう表示されるかは自動的に決められます

• lightning:recordForm

　　　　表示(編集)するレコードのどの項目を表示するかを記述できます

それぞれ似たようなコンポーネントな印象でしたが、今回は下記のように自由度と作業量で分類されていました。

作業量の少ないlightning:recordFormから試してみるのが良さそうな印象でした。

更に、lightning:recordFormを使うと、異なるブラウザ間であっても、レコードが更新されるとリロードせずに最新の値に変わるようなデモも見られました。

おわりに

Lightning Componentsに関してはこのセッション以外にも「From Markup to Magic The Evolution of Lightning Components」を聞いてきました。

こちらのセッションでは「NO HTML」や「NO APEX」というキーワードが目立ち、今回ご紹介したような標準で提供しているコンポーネント（セッション内ではBase Lightning Componentsと呼ばれていました）を使うことで、できるだけApexを使わず、できるだけ簡潔にコンポーネントを記述できるようにするには、という部分に力を入れている印象を感じました。

これからも提供されるLightning Componentsは増えていくそうで期待が膨らみます。

Dreamforce 2日目以降もTech Blogで現地の様子や最新情報をお伝えしていきますので、ぜひお楽しみください。