この記事の目次
SalesforceにおけるRendererとは？
SalesforceのRendererとは、Aura コンポーネントを用いたフレームワークでのレンダリングを実行する機能のことです。
コンポーネントファイル内にあるタグの読み込みを行い、HTML形式に変換して吐き出したり、HTMLファイルから変更された属性値の変更を検知して再構築したHTMLを吐き出したりといった処理が行えます。
つまり、本来はタブによって構成されているプログラムデータを、見やすく整形したうえで画面上に表示を行う機能がRendererです。
SalesforceにおけるRendererの仕組みを解説
Rendererは、Salesforceで管理しているデータをはじめとする、あらゆる情報をレンダリングによってプログラムを変換し、画面上に表示する機能です。タブが羅列された複雑なプログラムを描画して見やすく表示する役割を果たしてくれています。
例えば、各端末のブラウザからサーバーに対してページファイルを要求し、ブラウザはサーバーからプログラムされたデータファイルを受け取ります。このデータには、画面でどのように表示を行うかがプログラミングされています。
そこでブラウザは、この受け取ったデータのプログラムに則って変換を行い、データを整形したうえで端末の画面上に表示しているということです。Rendererはこれらのレンダリング作業を担っています。
SalesforceのRendererをカスタムする
SalesforceのRendererでは、Aura コンポーネントをレンダリングするタイミングで、カスタムRendererによって関数のオーバーライドが可能です。そのため、構成されているHTMLのプログラム変更や、描画完了のタイミングが把握できます。
関数のオーバーライドが可能な、基本実装されているフェーズには、render()・rerender()・afterRender()・unrender()があります。
フレームワークにおいて上記の関数は、表示ライフサイクルや再表示ライフサイクルの一部で実行されます。
コンポーネントの表示ライフサイクル
コンポーネントの明示設定で非表示となっていない場合、コンポーネントの有効期限内で表示ライフサイクルの発生が1回あります。コンポーネントの作成で行われる処理は次の内容です。 フレームワークで初期化の際に発生するinitイベントの起動により、コンポーネントの構築から表示までにコンポーネントが更新でき、イベントの起動も可能です。render()のメソッドが実行され、コンポーネントのボディ表示が行われます。 afterRender()メソッドの実行で、フレームワークでの表示サービスによるDOM要素の挿入でDOM ツリーの操作が可能です。 フレームワークにおける表示サービスによりDOM要素を挿入した場合、フレームワークでrenderイベントを起動し、DOMツリーの操作が可能となります。カスタムRendererの作成とafterRender()のオーバーライドより、renderイベントの処理が優先されます。コンポーネントの再表示ライフサイクル
基盤データの変更が行われた場合、コンポーネントの再表示は再表示コンポーネントによって自動で処理が実行されます。一般的なシーケンスは次の内容です。 ブラウザのイベントにより、Lightningイベントが1つ以上トリガされます。それぞれのLightningイベントで、データ更新ができるアクションが1つ以上トリガされ、更新が行われたデータによって複数イベントの起動が行われるケースもあります。 また、表示サービスにより、起動したイベントデータのスタック追跡が行われます。フレームワークで、それぞれのコンポーネントのrerender()メソッドが実行され、更新が行われたデータを所有しているコンポーネント全てが再表示されます。 さらに、フレームワークにより、renderイベントの起動から、コンポーネントの再表示が行われた後でDOMツリーの操作が可能です。カスタムRendererを作成する
カスタムRendererは、Salesforceの通常使用では作成の必要はないものの、フレームワークでの表示サービスでDOM要素の挿入が行われた場合に、DOM ツリーの操作を行うのに重宝します。 表示動作のカスタマイズを行う際、マークアップにおいてのカスタマイズをはじめ、init イベントを用いてカスタマイズできないケースで、クライアント側のRendererを作成できます。 Rendererのファイルは、コンポーネントの動作に必要なバンドルリソースの一部であり、コンポーネントの表示カスタマイズの方法
コンポーネントのRendererで、render()の関数作成により、基本となるrender()の関数をオーバーライドして表示のカスタマイズができます。関数の上書きによって、DOMの更新が行われます。 通常は、カスタム表示コードを追加する前に、render()の関数より、superRender()の実行でデフォルトの表示が拡張されます。そして、superRender()の実行で、マークアップによって指定された、DOMノードの作成が行われます。 カスタムrender()の関数コードは以下となります。render : function(cmp, helper) {var ret = this.superRender();// do custom rendering herereturn ret;},コンポーネントを再表示する
イベントの起動が、影響のあるコンポーネントでデータの変更を行い、rerender()を実行するアクションのきっかけとなります。コンポーネントデータが更新されると、フレームワークにより自動でrerender()が実行されます。 通常は、カスタム再表示コードが追加される前に、rerender()の関数よりsuperRerender()を実行し、デフォルトの再表示が拡張されます。superRerender()の実行により、body属性コンポーネントへ再表示のチェーニングが行われます。 カスタムrerender()の関数コードは以下となります。rerender : function(cmp, helper){this.superRerender();// do custom rerendering here}表示後にDOMへアクセスする
フレームワークにおける表示サービスにより、DOM要素の挿入が行われると、afterRender()の関数によってDOM ツリーの操作が行えます。 通常は、カスタムコードの追加を行う前に、superAfterRender()の関数を実行し、表示後にデフォルトが拡張されます。カスタムafterRender()の関数コードは以下となります。afterRender: function (component, helper) {this.superAfterRender();// interact with the DOM here},コンポーネントを非表示にする
基本unrender()の関数は、コンポーネントにあるrender()により表示されたDOM ノード全てを削除します。Rendererによってunrender()をオーバーライドし、動作のカスタマイズが可能です。 標準ライブラリではなく、サードパーティ・ライブラリなどの操作時に便利なメソッドです。通常は、カスタムコードの追加前に、unrender()の関数よりsuperUnrender()を実行し、デフォルトの非表示が拡張されます。 カスタムunrender()の関数コードは以下となります。unrender: function() {this.superUnrender();// do custom unrendering here}SalesforceのRendererを理解して快適に活用しよう
今回は、Salesforceを有意義に使うための機能である、Rendererについてご紹介しました。 プログラムを整形して、わかりやすくスムーズな操作をサポートするRendererの仕組みを理解し、Salesforceを快適に活用しましょう。
]]>
この記事の監修者・著者
- 未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数：2100以上（2023年6月時点）
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞最新の投稿
