はじめに

先日、Blazorなるものを知り、調べてみることに。
ただ、バージョンの更新が活発なタイミングだったようで、Blazorで検索して出てくるサイトだと情報が少し古いものが多かったので、自分が成功した方法をまとめてみる。
VisualStudioを使ったのだ大分久しぶりなので、もっと良い方法などあれば教えてください。

Visual Studioの用意

Visual Studioをインストールしましょう。
私が試したのは以下のバージョンです。

※なんかバージョン更新されてますね。あとでアップデートします。
　リリースノート見る限り、16.4.5でもやり方は変わらないと思います。

Blazorで開発するには以下のワークロードが必要になります。

詳しい人は必要なものだけ個別のコンポーネントをインストールする方がよいかもしれませんが、私のようにこの辺に詳しくない人はこのワークロードをインストールすれば確実です。

以上で、VisualStudioのインストールは完了になります。

プロジェクトの作成

Blazorプロジェクトを作成します。
VisualStudioの使い方については他の人の開設に任せますので、この記事ではBlazorに特化した部分のみ書いていきます。

上記のVisualStudioのバージョンであれば、Blazorテンプレートがすでにあると思いますので、それを選びます。

テンプレートがあるならそれ選んで終わりじゃんと思いきや、そううまくも行きません。
おそらく、設定を進めていっても、下記のWebAssembly用のアプリが表示されてないんじゃないでしょうか。
私は最初、表示されていませんでした。

Blazor Serverを実装したい場合は「Blazor サーバー アプリ」を選択すれば問題ないです。
「Blazor WebAssembly App」が表示されている人もこれ以降読む必要はないかと思います。

表示されなかった人は、プロジェクトの作成をいったんキャンセルして、以下の手順を踏む必要があります。

Blazorのプレビュー版テンプレートをインストールする

Blazor WebAssemblyは私が試した時点でまだプレビュー版だそうで、WebAssembly用アプリを作成するには、対応したプレビュー版のテンプレートをインストールする必要があります。

ここで結構詰まったんですが、色々な記事を読むと、「プレビュー版テンプレートをインストールするにはコマンドを叩くだけ！」と教えてくれるのですが、バージョン指定されたそのコマンドだと古かったりして、エラーが出る場合があります。
ですので、最新のバージョンのテンプレートを手に入れましょう。
最新のテンプレートはこちらのサイトから取得可能です。
「Version History」にある最新バージョンのリンクをクリックします。

遷移した先に記載されているコマンドを叩いてプレビュー版のテンプレートをインストールしましょう。

インストールすると、テンプレートが更新されるので、上記の「Blazor WebAssembly App」が表示されるようになるかと思います。プロジェクトを作成しましょう。

作成が完了すると、ソリューションの構成はこのようになっているはずです。

特に何もせず、実行する。

すると、ブラウザが起動してサンプルページが表示されるはずです。

おわりに

BlazorはC#でWebアプリの開発思想でサーバサイドやクライアントサイドはもちろん、PCのネイティブアプリやスマホアプリなども全部できるようにしようぜ！っていうものみたいですね。
JavaScriptにトランスパイルするわけでもなく、全部C#で完結するっているのが楽しそうです。
まだASP.Netとかも全然知らないので、覚えることいっぱいですが、色々期待したいと思います。

Let's Enjoy Blazor!

参考

https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1
https://www.publickey1.jp/blog/20/blazor_webassembly5blazorpwa.html