Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
j条件付きマークアップのベストプラクティス
マークアップを条件に応じて表示する方法として、<aura:if> タグの使用をお勧めしますが、代替方法もあります。コンポーネントを設計するときは、パフォーマンスコストおよびコードの保守性を考慮します。設計上の最適な選択は、使用事例によって異なります。
<aura:if> を使用して条件に応じて要素を作成する
エラーの発生時にエラーメッセージを表示する簡単な例を見てみましょう。
1<aura:if isTrue="{!v.isError}">
2 <div>{!v.errorMessage}</div>
3</aura:if>isTrue 式の値が true に評価された場合、<div> コンポーネントとそのコンテンツのみが作成されて表示されます。isTrue 式の値が変更され、false に評価された場合、<aura:if> タグ内のすべてのコンポーネントが破棄されます。isTrue 式が再度変更され、true に評価された場合、コンポーネントが再度作成されます。
一般的なガイドラインとして、<aura:if> を使用することをお勧めします。囲まれた要素ツリーの作成と表示を条件が満たされるまで延期することで、コンポーネントを最初に迅速に読み込むことができるためです。
CSS を使用して表示を切り替える
CSS を使用して、JavaScript コードで $A.util.toggleClass(cmp, 'class') をコールすることで、マークアップの表示を切り替えることができます。
マークアップ内の要素は事前に作成されてレンダリングされますが、非表示です。例については、「マークアップの動的な表示または非表示」を参照してください。
条件付きマークアップは、使用されない場合も作成されレンダリングされます。このため、<aura:if> をお勧めします。
JavaScript でコンポーネントを動的に作成する
コンポーネントは JavaScript コードで動的に作成できます。ただし、通常、マークアップを使用するよりも、コード作成の維持とデバッグが困難になります。<aura:if> の使用を再度お勧めしますが、使用事例に合わせて最適なデザインを選択してください。