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

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

$A.createComponent() メソッドを使用して、クライアント側の JavaScript コードでコンポーネントを動的に作成します。複数のコンポーネントを作成するには、$A.createComponents() を使用します。

廃止された $A.newCmp() および $A.newCmpAsync() メソッドの代わりに、createComponent() メソッドを使用します。

メモ

構文は次のとおりです。

  1. type — 作成するコンポーネントの種類 ("ui:button" など)。
  2. attributes — コンポーネントの属性の対応付け。ローカル ID (aura:id) を含みます。
  3. callback — コンポーネントの作成後に呼び出すコールバック。新しいコンポーネントがパラメータとしてコールバックに渡されます。

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

クライアント側のコントローラは、$A.createComponent() をコールして、press イベントのローカル ID とハンドラを含むボタンを作成します。c:createComponentbody にボタンが追加されます。

c:createComponent には、{!v.body} 式が含まれています。cmp.set("v.body", ...) を使用してコンポーネントのボディを設定するときは、コンポーネントマークアップに {!v.body} を明示的に含める必要があります。

メモ

作成した新しいボタンを取得するには、body[0] を使用します。

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

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

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

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

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

サーバとの往復の回避

createComponent() メソッドおよび createComponents() メソッドでは、クライアント側のコンポーネントの作成とサーバ側のコンポーネントの作成の両方がサポートされています。サーバ側の連動関係が見つからない場合、メソッドはクライアント側で実行されます。

コントローラアクションがコールされるのはコンポーネントが作成された後のみであるため、コンポーネントの作成では、サーバ側のコントローラはサーバ側の連動関係にはなりません。

サーバ側の連動関係があるコンポーネントは、そのサーバで作成されます。サーバ側の連動関係がなく、連動関係の事前の読み込みまたは宣言によってその定義がすでにクライアントに存在している場合、サーバコールは実行されません。

クライアント側でのコンポーネント作成には制限はありません。1 回のサーバ要求で最大 10,000 個のコンポーネントを作成できます。この制限に達する場合は、クライアント側のマークアップまたは JavaScript で $A.createComponent() または $A.createComponents() を使用してコンポーネントを作成していることを確認します。JavaScript コードでコンポーネントの作成のためのサーバとの往復を避けるには、コンポーネントのマークアップで <aura:dependency> タグを追加し、連動関係についてフレームワークに明示的に指示します。

ヒント

このフレームワークでは、コンポーネントなどの定義間の連動関係が自動的に追跡されます。ただし、フレームワークで簡単に検出できない連動関係もあります。たとえば、コンポーネントのマークアップで直接参照されていないコンポーネントを動的に作成する場合などがこれに該当します。こうした動的な連動関係をフレームワークが把握できるようにするには、<aura:dependency> タグを使用します。これにより、必要に応じてコンポーネントとその連動関係がクライアントに送信されます。

コンポーネントの作成にサーバ要求が必要かどうかは、最上位コンポーネントで判別されます。

最上位コンポーネントにサーバ側の連動関係はないが、ネストされた内部コンポーネントに連動関係があるコンポーネントの作成は、現在サポートされていません。

メモ