Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Angular CDK を使用して大規模なリストを仮想化する

仮想スクロールを実装して、大きなリストの応答性を高めます。

Stephen Fluin

スクロールリストは、お気に入りのソーシャルメディアサイトで無限にスクロールするフィードを閲覧する場合でも、エンタープライズダッシュボードを操作する場合でも、現在最も一般的な UI パターンの 1 つです。スクロールリストが非常に長くなると（数百、数千、数十万のアイテム）、アプリケーションのパフォーマンスが低下する可能性があります。

大きなリストは、アプリケーションがすべてのデータを事前に読み込んでレンダリングする必要があるため、読み込みに時間がかかることがあります。また、リスト内の各アイテムにリッチデータ、メディア、機能を含めることができるため、レンダリングと操作に時間がかかることもあります。

ユーザーがページを読み込んだりスクロールしたりする際に問題が発生し、不満を感じてページを離れる可能性があります。

Component Dev Kit を使用した Angular の仮想スクロール

仮想スクロールは、このようなスケールの問題を解決するために使用される主要な手法です。仮想スクロールでは、適切なサイズのスクロールバーを提供し、アプリケーションがリスト全体をメモリに保持したり、ページにレンダリングしたりしなくてもリストを操作できるようにすることで、非常に大きなリストであるかのような印象を与えます。

Angular では、仮想スクロールは Component Dev Kit（CDK）によって提供されます。リストの反復処理の方法を変更し、いくつかの追加の構成パラメータを指定することで、CDK の仮想スクロールはリストの仮想レンダリングを自動的に管理し、ページのパフォーマンスと応答性を向上させます。

リスト全体を一度にレンダリングするのではなく、画面に収まるアイテムのサブセット（と小さなバッファ）のみがレンダリングされます。ユーザーが操作すると、アイテムの新しいサブセットが計算されてレンダリングされ、必要に応じて既存の DOM が再利用されます。

この投稿の残りの部分では、基本的な仮想スクロールの設定方法について説明します。完全な動作例は、こちらのサンプルアプリで確認できます。

仮想スクロールを設定する

まず、任意のパッケージマネージャを使用して @angular/cdk をインストールしていることを確認します。npm を使用してインストールするには、ターミナルで次のコマンドを実行します。

npm install --save @angular/cdk

アプリに `ScrollingModule` を追加する

CDK をインストールしたら、仮想スクロールを処理する ScrollingModule を @angular/cdk/scrolling パッケージからインポートします。次に、モジュールの imports 配列に追加します。

import {ScrollingModule} from '@angular/cdk/scrolling';

...
imports: [
  ScrollingModule
...
]
...

ビューポートを作成する

パッケージの動作を確認するには、0 ～ 99,999 の数値のリストを含むコンポーネントを作成します。

@Component({
  template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

ブラウザがアプリをレンダリングする際、10 万個の個々の <div> 要素をレンダリングする必要があります。基本的なテキストノードの場合は問題ありませんが、繰り返されるテンプレートが複雑になると、スケーリングがうまくいかず、イベントリスナーが大幅に増加します。

仮想スクロールを追加してこのような問題を回避するには、リストを <cdk-virtual-scroll-viewport> 要素でラップしてビューポートを作成する必要があります。

@Component({
  template: `<cdk-virtual-scroll-viewport>
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

ScrollingModule はリストのサブセットを動的にレンダリングするため、標準の CSS を使用してビューポートの高さを指定する必要があります。また、itemSize を指定して、ビューポートにコンテンツのヒントを与える必要があります。このモジュールは、この情報を使用して、特定の時点で DOM に保持するアイテムの数と、適切なサイズのスクロールバーをレンダリングする方法を決定します。

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

最後に、*ngFor を *cdkVirtualFor に変換します。

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *cdkVirtualFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

ビューポートは、リスト全体を反復処理するのではなく、ユーザーに適したリストのサブセットを動的に識別して反復処理します。ユーザーがページを読み込むと、CDK は画面に収まるリストのサブセット（と少しのバッファ）をレンダリングします。ビューポート内のスクロールイベントは、リストの適切なサブセットを読み込んでレンダリングします。

ユーザーがスクロールすると、CDK がリストのサブセットをレンダリングします。

さらに詳しく

CDK の仮想スクロール機能は、この基本的な例よりもはるかに優れています。サンプルアプリでは、リスト全体がメモリに格納されていましたが、より複雑なアプリケーションでは、リストをオンデマンドで取得できます。 ScrollingModule のその他の機能と cdkVirtualOf ディレクティブについて詳しくは、Scrolling の CDK ドキュメントをご覧ください。

Angular CDK を使用して大規模なリストを仮想化する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。