ツナ缶雑記

ぐうたらSEのブログです。主にマイクロソフト系技術を中心に扱います。

Blazorの概要

ASP.NET Core 3.0もリリースされて、サーバーサイドレンダリング限定ですが、Blazorも使えるようになりました。 ようやく触り始めたので自分の勉強メモもかねて、残していきたいと思います。

Blazorって何?

公式サイトを見ると、

.NETを使って対話型のクライアント側Web UIを構築するためのフレームワーク と説明されています。

軽く触った感じだと、論理的なアプリケーション構造はASP.NET Web Formsと似ています。 画面をコンポーネントという単位にまとめて、それらを画面に張り付けていくスタイルです。 Web FormsでいうところのUserControlに近い感覚でしょうか。 実際にWeb Formsの後継として位置づけられることもあるようですね。

動作の仕組みと他の技術との比較

ただ、実際の動作はWeb Formsとは似ても似つかない動きをします。 現時点で使えるBlazorサーバーは、簡単に言うと「サーバーサイドでDOMの構築を行うSingle Page Application」です。 通常AngularやVue.jsなどのSingle Page Applicationは、以下のようにブラウザー上のJavaScriptでDOMの構築を行います。

f:id:masatsuna:20191022153728p:plain
Single Page Applicationの動作

BlazorサーバーはこのDOM構築作業をすべてサーバー上で行い、ブラウザーにはDOMを送り付けるような動作になります。 通信はSignalRによって行われており、あたかもJavaScriptでDOMを構築しているかのような動きをするのです。

f:id:masatsuna:20191022153800p:plain
Blazorサーバーの動作

SignalRは通信機器が対応していればWebSocketによる通信となるため、通信量は非常に軽くなります。 こういう技術的な下支えがあって、Blazorサーバーは動作しているということになります。

もう少しすると、Blazor WebAssemblyと呼ばれる仕組みも使えるようになります。 こちらはJavaScriptのSingle Page Applicationと同様、ブラウザー上でDOMの構築を行います。 ただし、その処理はBlazor WebAssemblyで行います。 Blazor WebAssemblyは.NETで実装することになります。 これにより、JavaScriptの実装なしでSingle Page Applicationが実装できてしまうのです。 わざわざJavaScriptフレームワークを覚える必要がなくなります。

f:id:masatsuna:20191022154706p:plain
Blazor WebAssemblyの動作

結構とんでもないフレームワークだなーという印象です。

まとめ

クライアントサイドの実装はここのところJavaScript系のフレームワークが台頭していて、生産性重視のエンタープライズシステムでは採用しにくい状況が続いていました。 .NETもJavaScriptのSingle Page Applicationフレームワークも両方使える技術者さんってそんなに多くなくて、開発者を集めるのに苦労していたんですよね。 Blazorはこういった状況を打破してくれる可能性を秘めていると思います。

とはいえ、実装技術だけを見ると、どうしてもシステムリソースの消費量が気になってきます。 もう少しこの辺りは調査が必要な気がしますね。