【C#】macOSでBlazorの実行環境を作成してみた

BlazorとはJavaScriptの代わりに C# を使って、フロントエンド開発を行いSPAを作れるフレームワークです。
WebAssembly (wasm) によって、.NETのコードをブラウザで実行しています。

前からBlazorを勉強したいと思い、実行環境だけ作成してみたので投稿させていただきました。
C#初心者です。よろしくお願いします。

---

以下のGet startedの通りに行えば、特に問題なく実行環境を作成できました。

- [Get started with ASP.NET Core Blazor | Microsoft Docs](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio)

# 自分が試した環境

- macOS Mojave
- dotnet 3.0.100-preview6-012264
- Google Chrome : 75.0.3770.100 (Official Build) (64-bit)


# 1. `.NET Core 3.0` をインストールする

- [Download .NET Core 3.0 (Linux, macOS, and Windows)](https://dotnet.microsoft.com/download/dotnet-core/3.0)

macOSのインストーラをダウンロード

<img width="1142" alt="Screen Shot 2019-06-30 at 3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/12fd74b0-9aa9-3c11-3043-bb949ec016a2.png">

画面の指示に従って操作を行えばインストールできました。

<img width="777" alt="Screen Shot 2019-06-30 at 3.22.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/02bdd831-358b-8236-053a-82fc946d4e65.png">

.NET Core 3.0がインストールされたことを確認。

<img width="617" alt="Screen Shot 2019-06-30 at 3.24.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/b970b654-0aba-b6ad-048a-cafcce4d5066.png">

# 2. コマンドを実行してBlazorテンプレートをインストール

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

# 3. Blazorのプロジェクトを作成

VSCodeを使用してプロジェクト作成した手順を紹介させていただきます

### 3-1. [C# for Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) のインストール

VSCodeでC#開発を行うときは必須なので入れておきます。

### プロジェクト作成

```bash:bash
dotnet new blazor -o WebApplication1
code -r WebApplication1 #WebApplication1のフォルダをルートのフォルダにしてVSCodeを開き直す
dotnet run
```

![JUiS8Zt49a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/e68abde1-b83b-10b6-9991-0696375ce23f.gif)

http://localhost:5000/ を開くとBlazorのプロジェクトを確認することができます。

<img width="1061" alt="Screen Shot 2019-06-30 at 3.47.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/4e224378-4a75-c829-17b3-6cb0b92a98b2.png">

### 3-2. カウンターの動きを確認

```html:Pages/Counter.razor
@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}
```

`@page`で`/counter`と指定されているので`http://localhost:5000/counter` とアクセスすると、`Pages/Counter.razor`の内容が実行されます。

`@onclick`でクリックイベントを指定し、`@IncrementCount`が実行され、`@currentCount`の更新を確認できました。

![eQX9Wd6FU8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/8a2a70f4-0837-e2b0-7f63-f94b00429208.gif)

### 3-3. コードを変更してみる

`Pages/Counter.razor`に`[Parameter]`属性を指定して`IncrementAmount`のプロパティを追加し、`currentCount`に`IncrementAmount`を足すように変更

```diff:Pages/Counter.razor
  @page "/counter"

  <h1>Counter</h1>

  <p>Current count: @currentCount</p>

  <button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

  @code {
      int currentCount = 0;

+     [Parameter]
+     private int IncrementAmount { get; set; } = 1;

      void IncrementCount()
      {
-         currentCount++;
+         currentCount += IncrementAmount;
      }
  }
```

ホーム画面に`<Counter />`エレメントを追加します。
先ほどCounterコンポーネントに`IncrementAmount`プロパティを追加したので、`<Counter IncrementAmount="10" />`とします。

```diff:Pages/Index.razor
  @page "/"

  <h1>Hello, world!</h1>

  Welcome to your new app.

  <SurveyPrompt Title="How is Blazor working for you?" />

+ <Counter IncrementAmount="10" />
```

---

コードを変更したので、<kbd>Ctrl+C</kbd>で一度サーバーをシャットダウンし、`dotnet run`として起動し直すと変更が反映されます。

![zlOgB3KuZi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/ada312e1-1ded-2dbb-b768-0c95cb11a2be.gif)

# 4. 監視モードで実行する

`dotnet watch run`とすることで、ファイルが変更されると自動で再コンパイルしてサーバー起動してくれます。
一回一回<kbd>Ctrl+C</kbd>とする手間がはぶけます。

ただ私の環境ですと自動とはいえ、ファイルを更新 -> サーバリロード で5〜6秒ぐらいかかってしまいました。
もう少しやりやすい方法などありましたら、教えていただきたいです。m(_ _)m

# 5. chromeでステップ実行

試してみるとおそらくうまくいったので自分が行ったことを書かせていただきます。

参考

- [Debug ASP.NET Core Blazor | Microsoft Docs](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/debug?view=aspnetcore-3.0)
- [Compiling C# to WASM with Mono and Blazor then Debugging .NET Source with Remote Debugging in Chrome DevTools - Scott Hanselman](https://www.hanselman.com/blog/CompilingCToWASMWithMonoAndBlazorThenDebuggingNETSourceWithRemoteDebuggingInChromeDevTools.aspx)
- [macos - Start Google Chrome on Mac with command line switches - Super User](https://superuser.com/questions/157484/start-google-chrome-on-mac-with-command-line-switches)

### 5-1 デバッグモードで起動する

```bash
dotnet run --configuration Debug
```

### 5-2 chromeをコマンドから起動する

1 chromeを開いているのであれば閉じる
2 以下のコマンドでchromeを開く

```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 http://localhost:5000
```

3 開いたchromeがアクティブウィンドウの状態で<kbd>shift+option+D</kbd>
4 dev toolが開くのでブレークポイントを設定する
5 ステップ実行してみる

こちらのコード↓をステップ実行してみます

```html:Pages/Counter.razor
@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
        currentCount++;
        currentCount++;
        currentCount++;
        currentCount++;
    }
}
```

![vCY6DJ7t2p.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/b7bc23ae-6470-4c6d-2132-47c7ef25510f.gif)

chromeからステップ実行することができました、スンバラシ…


<details><summary>自分がはまった部分</summary><div>

### 5-3. dev toolを<kbd>command+R</kbd>でリロードすると、なぜかファイルが見れなくなってしまう

<kbd>command+R</kbd>ではなく、左上のリロードをマウスでクリックするとファイルが見れるようになりました。↓
無事ソースが確認できました。

![muy4CAoJux.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/fc1a968a-99d0-97f2-9c31-d6ce055719ae.gif)

</div></details>

---

最後まで読んでいただいてありがとうございました。