前提の確認

の確認を行います。

JavaScript相互運用機能の使い方はこのような感じです。

@page "/hello-jsinterop"
@inject IJSRuntime jsRuntime;

<button onclick="@Log">Console.Log with JavaScript</button>

@functions {

    void Log()
    {
        jsRuntime.InvokeAsync<string>("console.log", "hello world JavaScript Interop");
    }
}

@injectはサービスのインジェクトを行います。Componentのrazorファイル内で、IJSRuntimeをインジェクトし、そのインスタンスを使うことで、JavaScriptを呼び出すことができます。

Blazorでは、

HttpClient
IJSRuntime
IUriHelper

はデフォルトで作成されていて、@injectをするだけでサービスをインジェクトすることができます。自分で作ったサービスは、デフォルトで作成されないので設定をする必要があります。

コードリーディング

それではコードを見ていきます。リポジトリは、「aspnet/AspNetCore」です。Blazorのコードは「AspNetCore/src/Components/Blazor/」にあります。

IJSRuntimeはデフォルトで作成されています。ですので、まず作成している場所を探しましょう。

dotnet new blazor -oコマンドでBlazorプロジェクトを作成した時のProgram.csは以下の通りです。

using Microsoft.AspNetCore.Blazor.Hosting;

namespace YourNameSpace
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
            BlazorWebAssemblyHost.CreateDefaultBuilder()
                .UseBlazorStartup<Startup>();
    }
}

BlazorWebAssemblyHostはこのようになっています。CreateDefaultBuilderメソッドは、WebAssemblyHostBuilderのインスタンスを生成しています。

public static class BlazorWebAssemblyHost
{
    /// <summary>
    /// Creates a an instance of <see cref="IWebAssemblyHostBuilder"/>.
    /// </summary>
    /// <returns>The <see cref="IWebAssemblyHostBuilder"/>.</returns>
    public static IWebAssemblyHostBuilder CreateDefaultBuilder()
    {
        return new WebAssemblyHostBuilder();
    }
}

次に、WebAssemblyHostBuilderをみてみます。

WebAssemblyHostBuilderのCreateServiceProviderメソッド内に注目します。

private void CreateServiceProvider()
{
    var services = new ServiceCollection();
    services.AddSingleton(_BrowserHostBuilderContext);
    services.AddSingleton<IWebAssemblyHost, WebAssemblyHost>();
    services.AddSingleton<IJSRuntime>(WebAssemblyJSRuntime.Instance);
    services.AddSingleton<IComponentContext, WebAssemblyComponentContext>();
    services.AddSingleton<IUriHelper>(WebAssemblyUriHelper.Instance);
    services.AddSingleton<HttpClient>(s =>
    {
        // Creating the URI helper needs to wait until the JS Runtime is initialized, so defer it.
        var uriHelper = s.GetRequiredService<IUriHelper>();
        return new HttpClient
        {
            BaseAddress = new Uri(WebAssemblyUriHelper.Instance.GetBaseUri())
        };
    });

    foreach (var configureServicesAction in _configureServicesActions)
    {
        configureServicesAction(_BrowserHostBuilderContext, services);
    }

    var builder = _serviceProviderFactory.CreateBuilder(services);
    _appServices = _serviceProviderFactory.CreateServiceProvider(builder);
}

HttpClient
IJSRuntime
IUriHelper

はデフォルトで作成されていますが、ここで作成していることがわかりました。Instanceにだけ注目するとここですね。

    services.AddSingleton<IJSRuntime>(WebAssemblyJSRuntime.Instance);

次は、WebAssemblyJSRuntime.Instanceをみていきましょう。

internal static class WebAssemblyJSRuntime
{
    public static readonly MonoWebAssemblyJSRuntime Instance = new MonoWebAssemblyJSRuntime();
}

WebAssemblyJSRuntime.Instanceは、MonoWebAssemblyJSRuntime型のstaticフィールドです。

MonoWebAssemblyJSRuntimeは今までみたきたものと別のアセンブリで、「Mono.WebAssembly.Interop」にあります。コードはこちら。

MonoWebAssemblyJSRuntimeの各メソッドは内部でInternalCallsを使っています。

InternalCallsはexternとなっています。コメントによるとMono配布のdriver.cの中に実装があるのではないでしょうか。

internal class InternalCalls
{
    // The exact namespace, type, and method names must match the corresponding entries
    // in driver.c in the Mono distribution

    // We're passing asyncHandle by ref not because we want it to be writable, but so it gets
    // passed as a pointer (4 bytes). We can pass 4-byte values, but not 8-byte ones.
    [MethodImpl(MethodImplOptions.InternalCall)]
    public static extern string InvokeJSMarshalled(out string exception, ref long asyncHandle, string functionIdentifier, string argsJson);

    [MethodImpl(MethodImplOptions.InternalCall)]
    public static extern TRes InvokeJSUnmarshalled<T0, T1, T2, TRes>(out string exception, string functionIdentifier, T0 arg0, T1 arg1, T2 arg2);
}

まとめ

簡単にですが、JavaScript相互運用機能・IJSRuntimeのコードを追ってみました。

主要な実装はexternでC言語で書かれているようです。

また機会があれば追ってみます。

BlazorにおけるJavaScript相互運用機能をちょっとだけコードリーディング

前提の確認

コードリーディング

まとめ