(20/30)一緒にBlazorを学ぼう：ログ記録

システム開発において、ログ記録は重要なことですが、これまで触れていませんでした。筆者は最近になってようやく気づいたので、実装してみましょう！

筆者はBlazor Serverを使用していますが、公式ドキュメントではBlazor WebAssemblyの方法しか提供されていません。まずは後者を試してみます。

まず、以前作成したBlazorWasmプロジェクトを開き、Counter.razorに@using Microsoft.Extensions.Logging;を追加し、サービス@inject ILogger<Counter> _logger;を注入します。そして、元のIncrementCount()メソッド内に通知メッセージを追加します。ここではLogWarning()を使用していますが、他にもLogCritical、LogDebug、LogErrorなどが使用できます。

@page "/counter" @using Microsoft.Extensions.Logging @inject ILogger<Counter>
  _logger

  <PageTitle>Counter</PageTitle>

  <h1>Counter</h1>

  <p role="status">現在のカウント: @_currentCount</p>

  <button class="btn btn-primary" @onclick="IncrementCount">クリックしてね</button>

  @code { private int _currentCount; private void IncrementCount() {
  _logger.LogWarning("美女がクリックしたぞ！"); _currentCount++; } }</Counter
>

次に、スタートアッププロジェクトをBlazorWasmプロジェクトに変更し、起動後にCounterページに移動します。ボタンをクリックした後、F12キーを押してConsoleタブに切り替えると、定義したメッセージが表示されます。

Blazor WebAssemblyではこんなに簡単なのに、Blazor Serverでも同じでしょうか？

残念ながらBlazor Serverはこの方法をサポートしていません。現在のところ、IJSRuntimeを使用してブラウザのconsole.logでメッセージを表示する方法しかなく、異なるレベルのログを表示するには独自にカスタマイズする必要があります。

Blazor Serverプロジェクトに戻り、JsInteropClassesにConsoleLog()メソッドを追加します。このメソッドはconsole.log()を呼び出すだけです。

public async Task ConsoleLog(string message)
{
	await _js.InvokeAsync<object?>("console.log", message);
}

次に、Blog.razor.csでOnAfterRenderAsync()をオーバーライドし、その中でConsoleLog()を呼び出します。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	await _jsClass!.ConsoleLog("これはBlazor Serverのconsole.logメッセージです");
}

OnInitializedAsync()に記述しない理由は、事前レンダリング(pre-render)方式を採用しているため、この時点ではJavaScriptがまだ準備できていないからです。OnInitializedAsync()で呼び出すと、以下のようなエラーが発生します。

どうしてもOnInitializedAsync()で呼び出したい場合は、_Layout.cshtmlで<component>のrender-mode属性をServerPrerenderedからServerに変更してください。

Serverのrender-modeには3種類あります：Static、Server、ServerPrerenderedです。1つ目のStaticは最も高速で、すべてのコンポーネントを静的なHTMLファイルに変換します。2つ目のServerは最も遅く、最初に一種のマーカーを送信し、ユーザーがそのコンポーネントを起動した後に実際にHTMLファイルとしてレンダリングされます。3つ目のServerPrerenderedは妥協案で、まずコンポーネントを静的なHTMLファイルとしてレンダリングしますが、対話機能はなく、ユーザーがコンポーネントを起動した後にサーバーに機能を追加するよう通知します。

これが、render-modeをServerに変更した場合にのみ有効になる理由です。なぜなら、この時点ではConsoleLog()がまだJavaScriptファイルに変換されていないからです。

参照：

1. ASP.NET Core Blazor logging
2. LoggerExtensions Class
3. How can I write into the browser´s console via Blazor WebAssembly?
4. Blazor Server
5. What's the difference between RenderMode.Server and RenderMode.ServerPrerendered in blazor?
6. RenderMode Enum

注：本記事のコードは.NET 6 + Visual Studio 2022でリファクタリングされています。原文リンクとリファクタリング後のコードを比較して学習できます。ご一読いただきありがとうございます。原作者を応援してください。