Help us understand the problem. What is going on with this article?

Visual Studio 2019 でBlazor WebAssemblyプロジェクトを作る

はじめに

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

Visual Studioの用意

Visual Studioをインストールしましょう。
私が試したのは以下のバージョンです。
Image 2020-02-15 11.03.03.png
※なんかバージョン更新されてますね。あとでアップデートします。
 リリースノート見る限り、16.4.5でもやり方は変わらないと思います。

Blazorで開発するには以下のワークロードが必要になります。
Image 2020-02-15 11.03.55_02.png
詳しい人は必要なものだけ個別のコンポーネントをインストールする方がよいかもしれませんが、私のようにこの辺に詳しくない人はこのワークロードをインストールすれば確実です。

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

プロジェクトの作成

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

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

テンプレートがあるならそれ選んで終わりじゃんと思いきや、そううまくも行きません。
おそらく、設定を進めていっても、下記のWebAssembly用のアプリが表示されてないんじゃないでしょうか。
私は最初、表示されていませんでした。
Image 2020-02-16 12.48.07.png
Blazor Serverを実装したい場合は「Blazor サーバー アプリ」を選択すれば問題ないです。
「Blazor WebAssembly App」が表示されている人もこれ以降読む必要はないかと思います。

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

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

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

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

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

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

作成が完了すると、ソリューションの構成はこのようになっているはずです。
Image 2020-02-16 13.02.50.png

特に何もせず、実行する。
Image 2020-02-16 13.08.39.png

すると、ブラウザが起動してサンプルページが表示されるはずです。
Image 2020-02-16 13.08.07.png

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした