この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

カスタムレンダラの作成

このフレームワークの表示サービスは、メモリ内のコンポーネントの状態を取得し、コンポーネントによって所有される DOM 要素の作成と管理を行います。コンポーネントのフレームワークで作成された DOM 要素を変更する場合、コンポーネントのレンダラで DOM 要素を変更できます。このようにしないと、フレームワークはコンポーネントの表示時に変更を無効にします。

DOM は、HTML および XML ドキュメントのオブジェクトを表したり、操作したりする、言語に依存しないモデルです。コンポーネントの表示はフレームワークによって自動的に行われるため、コンポーネントのデフォルトの表示動作をカスタマイズする必要がなければ、表示に関して詳細に把握する必要はありません。

カスタムレンダラを作成する代替策よりも、render イベントを処理する方が望ましく簡単です。

メモ

基本コンポーネントの表示

フレームワークの基本コンポーネントは aura:component です。どのコンポーネントもこの基本コンポーネントを拡張します。

aura:component のレンダラは、componentRenderer.js にあります。このレンダラには、表示サイクルおよび再表示サイクルの 4 つのフェーズの基本実装があります。

render()
rerender()
afterRender()
unrender()

フレームワークでは、これらの関数が表示ライフサイクルおよび再表示ライフサイクルの一部としてコールされます。これらの関数についてはすぐに学習します。基本表示関数は、カスタムレンダラで上書きできます。

表示ライフサイクル

表示ライフサイクルは、コンポーネントが明示的に非表示にされない限りコンポーネントの有効期間内に 1 回発生します。コンポーネントを作成すると、次の処理が行われます。

フレームワークによって init イベントが起動され、コンポーネントを構��してから表示するまでの間にコンポーネントを更新したり、イベントを起動したりできます。
render() メソッドがコールされてコンポーネントのボディが表示されます。
afterRender() メソッドがコールされて、フレームワークの表示サービスによって DOM 要素が挿入されたら、DOM ツリーを操作できます。
フレームワークの表示サービスによって DOM 要素が挿入されたら、フレームワークによって render イベントが起動され、DOM ツリーを操作できるようになります。render イベントの処理は、カスタムレンダラの作成や afterRender() の上書きよりも優先されます。

再表示ライフサイクル

再表示ライフサイクルにより、基盤となるデータが変更されたときにコンポーネントの再表示が自動的に処理されます。一般的なシーケンスを次に示します。

ブラウザイベントによって 1 つの以上の Lightning イベントがトリガされます。
各 Lightning イベントによって、データを更新できる 1 つ以上のアクションがトリガされます。更新されたデータで複数のイベントが起動される場合もあります。
表示サービスによって、起動されたイベントのスタックが追跡されます。
フレームワークによって、各コンポーネントの rerender() メソッドがコールされることで、更新されたデータを所有するすべてのコンポーネントが再表示されます。
フレームワークによって render イベントが起動され、コンポーネントが再表示された後に DOM ツリーを操作できます。カスタムレンダラの作成と rerender() の上書きには、render イベントの処理をお勧めします。

コンポーネントが有効で明示的に非表示にされない限り、基盤となるデータが変更されると常にコンポーネント再表示ライフサイクルが繰り返されます。

詳細は、「表示ライフサイクル中に起動されたイベント」を参照してください。

カスタムレンダラ

通常はカスタムレンダラを作成する必要はありませんが、フレームワークの表示サービスによって DOM 要素が挿入されたら、DOM ツリーを操作する場合に役立ちます。表示動作をカスタマイズする際に、マークアップでのカスタマイズや、init イベントを使用したカスタマイズができない場合、クライアント側レンダラの作成が可能です。

レンダラファイルは、コンポーネントのバンドルの一部で、<componentName>Renderer.js という命名規則に従っていれば自動的に結び付けられます。たとえば、sample.cmp のレンダラ名は sampleRenderer.js の形式になります。

表示をカスタマイズする場合、次のガイドラインが重要です。

コンポーネントの一部である DOM 要素のみを変更してください。親コンポーネントからアクセスする場合でも、別のコンポーネントにアクセスしてその DOM 要素を変更すると、コンポーネントのカプセル化が壊れるため、このような行為は避けてください。
新しい表示サイクルがトリガされる可能性があるため、イベントを起動しないでください。代わりに init イベントを使用できます。
新しい表示サイクルがトリガされる可能性があるため、属性値を他のコンポーネントに設定しないでください。
UI の多くの懸念事項 (位置設定など) を CSS に移動します。

メモ

コンポーネントの表示のカスタマイズ

表示をカスタマイズするには、コンポーネントのレンダラで render() 関数を作成して、基本 render() 関数を上書きします。これにより、DOM が更新されます。

render() 関数では、DOM ノードや DOM ノードの配列が返されるか、何も返されません。HTML の基本コンポーネントでは、コンポーネントを表示するときに DOM ノードが必要になります。

通常、カスタム表示コードを追加する前に render() 関数から superRender() をコールして、デフォルトの表示を拡張します。superRender() をコールすると、マークアップで指定された DOM ノードが作成されます。

次のコードは、カスタム render() 関数の概要を示します。

1render : function(cmp, helper) {
2    var ret = this.superRender();
3    // do custom rendering here
4    return ret;
5},

コンポーネントの再表示

イベントが起動されると、影響を受けるコンポーネントでデータを変更して rerender() をコールするアクションがトリガされます。rerender() 関数では、最後の表示以降の他のコンポーネントに対する更新に基づいて、そのコンポーネント自体を更新できます。この関数では、値は返されません。

コンポーネントのデータを更新すると、フレームワークによって自動的に rerender() がコールされます。

通常、カスタム再表示コードを追加する前に renderer() 関数から superRerender() をコールして、デフォルトの再表示を拡張します。superRerender() をコールすると、body 属性のコンポーネントに再表示がチェーニングされます。

次のコードは、カスタム rerender() 関数の概要を示します。

1rerender : function(cmp, helper){
2    this.superRerender();
3    // do custom rerendering here
4}

表示後の DOM へのアクセス

フレームワークの表示サービスによって DOM 要素が挿入されたら、afterRender() 関数で DOM ツリーを操作できます。表示ライフサイクルで最後のコールは必要ありません。render() の後にコールされるだけで、値は返されません。

通常、カスタムコードを追加する前に superAfterRender() 関数をコールして、表示の後にデフォルトを拡張します。

次のコードは、カスタム afterRender() 関数の概要を示します。

1afterRender: function (component, helper) {
2    this.superAfterRender();
3    // interact with the DOM here
4},

コンポーネントの非表示

基本 unrender() 関数では、コンポーネントの render() 関数によって表示されているすべての DOM ノードが削除されます。この関数は、コンポーネントが破棄されると、フレームワークによってコールされます。この動作をカスタマイズするには、コンポーネントのレンダラで unrender() を上書きします。このメソッドは、フレームワークに対してネイティブでないサードパーティライブラリを操作している場合に便利です。

通常、カスタムコードを追加する前に unrender() 関数から superUnrender() をコールして、デフォルトの非表示を拡張します。

次のコードは、カスタム unrender() 関数の概要を示します。

1unrender: function () {
2    this.superUnrender();
3    // do custom unrendering here
4}

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)