Blazor とは

Blazor とは 2019 年 .Net Core 3.0 でリリースされた Web 向けのフレームワークです。当時の発表内容については、ここに書かれています。一番大きな特徴は、 .NET と C# で Web のバックエンドからフロントエンドまでコーディングできることです。

これまで、 Web のフロントには、必ず JavaScript をコーディングする必要がありました。そのため、バックエンドは .NET や Java でコーディングし、フロントは JavaScript でコーディングするため、開発者は両方のプログラム言語を習得するか、フロントエンドとバックエンドで担当者を分けていました。

しかし、手元の端末がどんどんハイスペックになり、ブラウザ上でより多くの処理をすることで、バックエンドとの通信する機会を減らすことで、通信が発生することによるレスポンスの低下を防ぐことによるユーザの満足度を上げるアプリがどんどん登場してきました。

また、これらのアプリの開発には、フロントエンドのプログラム言語である JavaScript をバックエンドでも利用できるようにした Node.js を拡張したフレームワークとして、 ReactVueAngular などのフレームワークが流行っていました。

一方で、 2015 年には HTML5 の標準を定義する団体 W3C で WebAssembly というブラウザ上でバイナリファイルを実行できるようにする規格が採択され、 .NET や Java のような高級言語の実行ファイルを、プラグインなどをインストールしなくても、直接、ブラウザ上で動かせる可能性が出てきました。下の表でわかるように、 2021/12/26 現在、ほとんどの主要なブラウザでは WebAssembly をサポートしています。(ソース

Blazor Server と Blazor WebAssembly

このような状況で .NET Core に登場した新しい Web のフレームワークが Blazor です。

Blazor には、大きく分けて 2 つの構成が存在します。一つは、 Blazor Server、もう一つは、 Blazor WebAssembly です。その違いを図で表すと、次の絵のようになります。 Blazor Server は、サーバ側で DOM を生成し、生成した DOM を SignalR と呼ばれる WebSocket でクライアントに渡して、表示を変更するアーキテクチャです。一方で、 Blazor WebAssembly は、 Blazor のエンジンがブラウザ上で動作します。そのため、必要なタイミングで必要なデータをサーバ側から取得するといった動きをします。

それぞれのメリット・デメリットは、次のように考えられます。

Blazor Server のメリットとデメリット

Blazor Server の方は、サーバ側で処理を行うため、これまで Web システムのアーキテクチャとしてよく採用されていた MVC (Model-View-Control) のような n 層アーキテクチャと似たアーキテクチャをとることが可能です。そのため、システムの多くの部分で、既存のソースコードを流用できるというメリットがあります。さらに、クライアント側が性能が低い端末であっても、端末側での処理は DOM を表示するだけなので、低負荷で表示させることができます。

一方で、 Blazor Server のデメリットは、常にコネクションを張り続けている必要があり、 DOM の書き換えの際にも、毎回、サーバと通信する必要があるため、通信に時間がかかる分、通信環境によっては、動きが遅く感じる場合があります。

Blazor WebAssembly のメリットとデメリット

Blazor WebAssembly の一番のメリットは、ブラウザ上で Blazor エンジンが動作するため、バックエンドと通信する必要なく描画内容の変更ができるなど、オフライン化を進めることが容易です。現在、ブラウザには内部にデータベースや独自のファイルシステム領域を持つなど、アプリをオフラインで実行するために必要な機能が多く用意されています。その機能をうまく活用することで、ローカルアプリかのように Web アプリを動作させることができます。さらに、このようなアプリは、 PWA (Progressive Web Application) としてラッピングすることで、よりネイティブアプリのように見せることが可能です。

一方で、 Blazor WebAssembly のデメリットは、ブラウザ上で動作する性質上、ブラウザを実行する端末の性能によっては動きが遅く感じる場合があることです。また、 バックエンドとフロントエンドの実行される場所が分離されるため、既存のシステムのリアーキテクトが必要になる可能性が高いことも、デメリットになります。

まとめ

今回は、 Blazor と呼ばれる .NET の新しいフレームワークについて概要を紹介しました。 C# でバックエンドからフロントエンドまで一貫して記述できることは大きなメリットです。一方で、これまでの n 層アーキテクチャだけでなく、 SPA アーキテクチャを取れるようになり、システム開発側で選択すべきことが一つ増えました。

将来的に、現在流行っているマイクロサービスへシステムのアーキテクチャを変更し、変化に柔軟に対応しやすいシステムに変えていくのであれば、 Blazor WebAssembly を選択することをお勧めします。もし、できるだけ既存のアーキテクチャを踏襲することを希望するのであれば、 Blazor Server を選択することをお勧めします。