Razor（.cshtml）のデバッグ手法を徹底解説！初心者から中級者向けの実践テクニック

Razorは、ASP.NET Coreで使用される強力なビューエンジンであり、C#コードをHTMLに組み込むことができます。しかし、Razorファイル（.cshtml）のデバッグやレイアウト調整の際、コードの変更を即座に反映させることが求められます。本記事では、Razorファイルのデバッグ方法と、効率的な開発手法について解説します。

Razorファイルの実行時コンパイルを有効にする方法
Visual StudioでのRazorファイルのデバッグ手法
Visual Studio CodeでのBlazor WebAssemblyのデバッグ方法
ブラウザ開発者ツールを使用したBlazorアプリのデバッグ
まとめ: RazorファイルやBlazorアプリの効率的なデバッグ方法

Razorファイルの実行時コンパイルを有効にする方法

ASP.NET Coreアプリケーションでは、Razorファイル（.cshtml）はデフォルトでビルド時にコンパイルされます。そのため、変更後に即座に反映させるには、アプリケーションを再ビルドする必要があります。これを解消するために「実行時コンパイル」を有効にする方法を紹介します。この設定により、Razorファイルの編集内容がアプリケーションを再起動せずに反映されるようになります。

手順

RazorRuntimeCompilationパッケージをインストールする
- .NET CLIを使用して、Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilationパッケージをプロジェクトにインストールします。
```
dotnet add package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation
```
- または、Visual Studioの「NuGet パッケージマネージャー」から同パッケージを検索してインストールすることも可能です。

Startup.csで設定を追加する

インストール後、Startup.csファイルのConfigureServicesメソッドを編集します。開発環境でのみ実行時コンパイルを有効化するように設定を追加します。

public void ConfigureServices(IServiceCollection services)
{
    var mvcBuilder = services.AddRazorPages();

    // 開発環境でのみ実行時コンパイルを有効化
    if (Environment.IsDevelopment())
    {
        mvcBuilder.AddRazorRuntimeCompilation();
    }
}

アプリケーションを再起動する
- 設定を反映するためにアプリケーションを一度停止して再起動します。その後、Razorファイルを編集してブラウザをリロードすると、変更が即座に適用されます。

注意点

本番環境での利用を避ける
実行時コンパイルはパフォーマンスに影響を与えるため、本番環境では無効にしておくことが推奨されます。
Visual Studioのホットリロード機能の活用
Visual Studioでは、コード変更を即座に反映できる「ホットリロード」機能も利用可能です。ホットリロードを併用することで、さらに効率的な開発が可能です。

Visual StudioでのRazorファイルのデバッグ手法

Visual Studioを使用すると、Razorファイル（.cshtml）内のC#コード部分をデバッグし、変数の値やロジックの挙動を確認できます。この手法は、Razorファイルに埋め込まれたサーバーサイドコードの問題を迅速に特定・解決するのに役立ちます。以下に、具体的なデバッグ手順を説明します。

手順

Razorファイルを開く
- Visual Studioで、デバッグ対象のRazorファイル（例: Index.cshtml）を開きます。
ブレークポイントを設定する
- Razorファイル内に記述されたC#コード部分（@{ }内や、@if、@foreachなどのコードブロック）を探し、コードの左側の行番号をクリックしてブレークポイントを設定します。
- 例えば、以下のようなコードにブレークポイントを設定可能です：
```
@{
    var message = "Hello, Razor!";
}
<p>@message</p>
```
デバッグモードでアプリケーションを起動する
- Visual Studioの「デバッグの開始」ボタンをクリックするか、F5キーを押してアプリケーションをデバッグモードで起動します。
- アプリケーションが起動し、対象のRazorページがブラウザに表示されます。
コードのステップ実行
- ブレークポイントでアプリケーションの実行が停止します。ここから以下の操作が可能です：
  - ステップ実行 (F10): 次の行に進みながらコードを確認。
  - ステップイン (F11): 呼び出し元のメソッドに入って詳細を確認。
  - ステップアウト (Shift + F11): 現在のメソッドから抜け出す。
- また、Visual Studioの「ウォッチ」ウィンドウや「ローカル」ウィンドウで変数の値を確認することもできます。
即時ウィンドウを使用してコードを検証する
- デバッグ中に即時ウィンドウ（Ctrl + Alt + I）を開き、変数の値を直接確認したり、簡単な式を評価したりできます。
```
? message
```
デバッグの終了
- コードの問題を特定・修正したら、デバッグを終了します。デバッグセッションを終了するには「停止」ボタンをクリックするか、Shift + F5を押します。

ヒントと注意点

Visual Studioのツールを活用する
- デバッグ中、Visual Studioの「診断ツール」や「コールスタック」などを利用すると、アプリケーションの動作を詳細に追跡できます。
ビューのロジックを簡素化
- Razorファイル内の複雑なロジックは、デバッグを難しくする原因になります。必要に応じて、ロジックをコントローラーやサービス層に移動させることを検討してください。
開発モードでのデバッグ
- アプリケーションを「開発モード」で実行すると、Razorのエラーメッセージが詳細に表示されます。appsettings.jsonファイルで以下のように設定できます：
```
"ASPNETCORE_ENVIRONMENT": "Development"
```

Visual Studio CodeでのBlazor WebAssemblyのデバッグ方法

Visual Studio Code（VS Code）を使用してBlazor WebAssemblyアプリケーションをデバッグする方法を紹介します。Blazor WebAssemblyはクライアントサイドで動作するため、デバッグにはブラウザやVS Codeの設定を適切に構成する必要があります。

必要な前提条件

VS Code: 最新バージョンが推奨されます。
.NET SDK: Blazor WebAssemblyを作成・実行するための環境。
ブラウザ: Google ChromeまたはMicrosoft Edge（Chromiumベース）。

デバッグ設定の手順

プロジェクトを準備する
- Blazor WebAssemblyアプリケーションを作成するか、既存のプロジェクトを開きます。
```
dotnet new blazorwasm -o BlazorApp
cd BlazorApp
```

VS Codeのデバッグ設定を追加する

プロジェクトのルートフォルダにある .vscode フォルダ内に launch.json を作成します（フォルダがない場合は作成してください）。

以下の内容を launch.json に追加します：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch and Debug Blazor WebAssembly",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "<https://localhost:5001>",
            "webRoot": "${workspaceFolder}",
            "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
        }
    ]
}

url の値は、アプリケーションが実行されるURLです。プロジェクトの構成に合わせて調整してください。

アプリケーションを起動する
- ターミナルを開き、以下のコマンドでアプリケーションを起動します：
```
dotnet run
```
- サーバーが起動し、https://localhost:5001 などのURLでアプリケーションが動作します。
VS Codeでデバッグを開始する
- 左側の「デバッグ」アイコンをクリックし、Launch and Debug Blazor WebAssembly を選択します。
- 「デバッグの開始」をクリックすると、ブラウザが起動し、デバッグモードに入ります。
ブレークポイントを設定する
- VS Code内でデバッグしたい .razor ファイルを開き、C#コード部分にブレークポイントを設定します。
- 例：
```
@code {
    private int counter = 0;

    private void IncrementCount()
    {
        counter++;
    }
}
```
- IncrementCount メソッド内などにブレークポイントを設定します。
デバッグ操作
- ブレークポイントで実行が停止したら、以下の操作を行います：
  - ステップ実行（F10）
  - ステップイン（F11）
  - ステップアウト（Shift + F11）
- 「変数」ウィンドウや「コールスタック」を確認してコードの挙動を詳細に追跡できます。

注意点とヒント

ブラウザのリモートデバッグを有効にする
デバッグにはリモートデバッグが必要です。Chromeを以下のように起動すると、リモートデバッグが有効になります：
```
chrome --remote-debugging-port=9222 --user-data-dir="C:\\Temp\\chrome-debug"
```
HTTPS証明書の問題
開発環境ではHTTPS証明書のエラーが発生する場合があります。その場合、ブラウザで手動でエラーを無視して進んでください。
サンプルコードを活用
VS Codeでは、C#コードのデバッグだけでなく、JavaScriptやCSSのデバッグも可能です。複数の言語をデバッグする際は「ソースマップ」を活用してください。

ブラウザ開発者ツールを使用したBlazorアプリのデバッグ

Blazor WebAssemblyアプリはブラウザ上で実行されるため、Google ChromeやMicrosoft Edgeなどのブラウザの開発者ツールを使用してデバッグすることが可能です。ブラウザ開発者ツールを活用することで、.razorファイル内のC#コードや、HTML/CSS/JavaScriptを含むアプリ全体の挙動を詳細に追跡できます。

手順

アプリケーションを起動する
- ターミナルを開き、以下のコマンドでBlazor WebAssemblyアプリを実行します：
```
dotnet run
```
- ブラウザでアプリケーションのURL（例: https://localhost:5001）を開きます。
ブラウザをリモートデバッグモードで起動する（必要に応じて）
- ChromeまたはEdgeでリモートデバッグを有効にするには、以下のコマンドを使用します：
```
chrome --remote-debugging-port=9222 --user-data-dir="C:\\Temp\\blazor-debug"
```
- これにより、開発者ツールとBlazorアプリ間でデバッグ用の通信が確立されます。
ブラウザの開発者ツールを開く
- ブラウザでアプリケーションを開いた状態で、F12キーを押すか、右クリックして「検証」を選択します。
- 開発者ツールが表示されます。
Blazorデバッグ用の設定を行う
- 開発者ツールの「ソース」タブに移動し、以下の手順を実行します：
  1. 左側のファイルツリーで_frameworkディレクトリを探します。
  2. _framework/blazor.boot.jsonを開きます。
  3. _framework/debugや_framework/_binからアプリケーションの.dllファイルを探します。
ブレークポイントを設定する
- 開発者ツールの「ソース」タブでデバッグ対象の.razorファイルやC#コードが含まれるDLLファイルを見つけます。
- デバッグしたい箇所にブレークポイントを設定します。
  - 例: カウンタ機能のメソッドなど。
```
private void IncrementCount()
{
    counter++;
}
```
デバッグを実行する
- ブレークポイントが設定された状態でアプリケーションを操作します。設定した箇所で実行が停止し、変数の値を確認したり、ステップ実行を行ったりできます。

注意点

リモートデバッグが必須
Blazor WebAssemblyはクライアントサイドで動作するため、通常のブラウザデバッグとは異なり、.dllファイルのデバッグに対応するリモートデバッグが必要です。
実行中のコードの確認
開発者ツールの「コンソール」タブを使用して、console.log()メッセージを確認したり、C#コードの結果を監視することも可能です。
ホットリロードとの組み合わせ
Visual StudioやVS Codeでホットリロードを有効にしている場合、編集内容が即時反映されます。これにより、ブラウザデバッグと開発ツールのデバッグを併用できます。

ヒント

CSSとDOMの調整
「要素」タブを使用して、アプリのHTML構造やCSSのスタイルを確認し、リアルタイムで変更できます。
ネットワークトラフィックの分析
「ネットワーク」タブでBlazorが生成するAPIリクエストやアセットのロード状況を確認することで、パフォーマンスの問題を特定できます。

まとめ: RazorファイルやBlazorアプリの効率的なデバッグ方法

RazorファイルやBlazorアプリケーションの開発を効率的に進めるには、適切なデバッグ手法を活用することが重要です。本記事では、Visual Studio、Visual Studio Code、ブラウザ開発者ツールを使用したデバッグ方法を詳しく解説しました。

主なポイント

Razorファイルの実行時コンパイル
- 実行時コンパイルを有効にすることで、Razorファイルの変更を即時に反映可能。
- パッケージインストールやStartup.csでの設定追加が必要。
- 注意点: 開発環境に限定することでパフォーマンスへの影響を防止。
Visual Studioでのデバッグ
- ブレークポイントを設定し、ステップ実行や変数確認が可能。
- 即時ウィンドウやウォッチ機能でC#コードの動作を詳細に検証。
- 「開発モード」での運用によりエラーメッセージを詳しく確認できる。
Visual Studio CodeでのBlazor WebAssemblyデバッグ
- launch.jsonファイルを設定してリモートデバッグを有効化。
- ブラウザとの連携により、クライアントサイドのコード挙動を追跡。
- 軽量な開発環境でのデバッグに最適。
ブラウザ開発者ツールの活用
- ブレークポイントを設定してC#コードやUIのデバッグが可能。
- 「ネットワーク」や「要素」タブでパフォーマンスやUI構造の確認が容易。
- リモートデバッグを活用し、Blazor WebAssembly特有の挙動もデバッグ可能。

効率的なデバッグのためのヒント

複数のデバッグ手法を併用する
Visual Studioの強力なデバッグ機能とブラウザツールの柔軟性を組み合わせることで、サーバーサイドとクライアントサイドの両方の問題を迅速に解決できます。
ホットリロードの活用
Visual StudioやVS Codeのホットリロード機能を活用すれば、コード変更を即座に反映しつつデバッグが可能です。
デバッグ環境を整理する
開発環境（Developmentモード）を適切に設定し、本番環境とは分離した形でデバッグを行いましょう。