表示データ量が適切に制限されており、パフォーマンスが考慮されているか？¶
Type: Structure
Category: UI・通知
Audience: 設計初心者 / 設計中のチーム / レビュワー
背景・概要¶
UIに大量データを表示すると、描画パフォーマンスの低下・操作性の悪化・API負荷増などが発生しやすい
ページネーション・lazy load・キャッシュなどで段階的に表示・取得する工夫が求められる
例¶
- 一覧画面でページネーションを導入（例：50件/ページ）
- 長いリストにはスクロール時のLazy Loadや仮想スクロールを導入
- swrやreact-query等によるキャッシュ＋再検証戦略
よくある失敗例¶
- 初期ロードで全件取得し、表示されない項目までDOM化してパフォーマンス劣化
- ページネーションやソートがクライアント側でしか動作せず、大規模データに非対応
- スクロール描画のたびにAPIが再呼び出され、無限ロード地獄になる
FAQ¶
Q. ページネーションと無限スクロール、どちらがよい？
A. ユーザーの利用行動による。一般的には一覧系や業務画面ではページネーション、SNS系や非業務UIでは無限スクロールが好まれる
Q. 描画処理の最適化は必要？
A. 必須。リストが100件を超える場合はVirtualScroll（例：react-window）などの導入を検討するとよい