SPA 開発となると、そのフレームワーク/ライブラリの選択肢の多くは Angular、React、Vue と言った JS のフレームワーク/ライブラリが一般的かと思います。
今回はそれ以外の選択肢である Blazor を利用して C# で書ける SPA 開発を紹介します。
とりあえず動かしたい!!って人は以下の概要を読み飛ばして、Hello World のハンズオンに飛んでください！
macOS でも Linux でも Windows でもクロスプラットフォームで開発でき、動きます。
ASP.NET Core Blazor
- JavaScript ではなく C# (.NET) で書ける SPA (Single Page Application) 向けのフロントエンドフレームワーク
- Blazor WebAssembly (上) と Blazor Server (下) の 2 種類がある
- Blazor WebAssembly : 完全な SPAで、wasm で書いた .NET ランタイム上で C# のコードが動く
- Blazor Server : ASP.NET Core SignalR の技術を利用して疑似的に SPA を実現しているイメージ (ただし動的生成したHTMLを返すような従来の View の機構を持ったバックエンドフレームワークとは異なる)
- いずれもコンポーネント指向で、Razor コンポーネントで各コンポーネントを記述
- クロスプラットフォーム動作の .NET を前提にしてるので、Mac でも Linux でも開発可能
参考 : Blazor - 概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1
Blazor WebAssembly
- wasm で書いた .NET Runtime 上で C# がブラウザで動く！
- JavaScript interop という機能で JS を介してブラウザの全機能にアクセス可能
- 最近出た Azure Static Web Apps (Preview) にホストも可能
参考 : Blazor WebAssembly
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly
Blazor WebAssembly で Hello World
0. 前提
- OS : macOS, Linux, Windows 何でも
- 最新の .NET Core SDK をインストールし、インストール後に以下を実行し、無事インストールされていることを確認
dotnet --version
1. テンプレートを生成、動かす
dotnet CLI で Blazor WebAssembly のテンプレートを生成
任意のディレクトリで以下を実行
dotnet new blazorwasm -o HelloWorld
HelloWorld プロジェクト内に移動し、watch モードでアプリを起動
cd HelloWorld
dotnet watch run
起動後に https://localhost:5001 もしくは http://localhost:5000 にアクセスし、以下の画面が出ていれば成功
2. ちょっとだけ変更
ちょっとコード変更
Pages/Index.razor の中を以下に変更
@page "/"
<h1>Changed Hello</h1>
変更反映の確認
ブラウザ画面をリロードし、変更の反映を確認。
最後に
今日は Hello World だけですが、ASP.NET Core SignalR との組み合わせのチュートリアル等もありますので、興味があれば色々触っていただければと思います。
参考 : ASP.NET Core SignalR を Blazor WebAssembly と共に使用する
https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/signalr-blazor-webassembly?view=aspnetcore-3.1&tabs=visual-studio