はじめに

Blazorでは，ブラウザ内で実行可能なC#のコードを書くことができます．しかしながら，DOM要素の操作や凝ったUIを作ろうとするとJavaScriptが必要となってきます．

JavaScriptをBlazorで利用する方法は，JS相互運用(JavaScript Interop)と呼ばれていて，下記ドキュメントに詳細が記されています．
ASP.NET Core Blazor JavaScript の相互運用性 (JS 相互運用)

ただ，むやみにJavaScript呼び出しを散りばめていくとコードの見通しが悪くなってしまうので，どうにかしたいです．

サービスクラスしてうまく切り出す方法があったので，備忘を兼ねてまとめて行きたいと思います．

環境

.NET 9
Blazor Web App (レンダーモードはページ/コンポーネントごとに指定)

IJSRuntimeを直接使うやり方

これはASP.NET Core Blazor JavaScript の相互運用性 (JS 相互運用)に載っている通常のやり方です．

JavaScriptを用意

例として，ブラウザが何かを調べてみようと思います ¹．
.jsファイルを作成して，Serverプロジェクトのwwwroot下に置きます．

wwwroot/browserCheck.js

export function getBrowser() {
    var userAgent = navigator.userAgent.toLowerCase();

     if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
         return 'Internet Explorer';
     } else if (userAgent.indexOf('edge') != -1) {
         return 'Edge';
     } else if (userAgent.indexOf('chrome') != -1) {
         return 'Google Chrome';
     } else if (userAgent.indexOf('safari') != -1) {
         return 'Safari';
     } else if (userAgent.indexOf('firefox') != -1) {
         return 'FireFox';
     } else if (userAgent.indexOf('opera') != -1) {
         return 'Opera';
     } else {
         return 'Other';
     }
}

JavaScriptを呼び出す

下記はServer側の実装です．
WebAssemblyの場合は，Clientプロジェクトで実装します．

Home.razor

@page "/"
@rendermode InteractiveServerWithoutPrerendering
@implements IAsyncDisposable

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<p>Current browser: @browser</p>

@code {

    [Inject]
    IJSRuntime JSRuntime { get; set; } = default!

    private string? browser;

    private IJSObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // JavaScriptを読み込む
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./browserCheck.js");

            // JavaScriptを使用する
            browser = await module.InvokeAsync<string>("getBrowser");

            StateHasChanged();
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is { })
        {
            try
            {
                // 読み込んだJavaScriptを破棄
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}

※ ややこしいのでプリレンダリングはOFFにしています．プリレンダリングがONの場合，JavaScript呼び出しはOnAfterRenderAsync以降にしないと実行時エラーになります．

Server版

WASM版

このままだと

必要なページやコンポーネントごとにIJSRuntimeをインジェクトして，moduleを生成して．Disposeしてとコードがとっ散らかってしまいます．なので，Serviceクラスとして切り出して使い勝手を良くしたいです．

サービスクラス化していく

基底クラス作成

基底クラスはBlazor作成の一人であるSteve Sanderson氏が提案してくれています²ので，参考にします．

JSModule.cs


public abstract class JSModule(IJSRuntime js, string moduleUrl) : IAsyncDisposable
{
    private readonly Task<IJSObjectReference> moduleTask 
        = js.InvokeAsync<IJSObjectReference>("import", moduleUrl).AsTask();

    protected async ValueTask InvokeVoidAsync(string identifier, params object[]? args)
        => await (await moduleTask).InvokeVoidAsync(identifier, args);

    protected async ValueTask<T> InvokeAsync<T>(string identifier, params object[]? args)
        => await (await moduleTask).InvokeAsync<T>(identifier, args);

    public async ValueTask DisposeAsync()
    {
        try
        {
            await (await moduleTask).DisposeAsync();
        }
        catch (JSDisconnectedException)
        {
        }
    }
}

サービスクラス作成

上記のJSModuleを継承します（Interfaceもついでに）．

public interface IBrowserCheckService
{
    Task<string> GetBrowserAsync();
}

public class BrowserCheckService(IJSRuntime js) : JSModule(js, _jsUrl), IBrowserCheckService
{
    private const string _jsUrl = "./browserCheck.js";

    public async Task<string> GetBrowserAsync()
        => await InvokeAsync<string>("getBrowser");
}

Program.csでDIコンテナに入れます．

Program.cs

builder.Services.AddScoped<IBrowserCheckService, BrowserCheckService>();

ページで使用する

下記はSever版です．
WebAssembly版の修正もほぼ同じです．

Home.razor

@page "/"
@using BlazorApp1.Client.Service
@rendermode InteractiveServerWithoutPrerendering

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<p>Current browser: @browser</p>

@code {

    [Inject]
    IBrowserCheckService BrowserCheckService { get; set; } = default!;

    private string? browser;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            browser = await BrowserCheckService.GetBrowserAsync();

            StateHasChanged();
        }
    }
}

Server版

WASM版

とても使いやすくなりました．

余談

上記のJSModuleですが，アップデート版があり，面白いので記載します．
こちらのブログに載っています．
Blazor Bits: Javascript Module Interop Base Class

/// <summary>
/// Helper for loading any JavaScript (ES6) module and calling its exports
/// </summary>
public abstract class JSModule : IAsyncDisposable
{
    private readonly CancellationTokenSource _cancellationTokenSource = new();
    private readonly AsyncLazy<IJSObjectReference> _jsModuleProvider;
    private bool _isDisposed;

    /// <summary>
    /// On construction, we start loading the JS module
    /// </summary>
    /// <param name="js"></param>
    /// <param name="moduleUrl">javascript web uri</param>
    protected JSModule(IJSRuntime js, string moduleUrl)
        => _jsModuleProvider = new AsyncLazy<IJSObjectReference>(async () =>
            await js.InvokeAsync<IJSObjectReference>("import", moduleUrl));

    /// <inheritdoc />
    public virtual async ValueTask DisposeAsync()
    {
        await DisposeAsyncCore().ConfigureAwait(false);
        GC.SuppressFinalize(this);
    }

    /// <summary>
    /// Perform the asynchronous cleanup the JS module.
    /// </summary>
    protected virtual async ValueTask DisposeAsyncCore()
    {
        if (_isDisposed)
            return;

        _cancellationTokenSource.Cancel();
        _cancellationTokenSource.Dispose();

        if (_jsModuleProvider.IsValueCreated)
        {
            var module = await _jsModuleProvider.Value;

            // ここだけ修正．そのままだとServer版でエラーになるので，try-catchしときます
            // 詳細: https://learn.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-9.0#javascript-interop-calls-without-a-circuit
            try
            {
                await module.DisposeAsync().ConfigureAwait(false);
            }
            catch (JSDisconnectedException)
            {
            }
            
        }
        _isDisposed = true;
    }

    /// <summary>
    /// invoke exports from the module with an expected return type T
    /// </summary>
    /// <param name="identifier"></param>
    /// <param name="args"></param>
    /// <typeparam name="T">Return Type</typeparam>
    /// <returns></returns>
    protected async ValueTask<T> InvokeAsync<T>(string identifier, params object[]? args)
    {
        var jsModule = await _jsModuleProvider.Value;
        return await jsModule.InvokeAsync<T>(identifier, _cancellationTokenSource.Token, args);
    }

    /// <summary>
    /// invoke exports from the module
    /// </summary>
    /// <param name="identifier"></param>
    /// <param name="args"></param>
    protected async ValueTask InvokeVoidAsync(string identifier, params object[]? args)
    {
        var jsModule = await _jsModuleProvider.Value;
        await jsModule.InvokeVoidAsync(identifier, _cancellationTokenSource.Token, args);
    }

    /// <summary>
    /// Asynchronous initialization to delay the creation of a resource until it’s absolutely needed.
    /// </summary>
    /// <remarks>
    /// This naive approach is much quicker than attempting to explain the use of a DotNext
    /// implementation. Alternatively, DotNext threading could be added via NuGet: `dotnet add
    /// package DotNext.Threading`.
    /// </remarks>
    /// <see href="https://devblogs.microsoft.com/pfxteam/asynclazyt/" />
    /// <see href="https://github.com/dotnet//blob/master/src/DotNext.Threading/Threading/AsyncLazy.cs" />
    /// <see href="https://dev.azure.com/vercodev/Venso/_git/Vanguard?path=%2FVanguard%2FVanguard.Core%2FAsyncLazy.cs" />
    /// <typeparam name="T">Resource to be initialized asynchronously</typeparam>
    public class AsyncLazy<T> : Lazy<Task<T>>
    {
        public AsyncLazy(Func<T> valueFactory) :
            base(() => Task.Factory.StartNew(valueFactory))
        { }

        public AsyncLazy(Func<Task<T>> taskFactory) :
            base(() => Task.Factory.StartNew(taskFactory).Unwrap())
        { }
    }
}

AsyncLazyは非同期操作に対応した遅延初期化パターンを実装したクラスです．
これを使うことで，リソースの最適化やUI応答性の向上を図れます．

このクラスは.NEXTというライブラリにいます．
.NEXTはBCL（C#の標準組み込みライブラリ）の発展版で，dotnetの公式リポジトリで管理されています．

Nugetから使用することもできます．
Nuget .NEXT

ブログによると，もしかするとBCLに入ってくるかもとあるので，期待ですね．