Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@TAK_EMI

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

More than 1 year has passed since last update.

はじめに

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

5
Help us understand the problem. What is going on with this article?
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
TAK_EMI
何は無くとも地球は廻る。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?