.NET Core 3.1 SDKをMacにインストールして「Blazor WebAssembly App (3.2.0)」を試してみる。


# インストーラーをダウンロード

下記URLより、SDKのインストーラーをダウンロード
https://dotnet.microsoft.com/download/dotnet-core/thank-you/sdk-3.1.300-macos-x64-installer

# インストーラを実行

<img width="624" alt="スクリーンショット 2020-06-07 2.08.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/7e4af457-a8f7-6e24-2a07-aa5cae759602.png">

「続ける」を押下

<img width="623" alt="スクリーンショット 2020-06-07 2.08.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/bc3a7c2f-341f-69a8-b9a9-6f99aade9888.png">

「続ける」を押下

<img width="625" alt="スクリーンショット 2020-06-07 2.08.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/6dd6f087-78f3-0324-71b1-8eacd33e6eea.png">

「インストール」を押下

<img width="626" alt="スクリーンショット 2020-06-07 2.09.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/3d82c119-579a-04c1-f3cc-929f6a76898f.png">

待機

<img width="624" alt="スクリーンショット 2020-06-07 2.09.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/48c769c0-3b08-db3e-a2a1-841ac03a1f6b.png">

「閉じる」を押下

# dotnetコマンドの確認

```
/usr/local/share/dotnet/dotnet --version
3.1.300
```

# パスを通す

.bash_profile を編集

```
vi ~/.bash_profile 
```

以下の内容を、.bash_profile に追加。

```
/usr/local/share/dotnet/
```

.bash_profile を読み込み直す。

```
source ~/.bash_profile
```

# パスが通ったか確認

```
dotnet --version
3.1.300
```

# ASP.NET Core Blazor WebAssembly のテンプレートプロジェクトをインストール

```
dotnet new --install Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0
```

# ASP.NET Core Blazor WebAssemblyのプロジェクト作成

```
dotnet new blazorwasm -o example
```

結果

```
The template "Blazor WebAssembly App" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on /Users/mitsugi/example/example.csproj...
  復元対象のプロジェクトを決定しています...
  /Users/mitsugi/example/example.csproj を復元しました (2.97 sec)。

Restore succeeded.
```

# 作成したプロジェクトに移動

```
cd example
```

# とりあえず、実行してみる。

```
dotnet run
```


```
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/mitsugi/example
```

# localhost:5001 にアクセスしてみる

<img width="1440" alt="スクリーンショット 2020-06-07 2.30.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/06081575-147b-8b6d-e938-b4fe983c5124.png">


# プロジェクトをVisual Studio for Macで開いてみる。

<img width="1440" alt="スクリーンショット 2020-06-07 2.34.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/6aa362c4-4b1c-79b1-cdf5-8ae66cd46b30.png">

clickイベントでC#で書いたコードが動く。不思議な感じです。

<img width="1440" alt="スクリーンショット 2020-06-07 2.37.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/3dc27f2c-4e9a-2cd8-173b-b6c35fa47aaf.png">

画面内での遷移はSPAと同じような動きで、HistoryAPIを使った作りと同じような動きになってます。

(※初回起動後、の画面遷移ではWEBへのアクセスはなかった。)

# jsonファイルをダウンロードして一覧表示するサンプル

fetchdataというページでは、jsonファイルをwebから取得して、一覧表示していました。

<img width="1440" alt="スクリーンショット 2020-06-07 2.42.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/2e51d766-58d5-22c5-77fd-b8d1fee290d5.png">

↓ダウンロードするjsonファイル
<img width="1440" alt="スクリーンショット 2020-06-07 2.42.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/f649cffb-8c7f-dcdb-b07d-d6a4ffdc9a48.png">

ブラウザで表示した結果。

<img width="1440" alt="スクリーンショット 2020-06-07 2.42.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9370/fbb64411-1ad4-8cba-c43f-25782eb0c5b7.png">


# 参考

* https://dotnet.microsoft.com/download/dotnet-core/3.1
* https://docs.microsoft.com/ja-jp/aspnet/core/blazor/templates?view=aspnetcore-3.1
* https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio
* https://visualstudio.microsoft.com/ja/vs/mac/