🐥
表示データ量が適切に制限されており、パフォーマンスが考慮されているか？
表示データ量が適切に制限されており、パフォーマンスが考慮されているか？
背景・概要
UIに大量データを表示すると、描画パフォーマンスの低下・操作性の悪化・API負荷増などが発生しやすい
ページネーション・lazy load・キャッシュなどで段階的に表示・取得する工夫が求められる
例
- 一覧画面でページネーションを導入（例：50件/ページ）
- 長いリストにはスクロール時のLazy Loadや仮想スクロールを導入
- swrやreact-query等によるキャッシュ＋再検証戦略
よくある失敗例
- 初期ロードで全件取得し、表示されない項目までDOM化してパフォーマンス劣化
- ページネーションやソートがクライアント側でしか動作せず、大規模データに非対応
- スクロール描画のたびにAPIが再呼び出され、無限ロード地獄になる
FAQ
Q. ページネーションと無限スクロール、どちらがよい？
A. ユーザーの利用行動による。一般的には一覧系や業務画面ではページネーション、SNS系や非業務UIでは無限スクロールが好まれる
Q. 描画処理の最適化は必要？
A. 必須。リストが100件を超える場合はVirtualScroll（例：react-window）などの導入を検討するとよい
関連観点
- キャッシュ戦略が適切に考慮されているか？
- 高負荷時の挙動を確認する負荷テストが計画されているか？
- データベースのインデックス戦略が適切で、クエリの最適化がされているか？
- API のレスポンス時間が適切か？
📘 本記事は SaaS設計レビュー観点チェックリスト（2025年版） の一部です。
設計観点カテゴリ：🎨 UI・通知
レベル：Structure（構造・原則・責務整理レベル）
推奨読者：設計初心者 / 設計中のチーム / レビュワー
🧭 他の観点もまとめて読みたい方はこちらからどうぞ。
Discussion