JavaScript相互運用 ― IJSRuntime

導入

Blazorは基本C#だけで完結しますが、ブラウザ固有のAPI（localStorage、地図やチャートのJSライブラリ、alertなど）を使いたいときは、C#からJavaScriptを呼びます。その橋渡しがIJSRuntimeです。

説明

IJSRuntimeを@injectし、InvokeVoidAsync（戻り値なし）やInvokeAsync<T>（戻り値あり）でJS関数を呼びます。

@inject IJSRuntime JS

<button @onclick="SaveName">保存</button>
<button @onclick="LoadName">読み込み</button>
<p>@name</p>

@code {
    private string name = "";

    private async Task SaveName()
    {
        // ブラウザの localStorage にC#から書き込む
        await JS.InvokeVoidAsync("localStorage.setItem", "name", "Blazor");
    }

    private async Task LoadName()
    {
        name = await JS.InvokeAsync<string>("localStorage.getItem", "name");
    }
}

• InvokeVoidAsync("関数名", 引数...)で戻り値なしのJSを呼ぶ
• InvokeAsync<T>("関数名", 引数...)で戻り値（T）を受け取る
• 逆にJSからC#メソッドを呼ぶこともできる（[JSInvokable]＋DotNetObjectReference）
• JS相互運用は「最後の手段」。まずC#とBlazorのAPIで済まないか考えるのが基本

まとめ

• ブラウザ固有APIやJSライブラリはIJSRuntimeで呼ぶ
• 戻り値なしはInvokeVoidAsync、ありはInvokeAsync<T>
• 必要なときだけ使い、基本はC#で完結させる

次回: 第7章。レンダリングモードと、アプリの公開までを押さえます。