数千件のリストも怖くない！「仮想スクロール」でブラウザを軽くする魔法のレシピ
こんにちは！フロントエンド開発の世界へようこそ。
Webサイトを作っていると、最初は数件のメニュー項目だったリストが、開発が進むうちに「商品一覧」や「チャット履歴」のように、数千件、ときには数万件という膨大なデータに膨れ上がることってありますよね。
「とりあえず全部HTMLで出力しておけばいいよね！」と、`
- `タグの中に`
- `を何千個も詰め込んでみたら……あら不思議。スクロールするたびにカクカクして、ブラウザが重くなってしまった経験はありませんか？
今日は、そんな「DOM（ドム）の重荷」を賢く解決する「仮想スクロール（Virtual Scrolling）」というテクニックについて、難しい理論は抜きにして、身近な例え話を交えながらお話しします。
—
なぜ、リストが長くなると重くなるの？
まず、ブラウザが何をしているのかを想像してみましょう。
Webブラウザは、HTMLで書かれたすべての要素（` - `など）を、自分の中の「メモリ」という場所に一つひとつ丁寧に配置して、その形や色を計算しています。
もし1,000件のリストがあったら、ブラウザは「1,000個分の場所を確保して、1,000個分の計算」を一生懸命やってくれるんです。でも、私たちの画面に映っているのは、実際にはせいぜい10〜20件程度ですよね？
「画面に見えていない残り980件の計算を、今すぐやる必要はある？」
これが、パフォーマンス改善の第一歩です。
—
仮想スクロールって、どんな仕組み？
イメージしてみてください。あなたは巨大な図書館の司書さんです。
本棚には10,000冊の本が並んでいますが、一度に机の上に置けるのは5冊だけ。1. 「今、開いているページ（画面に見えている範囲）」の5冊だけを机に置く。
2. スクロールして新しいページが見えたら、不要になった本を片付けて、新しい本を置く。これなら、10,000冊あっても、机の上は常にスッキリ。これが「仮想スクロール」の考え方です。「表示されている分だけをDOMとして生成し、スクロールに合わせて中身を入れ替える」という、まさに魔法のような仕組みですね。
—
実装への第一歩：シンプルに考えてみよう
仮想スクロールをゼロから作るのはとても高度な技術ですが、考え方の基本は「今のスクロール位置に合わせて、表示するデータを絞り込む」だけです。
以下のコードは、JavaScriptを使って「今、画面に表示すべき要素だけをリストにする」という仕組みを、ごくシンプルに表現したものです。
// 表示したい全データ（仮に1000件あるとします）
const allItems = Array.from({ length: 1000 }, (_, i) => `アイテム番号 ${i + 1}`);// 画面に表示するリストの場所（HTMLのulタグなど）
const listContainer = document.getElementById(‘my-list’);// スクロールイベントを監視します
window.addEventListener(‘scroll’, () => {
// 1. 今、画面のどこを見ているか計算する（簡易的な例）
const scrollTop = window.scrollY;
const startIndex = Math.floor(scrollTop / 50); // 1項目50pxと仮定// 2. 表示したい範囲のデータだけを抜き出す（10個分だけ！）
const visibleItems = allItems.slice(startIndex, startIndex + 10);// 3. リストを書き換える
listContainer.innerHTML = visibleItems
.map(item => ` - ${item}
- `を1,000個並べる」という力技から、「今見えている分だけをHTMLに書く」という意識に変えるだけで、あなたの作るWebサイトは劇的に軽やかになります。
最近では、`React Virtualized`や`TanStack Virtual`といった、この複雑な計算を裏で肩代わりしてくれる便利なライブラリもたくさんあります。まずはそういった道具に頼るのも、立派なエンジニアの第一歩です。
今日のまとめ：
- 全部のDOMを生成すると、ブラウザは疲れてしまう。
- 仮想スクロールは、画面に見えている範囲だけを切り出す「省エネ術」。
- まずは「今見えているものだけで十分」と考えることが、パフォーマンス向上の鍵！
技術は魔法ではありません。一つひとつ、仕組みを紐解けば、必ず納得できる場所に辿り着けます。焦らず、楽しみながらコーディングを続けていきましょうね。
また次の記事でお会いしましょう！応援しています！
`)
.join(”);
});
※実際には、スクロール位置を調整して「ガクつき」を防ぐための高度な計算が必要ですが、まずは「全部出さずに、必要な分だけを計算して差し替える」という心意気を感じ取ってみてください！
—
大切なのは「完璧」よりも「体験」
最初は難しく感じるかもしれませんが、大丈夫です。まずは「`
コメント