HaneCa

独り立ちへ向けた長い道

Blazorについて

投稿日: 2020年4月26日

最近、Blazorと呼ばれるフレームワークを使ったWebサイト開発のプロジェクトに関わることになったので、現時点での知識をご紹介します。

まず、Blazorとは、マイクロソフトが開発を進めるSPA (Single Page Application)のフレームワークです。SPAでよく利用される他のフレームワークReactやVue.jsとの違いは、まず、プログラム言語がC#とJavaScriptという違いがあります。

最初はブラウザ上での操作はJavaScriptを併用しなければならないのでは?と思っていましたが、razorというJS系のフレームワークで言うJSXの代わりになる言語で記述することで、JSを併用しなくても機能を実現できることがわかりました。

なぜ、JSを使う必要なくブラウザ上での動作を記述できるかを調べたところ、次の2つの理由があることがわかりました。一つ目は、サーバサイドレンダリングによる効果です。もう一つは、WebAssemblyと言うWebの規格でした。これらそれぞれについて、詳しく紹介します。

 

サーバサイドレンダリングについて

サーバサイドレンダリングは、既に様々なところで説明されているので詳細は割愛しますが、端的に言うとサーバ側で表示するためのHTMLを生成してから、クライアントのブラウザへデータを渡す機能のことです。この機能によって、HTML生成にかかる時間を短縮することができ、見た目上は早くなるといったメリットがあります。詳しい説明は、ここやここが参考になります。

一方で、サーバ側での処理リソースが必要となり、サーバサイドレンダリングと対極のクライアントサイドレンダリングに比べ、運用コストが高くなるといったデメリットがあります。

なぜ、運用コストが高くなるかと言うと、クライアントサイドレンダリングの場合、設置するサーバは静的サイトとして設置できる環境であれば運用できます。例えば、AWS S3、Azure Blob Storageといった従来は画像などのバイナリファイルを格納していたストレージサービス上に設置し、運用することが可能になります。

この場合、仮想マシンやコンテナサービスが時間単位で課金されるのと比較して、ストレージサービスは(基本的には)保管しているデータ量に依存し、通常のWebアプリの設置時のサイズは数十MBであることから、ほぼ0円で運用することが可能になります。

 

Blazorのサーバサイドレンダリングの運用

Blazorで構築したアプリをサーバサイドレンダリングでAzureで運用する場合、WebSocketサービスであるSignalRと呼ばれるサービスの併用が必要になります。

このサービスは必須ではありませんが、Webサイトをより高速に表示するためには必要な機能になります。

 

WebAssemblyについて

WebAssemblyとは、ブラウザ上でバイナリファイルを実行できる様にするWebの規格の一つです。これにより、C/C++などで記述されたプログラムをブラウザ上で実行することが可能になります。WebAssemblyは、2015年にアナウンスされ、2016年には主要なブラウザで実行可能になっている様です。(WikiPedia

WebAssemblyのメリットとして、C/C++などが実行できると言うだけでは、開発者向けの機能の様に見えますが、JavaScriptと比べ、処理時間が早くなると言うメリットもあります。なぜなら、JavaScriptは記述された内容を、一旦、ブラウザ内で機械語に翻訳してから記述された処理を実行しています。そのため、「記述言語を機械語に翻訳する」と言う処理が不要になることで、実行までの処理時間を短縮することができると言うメリットを、WebAssemblyは産むことができます。

さらに、オフラインで動作する様な実装や、PWA (Progressive Web App)といったローカルにインストール可能なアプリが、これまでより高速に実行可能になるといった点で、WebAssemblyには可能性を感じています。

一方で、処理モジュールをブラウザ上にダウンロードする必要が生じるため、その点は、サーバサイドレンダリングと比べるとデメリットになり、提供するサービスによってどちらが適切かを見極める必要があります。

今回は、内部で処理させる部分を多く儲けたいサービスのため、WebAssemblyを利用した実装を考える様になりました。さらに、今のところ、WebAssemblyのSPAフレームワークとして、一番機能が揃っているのがBlazorと言うことで、今回、Blazorを使ったWebアプリの開発が立ち上がりました。

しかし、Blazor WebAssemblyは、今日( 2020/4/26 )時点では、プレビュー状態であり、日々変更が加えられています。そのため、Previewが更新されるごとに変更が余儀なくされています。来月には、正式版のリリースが予定されているのですが、先週公開されたPreview版でさえ一つ前のPreviewからAPIが削除されるなど、まだまだ、不安な点もあるフレームワークです。

Blazor WebAssemblyの変更履歴は次の様になります。

 

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください