はじめに
現代のウェブやアプリでは、大量の情報を効率よくユーザーに見せることが重要です。SNSのフィード、ECサイトの商品一覧、管理画面のテーブルなどでは、大量のデータを表示する場面がよくあります。
この記事では、大量データを扱う際にどのような問題が起こるのか、またどうような表示方法がよく適用されているのかをまとめてみました。
大量データ表示で起きる問題
データがクライアントサイドに渡るまでの問題
- サーバー負荷が高くなります。
- サーバーのメモリ使用量が増えます。
- ネットワーク帯域の消費が増えます。
- ロード時間が長くなります。
クライアントサイドでのレンダリング時の問題
- メモリ使用量が増え、場合によってはブラウザがクラッシュすることもあります。
- 描画負荷が増えると、動作がカクカクし、不快感が高まります。
大量データの表示方法
「データがクライアントサイドに渡るまでの問題」を解決する方法として、「ページネーション」と「無限スクロール」の2つの方式が考えられます。
ページネーション（Pagination）
データを複数のページに分け、ユーザーが「次へ」「前へ」やページ番号で移動する方式です。
メリット
- 現在位置が分かりやすい：ページ番号や全体の量が把握できます。
- 特定ページへの移動が簡単：目的のページに直接ジャンプ可能です。
- サーバー負荷が少ない：1ページ分だけデータを送るので初期ロードが速く、リソース消費を抑えられます。
デメリット
- 前後関係の見えにくさ：別ページの情報が分断されるため、前後の情報との繋がりが見えません。
- 操作が多い：多数のコンテンツを閲覧する場合、ページ移動のクリックが必要です。
- 閲覧が途切れやすい：ページ遷移が発生するため、閲覧の流れが中断されやすいです。
無限スクロール（Infinitive Scrolling）
ユーザーがスクロールすると自動で新しいデータを読み込む方式です。
メリット
- 前後関係の把握：前後の関連性が一目で分かります。
- 操作が簡単：ページ切り替えなしで、スクロールだけでコンテンツを閲覧できます。
- シームレスな閲覧体験：途切れずコンテンツを見られ、ユーザーの滞在時間が増えやすいです。
デメリット
- 現在位置が分かりにくい：どこまで見たか、全体量の把握が難しいです。
- 特定場所への移動が困難：目的の位置に直接ジャンプしにくいです。
- ブラウザ負荷：大量の要素がDOMに追加され続けるとページが重くなり、メモリ消費が増えます。
「クライアントサイドでのレンダリング時の問題」を解決する方法として、「仮想スクロール」という方式が考えられます。
仮想スクロール（Virtual Scrolling）
ユーザーの画面に見えている部分だけレンダリングして表示する方式です。
メリット
- 高いパフォーマンス：大量データでもDOMに存在する要素が少ないため、ブラウザ負荷が低くスムーズに動作します。
- メモリ効率が良い：大量のデータでもメモリ消費を抑えられます。
デメリット
- 検索が困難：レンダリングされていないものは検索にヒットしません。
- アンカー動作に工夫が必要：アンカーリンク的な動作をさせるには少し工夫が必要です。
まとめ
今回は大量データ表示で起きる問題に応じて、各表示方法とそれぞれのメリット・デメリットについて、私見を紹介しました。何か参考になる点があれば嬉しいです。
Discussion