JavaScript [JSImport]/[JSExport] 相互運用

• ターゲット フレームワーク モニカー ({TARGET FRAMEWORK} プレースホルダー) を設定します。

  <TargetFramework>{TARGET FRAMEWORK}</TargetFramework>
  

  .NET 7 (net7.0) 以降がサポートされています。

• AllowUnsafeBlocks プロパティを有効にします。これにより、Roslyn コンパイラのコード ジェネレーターでは JS 相互運用のためにポインター使用できるようになります。

  <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  

  警告

  JS 相互運用 API では、AllowUnsafeBlocks を有効にする必要があります。 .NET アプリで独自のアンセーフ コードを実装する場合は注意してください。セキュリティと安定性のリスクを招く可能性があります。 詳細については、「アンセーフ コード、ポインター型、関数ポインター」を参照してください。

構成後のプロジェクト ファイル例 (.csproj) を次に示します。 {TARGET FRAMEWORK} プレースホルダーはターゲット フレームワークです。

<Project Sdk="Microsoft.NET.Sdk.WebAssembly">

  <PropertyGroup>
    <TargetFramework>{TARGET FRAMEWORK}</TargetFramework>
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  </PropertyGroup>

</Project>

• ターゲット フレームワーク モニカーを設定します。

  <TargetFramework>net7.0</TargetFramework>
  

  .NET 7 (net7.0) 以降がサポートされています。

• ランタイム識別子の browser-wasm を指定します。

  <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
  

• 実行可能な出力ファイルの種類を指定します。

  <OutputType>Exe</OutputType>
  

• AllowUnsafeBlocks プロパティを有効にします。これにより、Roslyn コンパイラのコード ジェネレーターでは JS 相互運用のためにポインター使用できるようになります。

  <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  

  警告

  JS 相互運用 API では、AllowUnsafeBlocks を有効にする必要があります。 .NET アプリで独自のアンセーフ コードを実装する場合は注意してください。セキュリティと安定性のリスクを招く可能性があります。 詳細については、「アンセーフ コード、ポインター型、関数ポインター」を参照してください。

• ディスク上のファイルを指すように WasmMainJSPath を指定します。 このファイルはアプリと共に発行されますが、.NET を既存の JS アプリに統合する場合は、このファイルを使用する必要はありません。

  次の例では、ディスク上の JS ファイルは main.js ですが、いずれの JS ファイル名も許容されます。

  <WasmMainJSPath>main.js</WasmMainJSPath>
  

構成後のプロジェクト ファイル (.csproj) の例:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
    <OutputType>Exe</OutputType>
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
    <WasmMainJSPath>main.js</WasmMainJSPath>
    <Nullable>enable</Nullable>
  </PropertyGroup>

</Project>

• setModuleImports では、.NET にインポートするための JS 関数のモジュールに名前を関連付けます。 JS モジュールには dom.setInnerText 関数があります。これを使うと、要素セレクターと時間を受け取り、現在のストップウォッチ時間を UI に表示することができます。 モジュールの名前を任意の文字列にすることはできますが (ファイル名である必要はありません)、JSImportAttribute で使用される名前と一致する必要があります (この記事の後半で説明します)。 dom.setInnerText 関数は C# にインポートされ、C# メソッド SetInnerText によって呼び出されます。 SetInnerText メソッドは、このセクションの後半に示されています。

• exports.StopwatchSample.Reset() では、JS から .NET (StopwatchSample.Reset) への呼び出しを行います。 Reset C# メソッドを使うと、ストップウォッチが実行中の場合は再起動し、実行されていない場合はリセットすることができます。 Reset メソッドは、このセクションの後半に示されています。

• exports.StopwatchSample.Toggle() では、JS から .NET (StopwatchSample.Toggle) への呼び出しを行います。 Toggle C# メソッドを使うと、現在実行中かどうかに応じてストップウォッチを開始または停止できます。 Toggle メソッドは、このセクションの後半に示されています。

• runMain() では Program.Main を実行します。

• setModuleImports では、.NET にインポートするための JS 関数のモジュールに名前を関連付けます。 JS モジュールには、現在のページ アドレス (URL) を返す window.location.href 関数が含まれています。 モジュールの名前を任意の文字列にすることはできますが (ファイル名である必要はありません)、JSImportAttribute で使用される名前と一致する必要があります (この記事の後半で説明します)。 window.location.href 関数は C# にインポートされ、C# メソッド GetHRef によって呼び出されます。 GetHRef メソッドは、このセクションの後半に示されています。

• exports.MyClass.Greeting() では、JS から .NET (MyClass.Greeting) への呼び出しを行います。 Greeting C# メソッドでは、window.location.href 関数を呼び出した結果を含む文字列を返します。 Greeting メソッドは、このセクションの後半に示されています。

• dotnet.run() では Program.Main を実行します。

import { dotnet } from './_framework/dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig, runMain } = await dotnet
  .withApplicationArguments("start")
  .create();

setModuleImports('main.js', {
  dom: {
    setInnerText: (selector, time) => 
      document.querySelector(selector).innerText = time
  }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);

document.getElementById('reset').addEventListener('click', e => {
  exports.StopwatchSample.Reset();
  e.preventDefault();
});

const pauseButton = document.getElementById('pause');
pauseButton.addEventListener('click', e => {
  const isRunning = exports.StopwatchSample.Toggle();
  pauseButton.innerText = isRunning ? 'Pause' : 'Start';
  e.preventDefault();
});

await runMain();

import { dotnet } from './_framework/dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig } = await dotnet
  .withDiagnosticTracing(false)
  .withApplicationArgumentsFromQuery()
  .create();

setModuleImports('main.js', {
  window: {
    location: {
      href: () => globalThis.window.location.href
    }
  }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);

document.getElementById('out').innerHTML = text;
await dotnet.run();

import { dotnet } from './dotnet.js'

const is_browser = typeof window != "undefined";
if (!is_browser) throw new Error(`Expected to be running in a browser`);

const { setModuleImports, getAssemblyExports, getConfig } = 
  await dotnet.create();

setModuleImports("main.js", {
  window: {
    location: {
      href: () => globalThis.window.location.href
    }
  }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);

document.getElementById("out").innerHTML = text;
await dotnet.run();

次の例では、dom.setInnerText 関数は、SetInnerText メソッドが呼び出されたときに main.js モジュールから呼び出されます。

[JSImport("dom.setInnerText", "main.js")]
internal static partial void SetInnerText(string selector, string content);

次の例では、window.location.href 関数は、GetHRef メソッドが呼び出されたときに main.js モジュールから呼び出されます。

[JSImport("window.location.href", "main.js")]
internal static partial string GetHRef();

次の例では、各メソッドが JS にエクスポートされ、JS 関数から呼び出すことができるようになります。

• Toggle メソッドを使うと、ストップウォッチの実行状態に応じてストップウォッチを開始または停止することができます。
• Reset メソッドを使うと、ストップウォッチが実行中の場合は再起動し、実行されていない場合はリセットすることができます。
• IsRunning メソッドを使うと、ストップウォッチが実行されているかどうかを示すことができます。

[JSExport]
internal static bool Toggle()
{
    if (stopwatch.IsRunning)
    {
        stopwatch.Stop();
        return false;
    }
    else
    {
        stopwatch.Start();
        return true;
    }
}

[JSExport]
internal static void Reset()
{
    if (stopwatch.IsRunning)
        stopwatch.Restart();
    else
        stopwatch.Reset();

    Render();
}

[JSExport]
internal static bool IsRunning() => stopwatch.IsRunning;

次の例では、Greeting メソッドにより、GetHRef メソッドを呼び出した結果を含む文字列が返されます。 前述のように、GetHref C# メソッドでは、main.js モジュールから window.location.href 関数の JS を呼び出します。 window.location.href では、現在のページ アドレス (URL) が返されます。

[JSExport]
internal static string Greeting()
{
    var text = $"Hello, World! Greetings from {GetHRef()}";
    Console.WriteLine(text);
    return text;
}