Blazor WebAssemblyを試してみる

他の方の書かれたQiita記事を拝見していて、ぼちぼちBlazor WebAssemblyも実用レベルになりつつあるのかなと思いましたので、試してみました。

準備

.NET Core 3.1 SDKをインストール

ここからダウンロードしてインストールします。

テンプレートからアプリを作成する

以下のようにdotnetコマンドで作成します。

Blazor WebAssemblyのテンプレート最新をインストール

dotnet new --install Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0

アプリ作成

dotnet new blazorwasm -o dotnetcore-blazorwasm-sample

追加のサンプルコードを書く

何かしら動きのあるサンプルを作りたかったので、今回は、/testPageにアクセスしたら１秒更新の時計を表示するページを追加してみます。

以下のコードを/Pages/TestPage.razorとして追加します。

TestPage.razor

@using System.Timers
@implements IDisposable
@page "/testPage"

<h1>Test Page</h1>

<p>@message</p>

<p>Now Time: [@nowTime]</p>

@code {
    private String message = "This is test page.";
    private String nowTime = DateTime.Now.ToString();
    private Timer timer;
    protected override void OnInitialized()
    {
        timer = new Timer(1000);
        timer.Elapsed += (sender, e) =>
        {
            nowTime = DateTime.Now.ToString();
            StateHasChanged();
        };
        timer.Start();
    }

    public void Dispose() {
        timer.Stop();
        timer.Dispose();
    }
}

ページ生成時にtimer = new Timer(1000);で１秒間隔のタイマーを作り、満了するごとに現在時刻をnowTimeに設定するようにします。
ポイントはStateHasChanged();を呼んでいるところで、これを呼ばないとビューの更新が必要なことが通知されず、表示が変わりません。

ページ破棄時にDispose()を呼んでもらうために@implements IDisposableしています。
Dispose()内ではタイマーを止めてリソースを破棄しています。

実行

dotnet run で実行します。
ブラウザでhttp://localhost:5000にアクセスして確認します。

結果

上記のように時計が表示されて１秒毎に更新されます。

最後に

ちょっと起動時のLoading...表示が長かったりするかなとは思いましたが、こういった少し動きのあるページがJavaScript書かずにブラウザ上で動いているのはなかなか面白いですね。

なお、今回のサンプルコード全体はこちらのGitHubリポジトリで参照できるようにしてありますので、興味あればご覧くださいませ。

では。