CONTENT
大阪エンジニアのKです。
最近、業務でBlazorを使用したWebアプリを0から構築しました。周りに有識者はなく孤軍奮闘でしたが、大いに学びのあるお仕事でした。今回はBlazorを初めて業務で使用した所感を綴ります。
■Blazorとは
こういうのは公式が手っ取り早いです。
参考： microsoft公式（Blazor）
https://dotnet.microsoft.com/ja-jp/apps/aspnet/web-apps/blazor
抜粋
>Blazor は、HTML、CSS、C# をベースにした最新のフロントエンド Web フレームワークであり、Web アプリ構築の迅速化に役立ちます。
>.NET と C# の機能を利用して、JavaScript を 1 行も記述せずにフル スタック Web アプリを構築します。
わからないが？と言いたい気持ちは理解できます。
ざっくりいうと、C#とHTMLとCSSのみでWebアプリ作れちゃうフレームワークってことです。が、相当な機能制限をしないとJavascript不使用は無理です。ダウンロードとかブラウザの機能を利用する場合、ほぼほぼ必要になります。でも、殆どの機能はC#とHTMLだけで完結します、これは正直感動でした。
抜粋
>Blazor では、クライアントとサーバーの両方から実行できる再利用可能コンポーネントを使用して Web アプリを構築し、優れた Web エクスペリエンスを提供できます。
初見だとなんのこっちゃです。以下の参考サイトがわかりやすいです。
参考：.NET 8 での Blazor を整理整頓して理解しよう
https://zenn.dev/microsoft/articles/blazor-dotnet8-all#web-%E3%82%A2%E3%83%97%E3%83%AA%E7%94%A8%E3%81%AE-blazor
抜粋でいうとことのクライアントとはBlazor WebAssemblyのことを指します。Webサーバーから配布してしまえば、以降はオフラインでも動作可能です。が、全アプリをDLさせるため初回起動に時間がかかります。
サーバーとはサーバーサイドレンダリングを使用するBlazorのことを指します。静的レンダリングであるか、対話操作であるかといった違いはありますが、サーバーサイドでレンダリングした結果をブラウザで表示するといった理解で問題ないです。
基本的には「どこでレンダリングするか」の違いですね。2年くらい前までは、どちらか一方だけのプロジェクトしか作成出来ませんでした。今は両方を1つのソリューションで作成可能です、便利になりました。
■Blazorの始め方
MicrosoftLeanのチュートリアルを参考に進めましょう。
Qiitaやら個人の技術ブログやらでもありますが、.NETのバージョンごとに結構な差異があります。移り変わりが激しいので、個人的には常に公式参照がおススメです。
参考：Blazorチュートリアル
https://dotnet.microsoft.com/ja-jp/learn/aspnet/blazor-tutorial/intro
■Blazor使ってみた所感
3万STEPくらいのWebアプリを作った上での所感です。（一人で3万STEP書いたわけではないですが、PJ基盤はソロ構築）
・C#とHTML（razor）で殆ど解決する
HTTPを介すことで分断されていた流れが一体化した感があります。Javascriptを殆ど気にしなくてもよくなったのは実装において多大なメリットでした。考えが分散せずに済みますし、ソースもまとまります。ただし、考えなしにやると肥大化しがちなので、構成は練る必要があります。
・簡単にSPA出来る
angular+C#とかでSPAすると、angularとC#の連携とか、angularの環境設定とC#の環境設定をそれぞれで意識したりする必要があります。BlazorだとC#で一本化されているので、余計な設定がありません。プロジェクトテンプレートを生成してみればわかりますが、このシンプルさでSPA出来るんだと感動します。
・Microsof製ゆえのMicrosof製品との親和性
VisualStudioの強力な支援機能をフル活用して開発できます。DB周りもEFCoreでOKです。認証系にIdentityが使えるので、最低限の認証機能は簡単に開発可能です。ある程度触るとIdentityが鬱陶しくなりますが、ご愛敬。プロジェクトテンプレート生成した時点で、多要素認証にも対応しています。（これはBlazorに限った話ではないですが）
・Microsofの推し感
Blazor推してる感がすごいです。至る所にBlazorを登場させてます。.NAT MAUIというクロスプラットフォームフレームワークでも使用出来ます。バージョンアップも頻繁にあるので、当面は安心して利用出来そうです。
・Web初学者には厳しい
C#とHTMLだけというところで、Web開発に触れたことのない人でもいけそうな気がしてしまいますが、まず厳しいです。各コンポーネントのライフサイクルやWebの基礎的な仕組み、レンダリングモードの意識などなど、裏側や理屈を意識しないと組めないところがあります。特に、Javascript相互運用が絡むと顕著です。Javascript相互運用は.NETからJavascriptを呼び出したり、その逆をしたりと出来るものですが、コンポーネントのライフサイクルを意識しないと動きません。
・万能じゃない
現状では何でもかんでもBlazor使うのは微妙かなって気がしてます。Webアプリで使うのは前提で、双方向通信であること、SPAであることにメリットのあるアプリが適正です。途中で「普通にRazorPageでよくね」ってなりがちです。
・考え方を変える必要がある
プロジェクト構成や設計方法なども含みますが、普通のWebサイトのノリで設計や構成すると要らない部分や足りないところ、やりにくいところが出てきます。今のところ、ベストプラクティスみたいなものが存在しないので、模索中です。。。
■まとめ
色々と良いこと、悪いこと書きましたが、Blazorは触っていて楽しいものでした。C#で記述できる範囲が広いので、選択肢の広がりを感じています。少しでも興味を持ってもらえたなら、ぜひともBlazorに触ってみてください！VsCodeでも大丈夫ですよ！