Blazorが一般公開になりました。
身の回りでは（大いなる誤解含みで）にわかに話題になっています。
自分はAngularが好きなので、AngularでできることがBlazorだとどうなるのかを調べてみたいと思います。
コンポーネント
Angularのコンポーネントと、Blazorのコンポーネントはほぼほぼ同じ意味です。
コンポーネントを用意していくことで画面を組み立てます。
思いついたものをまとめました。
| 比較項目 | Angular | Blazor |
|---|---|---|
| コンポーネントを構成するもの | クラス、テンプレートHTML、（必要に応じて）スタイルシート | Razorファイルひとつ |
| コンポーネント専用のスタイルシート | 持てる | 持てない1 |
| 他コンポーネントからの参照 |
<app-foo></app-foo>のようなタグで参照できます |
<Foo></Foo>のようなタグで参照できます |
| 値のバインディング | テンプレート中に{{foo}}と書くことで、変数を参照できます |
テンプレート中に@fooと書くことで、変数を参照できます |
| フォームとのバインディング | タグに[(ngModel)]をつけます。あるいはリアクティブフォームを使います |
タグに @bind 属性をつけます |
| ライフサイクル | 画面遷移時にインスタンスが生成/破棄される | ← 同左（？） |
| スタイルシート | SCSS、CSSが使えます | 別途設定しない場合はCSSのみ(?) |
フォームと入力バリデーション
Angularの場合
タグに属性をつけたり（テンプレート駆動の場合）、FormGroupを使ったり（リアクティブフォームの場合）することで、Valid/Invalidな状態になります。
Blazorの場合
バインディングした変数にアノテーションをつけることで、その入力項目を持つフォーム全体がValid/Invalidな状態になります。
テンプレートで使用できる制御構文
Angularの場合
- If
- Forループ
- Switch Case
Blazorの場合
RazorはそのままC#を書けますので、C#と一緒です。
コンポーネント間におけるデータの共有
Angularの場合
サービスクラスを作り、コンポーネントヘインジェクトします。
Blazorの場合
好みのクラスを作り、DIコンテナへシングルトンとして登録します。
コンポーネントに @inject と書くことでインジェクトできます。
ルーティング
Angularの場合
パスとコンポーネントの組み合わせをRouterModuleへ渡します。
Blazorの場合
コンポーネントの先頭に置いた @page でパスを指定します。
既存HTMLタグの拡張
Angularは、既存HTMLタグをコンポーネントとして宣言できます。また、タグに属性として特別な機能を付与できるディレクティブというものがあります。
Blazorには、同じようなものはないようです。2
定番サードパーティライブラリ
| ライブラリ | Angular | Blazor |
|---|---|---|
| テスト | Karma, Jasmine, Spectator 等 | xUnit 等 |
| 状態管理 | NGRX, Akita、NGSX 等 | (?) |
| マテリアルデザイン | Angular Material 等 | (?) |
感想
Blazorは、機能が少なく単純なため、学習コストは低そうです。
@ の書き方がなかなかのカオスっぷりで、なんというかMicrosoftらしいなぁと感じます。
日本のSEが大好きなグリッドコントロールが、いくつもサードパーティ34から出ています。すぐに使えそうですね。