Blazorで一定間隔で処理を実行するタイマーを作成 -

はじめに

Blazorは、Webアプリケーション開発において、C#と.NETを使用してインタラクティブなUIを構築できるフレームワークです。今回は、Blazorを利用して、一定間隔で特定の処理を繰り返すタイマー機能の実装方法について解説します。この機能は、リアルタイムでデータを更新するダッシュボード、カウンター、ポーリング処理など、多くのシナリオで役立ちます。サンプルコードを通じて、簡単なカウンターを実装する方法を見ていきましょう。

サンプルコード

では、さっそくタイマー処理を実行しましょう。

HTMLマークアップ

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>

この部分は、BlazorアプリケーションのUIを構築するためのHTMLマークアップです。<p>タグ内で@currentCount変数の値を表示しています。この@currentCount変数を、後述のコードで1秒ごとにカウントアップしていきます。

C#コード

@code {
    private int currentCount = 0;
    private System.Threading.Timer timer = default!;

    protected override Task OnInitializedAsync()
    {
        //１秒おきに処理を実行
        timer = new System.Threading.Timer(async (object? stateInfo) =>
        {
            await InvokeAsync(() =>
            {
                currentCount += 1;
                StateHasChanged();
            });
        }, new System.Threading.AutoResetEvent(false), 1000, 1000);

        return base.OnInitializedAsync();
    }
}

このコードブロックでは、BlazorコンポーネントのライフサイクルメソッドOnInitializedAsyncをオーバーライドしています。このメソッド内で、System.Threading.Timerを使用して一定間隔で処理を実行するタイマーを設定しています。

• currentCountはカウンターの現在値を保持する変数です。
• timer変数は、一定間隔で実行されるタイマーのインスタンスを保持します。Timerのコンストラクタには、タイマーがトリガーされるたびに実行されるコールバック関数、タイマーの初期状態、タイマーが最初にトリガーされるまでの遅延時間（ミリ秒）、タイマーの間隔（ミリ秒）が指定されています。

タイマーのコールバック関数内でInvokeAsyncメソッドを使用しています。これは、BlazorがUIを安全に更新できるように、UIスレッド上で非同期操作をスケジュールするためのものです。currentCountの値を増加させた後、StateHasChangedメソッドを呼び出してBlazorにUIの再描画を指示しています。

このサンプルコードを利用することで、Blazorアプリケーション内で簡単にタイマーによる定期的な処理を実装することができます。UIの更新やバックグラウンド処理に応じて、このコードをカスタマイズし、より複雑なシナリオに対応させることも可能です。