[Blazor]Blazor事始め（.NET Core 3.0 Preview 6）

Visual studio 2019を使ってBlazorのテンプレートを作成から実行までをやってみたいと思います。C#なコードがブラウザでそのまんま動いちゃうってシビれますよね。

# ゴール

- ゼロ環境からBlazorテンプレートをビルドして実行できるようになる

# 環境

- .NET Core 3.0.100-preview6-012264
- Visual Studio 2019 (Version 16.2.0 Preview 4.0)
- Blazor extension
- Windows 10 1903

# 手順

preview3の頃は若干プロジェクトの作成が面倒くさかったのですが、preview6ではだいぶ改善されています。

## .NET Core SDKのインストール

最新版のSDK（記事作成時点では```SDK 3.0.100-preview6-012264```）をMicrosoftのサイトよりダウンロードし、インストールします。
https://dotnet.microsoft.com/download/dotnet-core/3.0
![001_dotnet3.0_sdk_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/2d23c54b-2c7d-dd3b-cbd2-9a7f6fadd2b3.png)

ダウンロードしたexeを実行して、```インストール```をクリック。
![002_dotnet3.0_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/ea9c6f34-3ff2-5fa1-4079-0d50cef690bd.png)

しばしプログレスバーと戯れて...
![003_dotnet3.0_installing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/5c666f2b-ee07-480c-4ec1-f0e6fb16c452.png)

何事もなければ数分でインストールが終了する。
![004_dotnet3.0_install_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/fca35ebf-2264-5a5b-bacf-ca7eede25c29.png)


ちゃんとインストールされているか以下で確認をする。

```
> dotnet --version
3.0.100-preview6-012264
```

## テンプレートの取得

続いて、Blazorプロジェクトのテンプレートを取得します。

```
> dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2
```

テンプレートがインストールされたか確認します。Blazorのテンプレート一覧がでていれば問題ありません。

```
> dotnet new --list | findstr Blazor
Blazor (server-side)                              blazorserverside      [C#]              Web/Blazor                    
Blazor (ASP.NET Core hosted)                      blazorhosted          [C#]              Web/Blazor/Hosted             
Blazor Library                                    blazorlib             [C#]              Web/Blazor/Library            
Blazor (Server-side in ASP.NET Core)              blazorserverside      [C#]              Web/Blazor/ServerSide         
Blazor (client-side)                              blazor                [C#]              Web/Blazor/Standalone 
```

## Visual Studio 2019 Preview版のインストール

プレビュー版をインストールするため、次のURLからexeをダウンロードします。
https://visualstudio.com/vs/preview

ダウンロードしたexeを実行します。
![005_vs2019_preinstall.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/6ca6100c-7036-f20b-4ebc-75a5f9e3bdf8.png)

```ASP.NET と Web 開発```にチェックを入れ、インストール処理を進めます。
![006_vs2019_install_options.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/6cc6dbb8-2dfb-39b5-362c-0fb3abc3ef8b.png)

ダウンロードサイズが大きい為、少々時間がかかります。プログレスバーと戯れましょう。
![007_vs2019_installing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/4f1d5064-31fb-98d3-7948-bb62fe2f8d6b.png)

## Blazor extensionのインストール

引き続き、Blazor extensionをインストールします。
下記URLの```Download```をクリックしvsixをダウンロードします。
https://marketplace.visualstudio.com/items?itemName=aspnet.blazor

ダウンロードしたvsixを実行し、再びプログレスバーと戯れます。
![008_blazor_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/1e89e614-52a9-9651-cdfa-9f0bdc7bd115.png)

ここまで終了したら下準備は終了です。

## プロジェクトの作成

Visual Studioを立ち上げ、新しいプロジェクトの作成をクリックします。
プロジェクトテンプレートは```ASP.NET Core Web アプリケーション```を選択します。
![009_create_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/3b940497-3a60-e508-4567-10322de4ed9b.png)

プロジェクトの構成は任意の名前にしてください。なんでもOKです。
![010_create_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/2c437f33-21a3-d2d2-4130-0818daeaf90a.png)

テンプレートは```.Net Core ASP.NET Core 3.0```の```Blazor WebAsembly アプリ```を選択します。ちなみに２つありますが、下を選んで作成をクリックしてください。
![011_create_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/f621e389-9d4c-06dd-5202-85113e0e3e09.png)

## ビルド＆実行

テンプレートの読み込みが終了し、Visual Studioが起動したらデバック実行します。
webブラウザーはChromeを選択しておきましょう。（IEは非対応）
![012_debug_f5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/f349b8a4-8cdf-f8b8-e9c7-1187935875b4.png)

ビルドに失敗しなければ、Chromeが立ち上がり~~MSにしては~~いい感じの画面が表示されます。
![013_first_view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/1e2c7116-59c3-3bab-4185-b9002ef9db07.png)

ちゃんとWebAssemblyらしくDLLが読み込まれてブラウザで実行されています。
![014_dl_dll.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160980/f1e070ee-637b-ad42-63e8-2d3a54781f0f.png)


以上、終了です。
後はテンプレートを煮るなり焼くなりしてゴリゴリコーディングしましょう。


# 注意事項

- IEはWebAssemblyに未対応のため、Loading...の画面から遷移しない
- 自分の環境ではなぜかテンプレートにBlazor WebAssembly アプリが2つ表示された
  - ちなみに双方違う内容のプロジェクトを作成する
  - 名前も説明文も一緒のため紛らわしい（下が正解だった）
- まだプレビュー版のため、今後手順が変更になる可能性がある

# 参考文献

- https://dotnet.microsoft.com/apps/aspnet/web-apps/client
- https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio
- https://marketplace.visualstudio.com/items?itemName=aspnet.blazor