Blazorを使ってみる

情報源

これらの情報を元にテスト時に気づいたことを書きました。

Blazorとは

簡単に言えばRazorをクライアントサイドで動かすためのフレームワークです。 現時点ではβ版で不安定なところもあるが、慣れた言語とNugetの豊富なパッケージを使ってWebコンテンツを作成できる。

環境構築

公式ドキュメント に書いてあります。やることは下の3つ

注意点としては、.Net Core SDKを入れなくても動作はしたが VS上のcshtmlにエラー表示がされたことと、 拡張機能を入れないと新しいプロジェクトにテンプレートが表示されないことの2つ。

特徴と注意点

Routing

ページの指定はそれぞれのcshtmlの先頭に@page "/hoge"といった具合。 パラメータを付けることも可能で@page "/hoge/{huga}"とすれば、@function内のhugaプロパティに「Parameter」属性を付けておけば値が書き込まれる。 その他のURLに関する操作はIUriHelperを使用することで可能になる。 これの利用法は少し特殊で@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelperと記述することで読み込まれる。

初回の起動は遅いものの、一度ロードすればページの遷移はクライアントサイドのみで行われるためとても高速。

Binding

Razorではサーバーサイドのみだったため、生成すれば送って終了であったが、クライアントサイドで動くBlazorでは後からの各種値の変更が可能である。 基本的にはAttributeの値とInnerTextがBinding可能である模様。他には、forの上限値やforeachのリストなど結構自由度が高い。

また、inputタグではvalueの双方向のBindingが可能。 既定ではフォーカスを失った際(JSで言うonchange)にのみ更新が行われます。 更新のイベントを指定することも可能だが、エラーが出るので今は出来ない。 これを使えるようになれば1文字ずつの更新も簡単にできるはず。

WPFのINotityPropertyChangedやDependencyPropertyのようにモデル自らが通知する実装ではないため、DirtyCheckで実装されている? もしかしたら規模が大きくなるとパフォーマンスに影響が出るかもしれない? Blazor特有の注意点として、更新の際は@{}の中身が再計算されるので、クエリパラメータの変更をする場合は意識したい。

Event

イベントのコールバックはAttributeに関数名を記述することで可能。 async関数の指定も可能。現状、最初のawaitで制御が帰った時と、Taskが終了した際にBindingの更新がされる模様。 なので、ボタンの有効無効を切り替えるだけなら意識せずに使える。 しかし、進捗状況を報告するような場合はStateHasChangedを呼び出す必要あり。

Attribute指定の例

以下のコードでは、「双方向のmessage変数のBinding」、「クリック時のOnClickCallback関数の呼び出し」、「hasError変数があるときにクラスを追加」、「isDisabled変数がTrueの時にdisabledAttributeを付加」、の計4つを指定した場合である。

<input type="text"
    bind=@message
    onclick=@OnClickCallback
    class="@(hasError?"Error":"")"
    disabled=@isDisabled />
再読み込み