SalesforceのRendererとは?構成や活用法についてご紹介
IT・技術関連
更新日:2024.09.05


SalesforceにおけるRendererとは?
SalesforceのRendererとは、Aura コンポーネントを用いたフレームワークでのレンダリングを実行する機能のことです。
コンポーネントファイル内にあるタグの読み込みを行い、HTML形式に変換して吐き出したり、HTMLファイルから変更された属性値の変更を検知して再構築したHTMLを吐き出したりといった処理が行えます。
つまり、本来はタブによって構成されているプログラムデータを、見やすく整形したうえで画面上に表示を行う機能がRendererです。
SalesforceにおけるRendererの仕組みを解説

SalesforceのRendererをカスタムする

コンポーネントの表示ライフサイクル
コンポーネントの明示設定で非表示となっていない場合、コンポーネントの有効期限内で表示ライフサイクルの発生が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を快適に活用しましょう。
]]>
この記事の監修者・著者
- AWSパートナー/Salesforce認定コンサルティングパートナー 認定企業
- ITエンジニア派遣サービス事業を行っています。AWSやSalesforceなど専門領域に特化したITエンジニアが4,715名在籍し、常時100名以上のITエンジニアの即日派遣が可能です。
・2021年:AWS Japan Certification Award 2020 ライジングスター of the Year 受賞
・2022年3月:人材サービス型 AWSパートナー認定
・AWS認定資格保有者数1,154名(2024年6月現在)
・Salesforce認定コンサルティングパートナー
・Salesforce認定資格者276名在籍(2024年5月現在)
・LPIC+CCNA 認定資格者:472 名(2024年6月時点)最新の投稿
- 2024-12-27営業インタビュー情報共有の活性化の中心に。SP企画部の新たな取り組み
- 2024-07-01営業インタビュー最短で当日にご提案可能。 OPE営業の対応が早い3つの理由
- 2024-07-01営業インタビュー研修見学ツアーが高評価!「お客様のOPEに対する期待を高め、継続に貢献できればと思います。」
- 2024-07-01営業インタビュー信頼関係を構築し、エンジニアの長期就業へ
ITエンジニアの派遣を利用したい企業様へ

- 求人・転職サイトや自社採用サイトを使っているが、自社に合ったITエンジニアが応募してこない…
- すぐに採用したいが、応募がぜんぜん集まらない
こんな悩みをお持ちの採用・人事担当者の方は、
オープンアップITエンジニアをご検討ください!
オープンアップITエンジニアをご検討ください!
当社のITエンジニア派遣サービスは
- 派遣スピードが速い!(最短即日)
- 4,500名のエンジニアから貴社にマッチした人材を派遣
- 正社員雇用も可能
こんな特長があり、貴社の事業やプロジェクトに合った最適なITエンジニアを派遣可能です。
まずは下記ボタンから無料でご相談ください。