コンポーネントの動的な作成

クライアント側とサーバ側のコンポーネントの作成

$A.createComponent() および $A.createComponents() メソッドでは、クライアント側 (同期) とサーバ側 (非同期) 両方のコンポーネントの作成がサポートされています。パフォーマンス上やその他の理由により、クライアント側の作成をお勧めします。

$A.createComponent() を使用するには、コンポーネント定義が必要です。クライアントにまだ定義がない場合、フレームワークがサーバとの往復を行い、定義を取得します。作成するコンポーネントの <aura:dependency> タグを、$A.createComponent() をコールするコンポーネントのマークアップに追加することで、このサーバとの往復を回避できます。このタグにより、クライアントで常にコンポーネント定義が使用可能になります。ただしトレードオフとして、定義は必要なときだけでなく常にダウンロードされます。このパフォーマンスのトレードオフは、使用事例によって異なります。

createComponent() または createComponents() への単一のコールによって、多数のコンポーネントが作成される可能性があります。このコールでは、要求されたコンポーネントとそのすべての子コンポーネントが作成されます。パフォーマンス上の考慮事項に加えて、サーバ側のコンポーネント作成には、1 つの要求で作成可能なコンポーネント数が 10,000 個という制限があります。この制限に達する場合は、代わりにクライアント側でコンポーネントが作成されるように、<aura:dependency> タグでコンポーネントの連動関係を明示的に宣言するか、連動要素を事前に読み込みます。

クライアント側でのコンポーネント作成には制限はありません。

構文

構文は次のとおりです。

1. type — 作成するコンポーネントの種類 ("lightning:button" など)。
2. attributes — コンポーネントの属性の対応付け。ローカル ID (aura:id) を含みます。
3. callback(cmp, status, errorMessage) — コンポーネントの作成後に呼び出すコールバック。

   コンポーネントの作成は、サーバとの往復が必要な場合は非同期です。コールバックでは新規コンポーネントのみを使用するなど、適切な非同期処理を行ってください。

   ヒント

   コールバックには 3 つのパラメータがあります。

   1. cmp — 作成されたコンポーネント。このパラメータを作成するコンポーネントのボディへの追加など、新しいコンポーネントによって何らかの動作を実行することができます。エラーが生じた場合は、cmp が null になります。
   2. status — コールの状況。有効な値は、SUCCESS、INCOMPLETE、ERROR です。コンポーネントを使用する前に必ず状況が SUCCESS であることを確認します。
   3. errorMessage — 状況が ERROR の場合のエラーメッセージ。

例

動的に作成されたボタンを次のサンプルコンポーネントに追加してみましょう。

クライアント側のコントローラは $A.createComponent() をコールして、ローカル ID (aura:id) と onclick 属性のハンドラが設定された lightning:button を作成します。function(newButton, ...) コールバックによって、c:createComponent の body にボタンが追加されます。$A.createComponent() によって動的に作成された newButton は、1 つ目の引数としてコールバックに渡されます。

ネストしたコンポーネントの作成

別のコンポーネントのボディにコンポーネントを動的に作成するには、$A.createComponents() を使用してコンポーネントを作成します。関数コールバックで、外部コンポーネントの body に内部コンポーネントを設定して、コンポーネントをネストします。次の例では、ui:message コンポーネントの body に ui:outputText コンポーネントを作成します。

動的に作成されたコンポーネントの廃棄

マークアップで宣言されたコンポーネントが使用されなくなると、フレームワークで自動的に廃棄され、メモリが解放されます。

コンポーネントが JavaScript で動的に作成され、そのコンポーネントがファセット (v.body または Aura.Component[] 種別の他の属性) に追加されていない場合は、メモリリークを回避するために、Component.destroy() を使用して手動で廃棄する必要があります。