Run Fast: Ignite UI グリッドの仮想化機能を使用

仮想化の必要性

仮想化は、エンドユーザーに大量のレコードを表示する際に役立つツールです。仮想化されたグリッドは、大量のレコードバインドをサポートし、グリッドにおける高速スクロール機能と併用することでエンドユーザーに対して高い応答性を提供します。

Ignite UI igGrid は 2 種類の仮想化機能をサポートしています。

  1. 連続仮想化
  2. 固定仮想化

固定仮想化は、可視行のみがグリッドに表示されます。連続仮想化では、あらかじめ定義された行数がグリッドに表示されます。Ignite UI グリッドは、列の仮想化、行の仮想化、またはその両方を設定できます。行の仮想化は、データ行が仮想化され、列の仮想化では、データ ソースの列が仮想化されます。データソースに多数の列がある場合は、列の仮想化を有効にすることを選択できます。

このレッスンを終えることで仮想化機能が有効化されたグリッドが Angular アプリケーションに追加されます。Ignite UI for JavaScript を Angular で使用するための詳細については Ignite UI for JavaScript Angular コンポーネント ページをご覧ください。

レッスンの目的

  1. 固定仮想化を設定
  2. 連続仮想化を設定

コントロールの詳細については Ignite UI データ グリッドをご覧ください

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

  • npm install
  • npm start

npm install コマンドを実行することで全ての依存する項目がインストールされます。npm start コマンドを実行することで Angular アプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行され、グリッドが表示されます。

Setting up project with Ignite Grid

スターター プロジェクトには、大量のデータセットを使用して作成されたグリッドが含まれています。グリッドでは仮想化がまだ有効になっていないため、グリッドはすべてのレコードをレンダリングするのに時間がかかっています。さらに、すべての行を一度にレンダリングします。5000 行の場合、グリッドは 5000 行分の要素を DOM に作成しているため、アプリケーションの実行速度が遅くなり、効率が低下します。データの大規模なセットにもかかわらず、アプリケーションを高速に実行するには、グリッド上で仮想化を構成する必要があります。

また、このレッスンのスタートプロジェクトには、Angular アプリケーションで REST API を使用し、大きなデータ セットを作成するコードが含まれています。REST API とサーバー通信を使用するために、Angular は http クラスを提供します。

http クラスと Angular におけるサーバー通信についてはこちらをご覧ください。

手順 1: 固定仮想化を有効化

仮想化を有効化させるためには下記のプロパティを設定する必要があります。

  1. virtualizationMode
  2. virtualization
  3. height

仮想化を使用する場合、必ず height プロパティが必要になります。設定されていない場合は、エラーが発生します。

行と列の両方の仮想化を有効にするには、virtualization プロパティの値を true に設定します。virtualization プロパティは数値を設定することもでき、この場合はデータソース内のレコードが指定された数よりも多い場合に、仮想化が有効になります。

固定仮想化を有効化する場合は下記の設定を行います。

  • virtualization : true
  • virtulizationMode : “fixed”
  • height : ピクセルでの高さの値 (ここでは “300px”)

仮想化に必要なオプション設定を行うため、grid.component.ts ファイルを開き、getGridOptions() 関数を下記のように変更します。

getGridOptions() {
  return {
    width: "100%",
    autoGenerateColumns: false,
    height: "300px",
    virtulization: true,
    virtualizationMode: "fixed",
    columns: [
      { headerText: "ID", key: "Id", dataType: "string",width:"10%" },
      { headerText: "CLOSE", key: "Close", dataType: "number",width:"15%" },
      { headerText: "DATE", key: "Date", dataType: "string",width:"15%" },
      { headerText: "HIGH", key: "High", dataType: "number",width:"15%" },
      { headerText: "LOW", key: "Low", dataType: "number",width:"15%" },
      { headerText: "OPEN", key: "Open", dataType: "number",width:"15%" },
      { headerText: "VOLUME", key: "Volume", dataType: "number",width:"15%"}
    ]
  };
}

アプリケーションを実行し下にスクロールを行うと、固定仮想化が有効化されたグリッドを確認できます。

Step 1: Enable Fixed Virtualization

手順 2: 連続仮想化を有効化

連続仮想化を有効化する場合は下記の設定を行います。

  • rowVirtualization : true
  • virtulizationMode : “continuous”
  • height : ピクセルでの高さの値 (ここでは “300px”)

連続仮想化に必要なオプション設定を行うため、grid.component.ts ファイルを開き、getGridOptions() 関数を下記のように変更します。

getGridOptions() {
  return {
    width: "100%",
    autoGenerateColumns: false,
    height: "300px",
    rowVirtualization: true,
    virtualizationMode: "continuous",
    columns: [
      { headerText: "ID", key: "Id", dataType: "string" },
      { headerText: "CLOSE", key: "Close", dataType: "number" },
      { headerText: "DATE", key: "Date", dataType: "string" },
      { headerText: "HIGH", key: "High", dataType: "number" },
      { headerText: "LOW", key: "Low", dataType: "number" },
      { headerText: "OPEN", key: "Open", dataType: "number" },
      { headerText: "VOLUME", key: "Volume", dataType: "number" }
    ]
  };
}

アプリケーションを実行し下にスクロールを行うと、連続仮想化が有効化されたグリッドを確認できます。

Step 2: Enable Continuous Virtualization

連続仮想化では、データソース内の行の一部だけが DOM に表示されます。ユーザーがグリッド上で上下にスクロールすると、仮想化機能によって、現在の行が行の次/前の部分を表示するのに十分であるかどうかが判断されます。新しい行が必要な場合は、行の現在の部分が削除され、新しい行の部分が作成されます。

結びに

業務アプリケーションでは、何千ものレコードをグリッドにレンダリングする必要があります。アプリケーションが何千ものレコードをレンダリングしている場合においても、グリッドはユーザーが急にスクロールした際に反応しなければなりません。これを実現するには、グリッドの仮想化機能を有効にします。このレッスンでは、固定および継続的な仮想化のためのグリッドの構成について学習しました。