2025年5月13日 / 最終更新日時 : 2025年5月13日 @yuuji_mimura ASP.NET Core

Blazor/ASP.NET Coreのデバッグ

この記事にはプロモーションが含まれています。

今回は「Blazor」と「ASP.NET Core」を、VSCodeで実行とデバッグできる様にセットアップします。BlazorはVue.jsやReactなどと同じフロントエンドのユーザーインターフェイスを構築できるフレームワークになっています。ASP.NET CoreはNode.jsなどと同じバックエンド側のフレームワークになっています。両方ともC#という言語を使用して開発可能です。通常ブラウザはJaveScriptしか実行できませんが、Blazorは「WebAssembly」というバイトコードに変換されるためJavaScriptに比べて高速に動作する様です。

.NET SDKをインストールします

こちらのリンクからお使いの環境に合わせた.NETのインストーラーをダウンロードしてインストールします。現在の最新バージョンは9.0ですが、8.0は長期サポート版(LTS)のため半年ほどサポート期間が長くなっています。

Ubuntu(WSL2)の場合は以下の様に入力するとインストールされます。

sudo apt install dotnet-sdk-8.0

WindowsもWSL2もターミナル画面に以下の様に入力するとバージョンが確認できます。

dotnet --version

VSCodeの「拡張機能」ボタンを押して入力欄に「C#」と入力します。表示されたリストから以下の「C#」と「C# Dev Kit」という拡張機能をインストールします。

以上で前準備は完了です。

Blazorプロジェクトを作成して実行します

Windows版のVSCodeでBlazorプロジェクトを作成して、ブレークポイントで停止するのを確認します。

任意のアプリケーション名フォルダー(Blazor等)を作成してVSCodeで開きます。「Ctrl + @」と入力してターミナル画面を開いて以下の様に入力するとアプリのひな型が作成されます。

dotnet new blazorwasm --output .

「dotnet」コマンドでひな型を作成すると常に最新バージョンで作成されるため、最新(9.0)のSDKが入っている環境で8.0のアプリを作成したい場合は、アプリまたは親フォルダ内に「global.json」というファイルを作成して以下の設定をしておくと指定のバージョンでアプリを作成してくれます。

{
  "sdk": {
    "version": "8.0.408"
  }
}

バージョンは「8.0.0」や「8.0.*」などと指定できない様ですので、「dotnet --list-sdks」というコマンドをWindowsやVSCodeのターミナルに入力すると使用可能なSDKのバージョンが表示されます。

S C:\MAMP\htdocs\blazor-projects> dotnet --list-sdks
5.0.416 [C:\Program Files\dotnet\sdk]
8.0.408 [C:\Program Files\dotnet\sdk]
9.0.203 [C:\Program Files\dotnet\sdk]

ひな型が作成されたら「Pages」フォルダ内にある「Counter.razor」というファイルを開いて16行目あたりにブレークポイントを設定します。

左側にある「実行とデバッグ」ボタンを押して、「launch.json ファイルを作成します。」をクリックして表示された上部のリストから「C#」を選択します。

表示されたデバッグのタイプから「.NET: Web アセンブリ - スタンドアロン Blazor ...」を選択します。

以下の様な設定項目が追加されます。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch and Debug Standalone Blazor WebAssembly App",
            "type": "blazorwasm",
            "request": "launch",
            "cwd": "${workspaceFolder}"
        }
    ]
}

「F5」キーを押すとアプリがコンパイルされてブラウザーが起動します。画面の左側にある「Counter」をクリックして表示された画面にある「Click me」ボタンを押すとブレークポイントで停止します。

※現在のところWSL2等を使用したリモートデバッグには対応していない様です。WindowsまたはMac上のVSCodeでデバッグ可能な様です。

ASP.NET Coreプロジェクトを作成して実行します

Windows版のVSCodeでASP.NET Coreプロジェクトを作成して、ブレークポイントで停止するのを確認します。

任意のアプリケーション名フォルダー(WebApp等)を作成してVSCodeで開きます。「Ctrl + @」と入力してターミナル画面を開いて以下の様に入力するとアプリのひな型が作成されます。

dotnet new webapp --output .

ひな型が作成されたら「Pages」フォルダ内にある「Index.cshtml」というファイルを開いて4行目あたりにブレークポイントを設定します。

そのまま「F5」キーを押すとデバッグが実行されますので、デバッガーの選択リストから「C#」を選択します。

次に起動可能なプロジェクトのリストが表示されますので、作成したアプリ(WebApp等)を選択します。

次にスタートアッププロジェクトのリストが表示されますので、作成したアプリ(WebApp等)を選択します。

以上でデバッガーが起動して設定したブレークポイントで停止します。

次回起動時は「F5」キーを押すか、「実行とデバッグ」ボタンを押して起動したいプロジェクトを選択するとデバッグが開始されます。

※WSL2上でも同様の操作でリモートデバッグが可能です。

まとめ

今回はBlazorとASP.NET Coreのデバッグ方法をご紹介しましたが、必ずしも両方をセットで使用しなくてもいい様です。設定にもよりますが、フロントエンドにBlazorを使用してサーバー側に他のWEBサーバー(Apache, nginx等)も使用できる様です。逆にバックエンドにASP.NET Coreを使用して、フロントエンドにReact等を使用することもできる様です。

今回のサンプルでは使用しませんでしたが、対話型のBlazorという仕組みを利用すると「SignalR」というリアルタイム通信を使用して、ユーザーの入力を即座にサーバーに送信して結果に基づいて画面を更新する等の処理が行える様です。Ajax等の技術を使用すれば同様な処理が可能ですが、SignalRはサーバー側からのプッシュ通信も行える様です。

今回の記事を作成するにあたり、以下のサイト様で勉強させていただきました。

以上です。

カテゴリー
ASP.NET Core、Blazor、ブログ
Laravel

前の記事

Laravel版 YelpCampデモ
2025年5月6日
Go

次の記事

Go言語のデバッグ
2025年5月16日