【Blazor】 Virtualizeコンポーネントの使い方

表示するデータを用意します。 今回はProductクラスを定義し、そのクラスのコレクションを用いながら、検証していきます。

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Virtualizeコンポーネントを使っていきます。 まずは使用例をみていきましょう。

@page "/"
@using Blazor_VirtualizeComponent.Data;

<div class="container">

    <div class="row">

        <div class="col-6">

            @* 仮想化コンポーネント *@
            <Virtualize Context="product" Items="@products">
                <div>@product.Name - $@product.Price</div>
            </Virtualize>

        </div>

        <div class="col-6">

            @* 仮想化なし *@
            @foreach (var product in products)
            {
                <div>@product.Name - $@product.Price</div>
            }

        </div>

    </div>

</div>

@code {

    private List<Product> products;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        products = new();
        for (int i = 0; i < 1000; i++)
        {
            products.Add(new() { Name = $"ProductName{i}", Price = 10 * i });
        }
    }

}

Virtualizeコンポーネントのパラメータを指定します。 Contextには、Virtualizeコンポーネント内でコレクションの要素にアクセスするための変数名を設定します。 Itemsには表示したいデータのコレクションproductsを指定します。 今回は仮想化コンポーネントの特徴を分かりやすくするため、左列に仮想化コンポーネント、右列に仮想化なしの状態を表示しています。

それでは実行してみましょう。 スクロールして比較してみると、左側の仮想化コンポーネントでは常時更新されている様子が確認できると思います。

データベースから大量データを取得する場合など、 表示に時間がかかる処理を行うパターンがほとんどだと思います。 ただし、取得処理中にコンポーネントに何も表示されていないと、ユーザーが違和感を感じてしまいます。 そのため、読み込み中の場合には、[読み込み中・・・]という表示が出るように、 コードを変更していきます。

@page "/"
@using Blazor_VirtualizeComponent.Data

<Virtualize Context="product" ItemsProvider="LoadProducts">
    <ItemContent>
        <div>@product.Name - $@product.Price</div>
    </ItemContent>
    <Placeholder>
        <div>読み込み中...</div>
    </Placeholder>
</Virtualize>

@code {

    /// <summary>
    /// 製品情報読み込み
    /// </summary>
    /// <param name="request"></param>
    /// <returns></returns>
    private async ValueTask<ItemsProviderResult<Product>> LoadProducts(ItemsProviderRequest request)
    {
        var startIndex = request.StartIndex;
        var count = request.Count;
        var items = new List<Product>();

        // 要求されたデータ範囲に基づいて製品リストを生成
        for (int i = startIndex; i < startIndex + count && i < 1000; i++)
        {
            items.Add(new Product { Name = $"ProductName{i}", Price = 10 * i });
        }

        await Task.Delay(500);

        // 第二引数に、実際の全製品数を指定することで、スクロールの終端を正しく制御する(1000は仮)
        return new ItemsProviderResult<Product>(items, 1000);
    }

}

変更前のVirtualizeコンポーネントでは、Itemsというパラメータを使用していましたが、 今回は初期化の段階において、値を全て取得するわけではありません。 画面の表示範囲が変更されたら、その範囲のみデータを取得するようにしていきます。 そのような仕様にするには、ItemsProviderというパラメータを使用します。 このパラメータには、表示範囲に応じた値取得ロジックを設定します。 値取得ロジックは、引数であるItemsProviderRequestに表示範囲の開始インデックスや表示される項目数などの情報が組み込まれていますので、 それをもとに実装していきます。 値取得ロジックを作成したら、Virtualizeコンポーネントの子コンポーネントを指定します。 ItemContentには実際のデータの表示内容を定義し、 Placeholderには読み込み中に表示する内容を定義します。

それでは実行してみましょう。 画面の表示範囲が変わると、データ取得中の場合は[読み込み中...]と表示されることが確認できます。

今回は仮想化コンポーネントについて解説しました。 DBから大量のデータを取得する場合に便利だと思いますので、是非使ってみてください。