🙄

ASP.NET Core Blazor のスレッドについて

2021/04/08に公開

tech

本記事では、「Blazor のスレッド」について解説したいと思います。

Blazor のスレッドについて

Blazor には以下のスレッドがあります。

・メインスレッド : 画面描画を行う UI スレッド。

・バックグラウンドスレッド : WebAPI の呼び出しや処理時間が長い処理を行うスレッド。

本記事では、バックグラウンド (非同期) 処理について解説します。

Blazor バックグラウンド (非同期) 処理方法

Blazor でバックグラウンド (非同期) の処理は大まかに 2 つの方法があります。

InvokeAsync で処理する
Task で処理する

InvokeAsync は Blazor 標準の機能で、手軽に実行することができます。

Task を発行する方法は、処理をキャンセルしたい場合に有効な方法です。

それぞれ解説します。

InvokeAsync (手軽に非同期処理を実行できる)

.NET 5 には、スレッドセーフな仕組みの非同期処理として InvokeAsync メソッドが提供されており、Blazor コンポーネントにおいても、このメソッドを利用することが出来ます。
下記のように InvokeAsync メソッドを利用することで手軽に、非同期にて処理することができます。

InvokeAsync(() =>
{
    // 非同期処理、WebAPIの呼び出し等を記載
});

画面の更新が必要な場合は、StateHasChanged メソッドをコールし、Blazor に状態変化を通知します。

InvokeAsync(() =>
{
    // 1秒ごとにカウントアップ
    currentCount++;
    // 状態変更を Blazor に通知
    StateHasChanged();
});

Task を発行する (キャンセル可能な非同期処理)

上記の InvokeAsync メソッドでは、手軽に非同期処理を実行できるものの、非同期処理中にキャンセルを行うことが出来ません。

実行時間の長い処理を行っていると場合によってはキャンセル可能な仕組みが必要な場合もあるでしょう。

その場合は、Task 実行時に CancellationToken を設定することで、実行中にキャンセル通知を行う事ができます。

まず、先に動作イメージから。

CancellationTokenSource を Task 発行時に設定することにより、タスク実行のキャンセル通知を行うことができます。
"Run" ボタンをクリックすると、バックグラウンドで処理が始まり、
"Cancel" ボタンをクリックするとことで、バックグラウンドの処理を中止します。


@page "/canceltest"
@implements IDisposable
@using System.Threading
@using System.Timers

<button @onclick="RunTask">Run</button>
<button @onclick="Cancel">Cancel</button>

<p>Current count: @currentCount</p>

<p>
    @message
</p>

@code {
    private int currentCount = 0;
    private string message = null;
    private CancellationTokenSource cts = new CancellationTokenSource();

    public async Task RunTask()
    {

        await Task.Run(async () =>
        {
            for (int i = 0; i < 10; i++)
            {
            //  キャンセルリクエストがある場合は処理を終了する
            if (cts.Token.IsCancellationRequested)
                {
                    message = "タスクがキャンセルされました。";
                    break;
                }
                // コストが重たい処理と仮定
                await Task.Delay(1000);
                currentCount++;
                // 状態変更の通知
                StateHasChanged;
            }
        },
        // キャンセルトークン
        cts.Token);
    }

    public void Cancel()
    {
        // バックグラウンドスレッドをキャンセルする
        cts.Cancel();
    }

}

上記は、Microsoft の公式ドキュメントで紹介している実装方法を参考にしています。

Blazor 記事のバックナンバー

Ignite UI for Blazor トライアル版を利用するには

インフラジスティックスでは充実した UI コンポーネントライブラリーを収録し、データリッチでレスポンシブなWebアプリケーションをより迅速に構築することを可能にするIgnite UI</a> を開発しており、Blazor 対応の Ignite UI for Blazor もリリースしています。

Ignite UI for Blazor はトライアル版での試用が可能です。

トライアル版を利用するためにはこちらのページよりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。

また、製品をご購入をご検討のお客様はこちらのページよりお気軽にお問い合わせください。

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せは<a href="https://jp.infragistics.com/about-us/contact-us#contactform" target="_blank">こちら</a>からお気軽にご相談ください。