6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

はじめに

先日、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

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?