大規模リストの仮想スクロール
vue-virtual-scroller、RecycleScroller、固定アイテム高と可変アイテム高のレンダリング
「大規模リストの仮想スクロール」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
大規模なリストの問題
何千もの DOM ノードをレンダリングすると、処理が遅くなり、多くのメモリを消費します。仮想スクロールでは、ビューポートに現在表示されている項目だけをレンダリングし、スクロールに合わせて DOM ノードを再利用します。
vue-virtual-scroller のインストール
人気のあるライブラリに vue-virtual-scroller があります。インストールして、そのスタイルをインポートします。
npm install vue-virtual-scrollerコンポーネントの登録
RecycleScroller とその CSS をインポートしてから、コンポーネント内で使用します。
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";items Prop
RecycleScroller には、items prop を通じてデータ配列全体を渡します。すべての項目を一度にレンダリングすることはなく、表示範囲内の項目だけをレンダリングします。
<RecycleScroller :items="rows" />item-size Prop
item-size は、各行のピクセル単位の高さをスクローラーに伝えます。サイズが固定されていれば、表示範囲とスクロール全体の高さをすぐに計算できます。
<RecycleScroller
:items="rows"
:item-size="48"
/>key-field Prop
key-field を使って各項目に安定した識別情報を与えると、再利用されたノードをデータに正しく対応付けられます。
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>v-slot のアイテムテンプレート
デフォルトのスコープ付きスロットを使って、表示されている各項目をレンダリングします。スロットから現在の item が提供されます。
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>表示されている項目だけをレンダリングする
スクロールすると、スクローラーはビューポートに入る項目をマウントし、そこから出る項目をアンマウントします。リストがどれだけ長くても、DOM ノード数は少ないまま維持されます。
項目の高さが固定の場合と可変の場合
位置を単純な算術計算で求められるため、高さが固定されている場合が最も高速です。行の高さが異なる場合は、別の方法が必要です。
可変の高さへの対応
高さが可変の場合は、DynamicScroller と DynamicScrollerItem を使います。これらはレンダリングされた項目のサイズを測定し、位置を調整します。
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
<template v-slot="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<div>{{ item.text }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>トレードオフ
仮想スクロールを使うと、ページ内検索（Ctrl+F）、画面外の項目へのアンカーリンク、アクセシビリティなどの機能が複雑になります。リストが本当に大規模な場合にだけ使用してください。
クイックチェック
RecycleScroller は実際には何を DOM にレンダリングしますか？
まとめ
vue-virtual-scroller の RecycleScroller を使った仮想スクロールでは、表示されている項目だけをレンダリングします。items でデータを渡し、item-size と key-field を設定して、v-slot テンプレート内で各行をレンダリングします。高速化には高さを固定し、高さが可変の場合は DynamicScroller を使います。この手法は、本当に大規模なリストに限定して使用してください。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「大規模リストの仮想スクロール」レッスンは無料ですか？
はい。「大規模リストの仮想スクロール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「大規模リストの仮想スクロール」で何を学びますか？
vue-virtual-scroller、RecycleScroller、固定アイテム高と可変アイテム高のレンダリング ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「大規模リストの仮想スクロール」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。