C#でSPAを実現！ .NET 6でASP.NET CoreのBlazorアプリケーションの基本「Blazor Server」を理解しよう

.NET最新版でASP.NET Core 第7回

　この回では、C#でSPAの開発を行えるBlazorを紹介します。Blazor ServerとBlazor WebAssemblyという2つの動作モデルの特徴や違いを紹介し、このうちBlazor Serverについてサンプルを読み解きながらその動作を掘り下げます。

はじめに

　本連載では、マルチプラットフォーム化が進む.NETと、そのWebアプリケーション開発フレームワークであるASP.NET Coreの全体像を俯瞰します。ASP.NET Coreは、アプリケーションの目的や開発スタイルに応じて選択することができる多彩なサブフレームワークを搭載しています。それらの基本的な性質や機能を読者に示すことで、ASP.NET Core導入の一助になることを目的とします。

対象読者

• Core以前のASP.NETに慣れ親しんだ方
• Web開発の新しい選択肢としてASP.NET Coreを理解したい方
• ASP.NET Coreの多彩なフレームワークを俯瞰したい方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• macOS Monterey / Windows 10（64bit）
  • .NET SDK 6.0.100
  • Google Chrome 105

Blazorとは？

　Blazorとは、ASP.NET Coreにおける対話型のWeb UI開発のためのフレームワークです。初リリースが2018年と、ASP.NET Coreの中では比較的新しいフレームワークです。最初に、Blazorの特徴を3つ挙げます。

（1）C#でクライアントサイドの実装ができる

　BlazorではC#でクライアントサイドの実装が可能です。クライアントサイドの実装というと、JavaScriptかそのフレームワークというのが定番とされてきましたが、これはサーバーサイドとクライアントサイドの分断という問題を抱えてきました。

　サーバーサイドで.NETやC#にノウハウのある開発チームがクライアントサイドも手掛ける場合には、別途JavaScriptやReactなどに通じた要員を確保するか、学習コストをかけて修得する必要があるわけですが、Blazorではクライアントサイドも.NETにおいてC#で記述することができるので、この必要が少なくなるわけです。

（2）クライアントサイドとサーバーサイドの2つの動作モデルを持つ

　Blazorではクライアントサイドとサーバーサイドの2つの動作モデルを持ちます。C#によって、クライアントサイドで動作するアプリケーションを開発できますし、もちろんサーバーサイドで動作するアプリケーションを開発することもできます。前者はBlazor WebAssemblyと呼ばれ、後者はBlazor Serverと呼ばれます。それぞれに利点があり、アプリケーションの目的や形態に合わせて選択することができます。

（3）.NETライブラリなどの資産が利用できる

　クライアントサイドもサーバーサイドも、アプリケーションは共通基盤である.NETで動作することから、.NETの備える豊富な基本ライブラリはもとより、サーバーサイドの開発で築いたライブラリ資産を双方で共有できるというメリットも生まれます。