パフォーマンスガイド

Avonni のダイナミックコンポーネントは、高速性と効率性を重視して設計されています。本ガイドは、高性能なコンポーネントを構築し、設計上の選択がパフォーマンスにどのように影響するかを理解するためのベストプラクティスを提供します。目的は機能を制限することではなく、Avonni の機能を最適に活用できるよう支援することです。

一般的なパフォーマンス原則

これらの原則はすべての Avonni ダイナミックコンポーネントに当てはまります：

効率的なデータ取得

• 正確なフィルターを使用する： クエリにフィルターを適用して必要なレコードのみを取得してください。より具体的なフィルターはデータセットを小さくし、クエリを高速化します。

コンポーネント構造

• シンプルさを優先する： 複雑なレイアウトも可能ですが、よりシンプルなコンポーネント構造のほうがパフォーマンスは良好です。必要を満たす最も簡潔な設計を目指してください。

• 条件付き表示の戦略的な利用： Avonni の条件付き表示機能は、データやユーザーの操作に基づいてコンポーネントを表示・非表示にします。これにより不要な要素のレンダリングを避けられます。

ネストされたダイナミックコンポーネント：ベストプラクティス

ダイナミックコンポーネントは、他のダイナミックコンポーネント内に埋め込むことができます（ Dynamic Component コンポーネント）。これにより再利用可能な UI 要素や複雑なレイアウトが可能になります。ただし、最適なパフォーマンスのためには慎重な設計が重要です。The Dynamic Component コンポーネントはコンテナとして機能し、現在のコンポーネント内に別途定義されたダイナミックコンポーネントを表示します。

親コンポーネントと子コンポーネント間でリソースを使ってデータを渡すことができます。

データ読み込み戦略

• 親子間のデータ受け渡し： 可能な限り、 親 コンポーネントがデータを取得し、それを リソースとして子コンポーネントに渡すようにしてください。これにより、ネストごとに独立した複数のクエリを避けられます。

• 冗長な「読み込み時」クエリを避ける： もし子コンポーネントが 必ず データを取得しなければならない場合、その取得が本当に「読み込み時」である必要があるか検討してください。データ読み込みをユーザー操作や親コンポーネントのリソースの変更でトリガーできないでしょうか？

• ネストされたクエリ（適切な場合）： 階層データに対して、親子のレコードを単一の操作で効率的に取得するために Avonni の Nested Query データソースを使用します。

リアクティビティへの配慮

• 変更の影響を理解する： 親コンポーネントの変更が子コンポーネントの更新を引き起こすこと、またその逆もあることを忘れないでください。不要な更新を避けるようにインタラクションを設計してください。

• 循環依存を最小化する： コンポーネント A がコンポーネント B を更新し、それがさらにコンポーネント A を更新して無限ループを作るような状況は避けてください。

代替案

• 可能ならフラット化する： 深くネストされた構造が 必須でない場合は、条件付き表示を用いたよりフラットな構造を検討してください。

• 専門化されたコンポーネント： 複雑なデータ表示（グリッドやツリー）には、それらの目的のために設計された Avonni のコンポーネント（Data Table、Tree）を使用してください — パフォーマンス最適化が施されています。

特定コンポーネントの最適化

• データテーブル： 各行にインタラクションを 追加することは できますが、特に大規模なデータセットではパフォーマンスへの影響に注意してください。ヘッダーレベルの操作や別の UI パターンで、より少ないインタラクションで同じ結果が得られないか検討してください。多くの列を表示する場合、すべてが本当に必要か、または一部を必要に応じて表示できないか（例えば詳細パネルで、 Open Flow Panel や Open Dynamic Component Panel).

を使うなど）検討してください。

• 監視とトラブルシューティング ブラウザの開発者ツール：

• ネットワークタブなどブラウザの開発者ツールを使用してネットワークリクエストを監視してください。これにより、データ読み込みの遅さや過剰なリクエストを特定できます。 Avonni コンポーネントのドキュメント：

まとめると

まとめ