Lightning コンポーネント開発者ガイド
j条件付きマークアップのベストプラクティス
マークアップを条件に応じて表示するときは、<aura:if> または <aura:renderIf> タグを使用します。または、JavaScript ロジックでマークアップを条件に応じて設定することもできます。コンポーネントを設計するときは、パフォーマンスコストおよびコードの保守性を考慮します。設計上の最適な選択は、使用事例によって異なります。
<aura:if> か <aura:renderIf> か
<aura:if> は、そのボディまたは else 属性のマークアップのみを作成して表示するため、<aura:renderIf> よりも軽量です。条件付きマークアップが必要なときは、常にまず <aura:if> を試します。
<aura:renderIf> は、true と false の両方の状態に対してマークアップを表示する場合にのみ使用を検討します。最初に表示されないコンポーネントを作成するには、サーバに往復処理を要求することになります。
<aura:if> と <aura:renderIf> の簡単な比較を次に示します。
| <aura:if> | <aura:renderIf> | |
|---|---|---|
| 表示 | 1 つのブランチのみを作成して表示 | 両方のブランチを作成するが 1 つのみ表示 |
| 条件の切り替え | 現在のブランチを非表示にして破棄。他のブランチを作成して表示。 | 現在のブランチを非表示にして他のブランチを表示 |
| 空のブランチ | DOM プレースホルダを作成 | DOM プレースホルダを作成 |
条件付きマークアップの代替方法の検討
<aura:if> または <aura:renderIf> の代替方法を検討すべきいくつかの使用事例を次に示します。
- 表示を切り替える
- <aura:if> または <aura:renderIf> タグを使用して、マークアップの表示を切り替えないでください。代わりに、CSS を使用します。「マークアップの動的な表示または非表示��を参照してください。
- 条件付きロジックをネストするか、反復内で条件付きロジックを使用する必要がある
- <aura:if> または <aura:renderIf> タグを使用すると、多数のコンポーネントが作成され、パフォーマンスが劣化する可能性があります。また、マークアップで条件付きロジックを過度に使用すると、マークアップが雑然として管理しにくくなることがあります。
- 代わりに、init イベントハンドラで JavaScript ロジックを使用するなどの代替方法を検討します。「コンポーネントの初期化時のアクションの呼び出し」を参照してください。