数千件のリストも怖くない！「仮想スクロール」でブラウザの悲鳴を防ぐ魔法のテクニック
Webサイトを作っていると、「商品一覧を全部表示したい」「過去のメッセージ履歴をずらっと並べたい」なんて要望が必ず出てきますよね。
HTMLを学びたての頃は、`
- `タグの中に`
- `をひたすら書いていけばいいと教わります。でも、それが100件、1,000件、あるいは1万件になったとき……ブラウザが急に重くなって「カクカク」と動きが悪くなった経験はありませんか？
今日は、そんな「DOM（ドム）の過食症」を防ぐための、プロが現場で使っている賢い考え方をお話しします。
—
なぜ、大量のリストはブラウザを疲れさせるのか？
まずは、想像してみてください。あなたが巨大な図書館の司書さんだとします。
100冊程度の本なら、棚に並べてすぐに見つけられますよね。でも、「1万冊の本を、たった一人で、しかも一瞬で全部机の上に並べてください」と言われたらどうでしょう？ 整理するだけで日が暮れてしまいますし、机の上はもうパンク状態です。
ブラウザもこれと全く同じことをしています。
HTMLの`
- `タグを1万個書くということは、ブラウザという「司書さん」に「この1万個の要素を全部計算して、位置を把握して、画面に描画して！」と無理難題を押し付けているようなものなんです。これを専門用語で「DOM負荷が高い」と言います。ブラウザが悲鳴を上げるのも無理はないですよね。
—
そこで登場！「仮想スクロール」という魔法
では、1万件のデータがあっても、サクサク動くサイトはどうやっているのでしょうか？
答えは簡単。「今、画面に見えている分だけ並べる」んです。
これを「仮想スクロール（Virtual Scrolling）」と呼びます。さっきの図書館の例えで言うなら、「机の上には今開いているページに関連する本だけを置いておき、他の本は必要な時にサッと差し替える」という仕組みです。
ユーザーがスクロールするたびに、画面外の古い要素を捨てて、新しい要素を読み込む。これなら、常に画面上には10個程度の要素しか存在しないので、ブラウザはいつも余裕綽々（よゆうしゃくしゃく）です。
—
実際にやってみよう！概念をコードで体感
本格的な実装にはライブラリを使うのが一般的ですが、まずは「仕組み」を理解するために、シンプルなイメージを作ってみましょう。
このコードのポイントは、`innerHTML = ''` で古いものを捨てて、新しいものだけを差し替えている点です。これだけで、ブラウザが抱える「荷物」は常に一定になります。
---
初学者がつまずきやすいポイントとアドバイス
「なるほど、スクロールに合わせて中身を入れ替えればいいんだ！」と分かると、次はこんな疑問が浮かぶかもしれません。
- 「スクロールバーの長さはどうなるの？」
→ 確かに、要素を減らすとスクロールバーが「全部読み込んだとき」の長さになりませんよね。現場では、空の`
`を巨大な高さに設定して、スクロールバーの長さを擬似的に再現する「パディングのトリック」を使います。- 「実装が難しそう…」
→ 大丈夫です！最初は `react-window` や `vue-virtual-scroller` といった、先人たちが作ってくれた素晴らしいライブラリを使うことを強くおすすめします。車輪の再発明をする必要はありません。
最後に：完璧を目指さなくていい
最初から「数千件を完璧に制御しよう！」と気負いすぎなくて大丈夫ですよ。まずは、自分のサイトが少し重いと感じたときに、「あ、これDOMを増やしすぎているのかも？」と気づくこと。その視点を持てた時点で、あなたはもう立派なフロントエンドエンジニアの卵です。
Webの世界は、こうした「見えない工夫」の積み重ねでできています。一つずつ、楽しみながら最適化のコツを掴んでいきましょう！
何か分からないことがあったら、いつでも聞いてくださいね。応援しています！
コメント