なぜ必要か
見える行だけ描き再利用します(Android Developers, n.d.; web.dev, n.d.; Miller, 1968)。無限スクロールやCore Web Vitalsに有効。
実装の注意
高さを推定し、余裕分を確保、遅延読み込みと併用(Card et al., 1983; MDN, n.d.)。
アクセシビリティと検索
aria-setsize等で件数を伝え(W3C WAI, n.d.)、アプリ内検索を用意し、フォーカスを守ります(W3C, 2023)。
よくある質問
- 何件から必要?
- 数百件以上か、カクつく時に計測して。
- ページ内検索は?
- 描画外は見つからないのでアプリ内検索を。
出典確認日:2026-10-27
参考文献
- web.dev. (n.d.). Virtualize large lists with react-window. 見える行だけ描く方法です。
- Android Developers. (n.d.). Create dynamic lists with RecyclerView. ビュー再利用です。
- MDN Web Docs. (n.d.). content-visibility. 画面外描画を省くCSSです。
- W3C WAI. (n.d.). Feed pattern. ARIA Authoring Practices Guide. 件数と位置の通知です。
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 応答時間の限界です。
- Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 知覚時間モデルです。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. フォーカス順の基準です。
