BlazorとはJavaScriptの代わりに C# を使って、フロントエンド開発を行いSPAを作れるフレームワークです。
WebAssembly (wasm) によって、.NETのコードをブラウザで実行しています。
前からBlazorを勉強したいと思い、実行環境だけ作成してみたので投稿させていただきました。
C#初心者です。よろしくお願いします。
以下のGet startedの通りに行えば、特に問題なく実行環境を作成できました。
自分が試した環境
- macOS Mojave
- dotnet 3.0.100-preview6-012264
- Google Chrome : 75.0.3770.100 (Official Build) (64-bit)
1. .NET Core 3.0 をインストールする
macOSのインストーラをダウンロード
画面の指示に従って操作を行えばインストールできました。
.NET Core 3.0がインストールされたことを確認。
2. コマンドを実行してBlazorテンプレートをインストール
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2
3. Blazorのプロジェクトを作成
VSCodeを使用してプロジェクト作成した手順を紹介させていただきます
3-1. C# for Visual Studio Code extension のインストール
VSCodeでC#開発を行うときは必須なので入れておきます。
プロジェクト作成
dotnet new blazor -o WebApplication1
code -r WebApplication1 #WebApplication1のフォルダをルートのフォルダにしてVSCodeを開き直す
dotnet run
http://localhost:5000/ を開くとBlazorのプロジェクトを確認することができます。
3-2. カウンターの動きを確認
@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の更新を確認できました。
3-3. コードを変更してみる
Pages/Counter.razorに[Parameter]属性を指定してIncrementAmountのプロパティを追加し、currentCountにIncrementAmountを足すように変更
@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" />とします。
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
+ <Counter IncrementAmount="10" />
コードを変更したので、Ctrl+Cで一度サーバーをシャットダウンし、dotnet runとして起動し直すと変更が反映されます。
4. 監視モードで実行する
dotnet watch runとすることで、ファイルが変更されると自動で再コンパイルしてサーバー起動してくれます。
一回一回Ctrl+Cとする手間がはぶけます。
ただ私の環境ですと自動とはいえ、ファイルを更新 -> サーバリロード で5〜6秒ぐらいかかってしまいました。
もう少しやりやすい方法などありましたら、教えていただきたいです。m(_ _)m
5. chromeでステップ実行
試してみるとおそらくうまくいったので自分が行ったことを書かせていただきます。
参考
- Debug ASP.NET Core Blazor | Microsoft Docs
- Compiling C# to WASM with Mono and Blazor then Debugging .NET Source with Remote Debugging in Chrome DevTools - Scott Hanselman
- macos - Start Google Chrome on Mac with command line switches - Super User
5-1 デバッグモードで起動する
dotnet run --configuration Debug
5-2 chromeをコマンドから起動する
1 chromeを開いているのであれば閉じる
2 以下のコマンドでchromeを開く
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 http://localhost:5000
3 開いたchromeがアクティブウィンドウの状態でshift+option+D
4 dev toolが開くのでブレークポイントを設定する
5 ステップ実行してみる
こちらのコード↓をステップ実行してみます
@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++;
}
}
chromeからステップ実行することができました、スンバラシ…
自分がはまった部分
最後まで読んでいただいてありがとうございました。