【Blazor】 タイマーを使ったコンポーネント

System.Timers.Timerクラスは、一定の時間間隔でイベントを発生させるためのタイマー機能を提供するクラスです。 このタイマーはサーバサイドアプリでも利用することができます。

このタイマーを使うためには@using System.Timersを記述する必要があります。

@* この記述が必要 *@
@using System.Timers

今回はこのタイマーを利用したサンプルを見ていきましょう。

今回は、1秒ごとに色が変化するカラーボックスを作成します。 以下は全体のソースコードになります。

@page "/use-timer"
@using System.Timers

<div class="color-box" style="background-color: @currentColor;">
    This box changes color every 1 seconds.
</div>

@code {
    /// <summary>
    /// 現在の背景色
    /// </summary>
    private string currentColor = "red";

    /// <summary>
    /// 色の配列
    /// </summary>
    private readonly string[] colors = { "red", "green", "blue", "yellow", "purple", "orange" };

    /// <summary>
    /// 現在の色のインデックス
    /// </summary>
    private int colorIndex = 0;

    /// <summary>
    /// タイマー
    /// </summary>
    private System.Timers.Timer? colorChangeTimer;

    /// <summary>
    /// 初期化
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        InitializeTimer();
    }

    /// <summary>
    /// タイマー初期化
    /// </summary>
    private void InitializeTimer()
    {
        colorChangeTimer = new System.Timers.Timer(1000);
        colorChangeTimer.Elapsed += async (object? sender, ElapsedEventArgs e) =>
        {
            await OnColorChangeAsync(sender, e);
        };
        colorChangeTimer.Start();
    }

    /// <summary>
    /// 色を変化させる
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private async Task OnColorChangeAsync(object? sender, ElapsedEventArgs e)
    {
        colorIndex = (colorIndex + 1) % colors.Length;
        currentColor = colors[colorIndex];
        await InvokeAsync(StateHasChanged);
    }

    /// <summary>
    /// 破棄
    /// </summary>
    public void Dispose()
    {
        colorChangeTimer?.Dispose();
    }
}

.color-box {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: white;
    font-weight: bold;
    transition: background-color 1s;
}

<div class="color-box" style="background-color: @currentColor;"> のstyleのcurrentColorを変化させることで、色の変化を実現しています。

currentColorの変更は、OnColorChangeAsyncメソッド内で行っています。 currentColor変更後、StateHasChangedメソッドを呼び出すことでUIの更新を通知することで、 カラーボックスの色が変更されます。

OnColorChangeAsyncは、InitializeTimerメソッド内でタイマーのElapsedイベントとして登録しています。 Elapsedイベントは、指定された時間間隔が経過したときに発生するイベントなので、 定期的にOnColorChangeAsyncが呼び出します。

これでカラーボックスは完成になります。 完成品は以下のようになります。

一秒ごとに、配列で定義した色の順番で変化していることがわかります。

この記事では、System.Timers.Timerクラスを使用して、 1秒ごとに色が変わるカラーボックスを作成する方法について解説しました。

System.Timers.Timerクラスは、一定の時間間隔でイベントを発生させることができ、 非同期処理やバックグラウンド処理に非常に有用です。

リアルタイムのデータ更新や、定期的なバックグラウンド処理が必要な状況で役立つと思います。

ぜひ、自分のプロジェクトに取り入れてみてください。