はじめまして！ 👋😄

• 山本悠滋 (@igrep)
• Wasm とプリキュアとポムポムプリンと音ゲーが大好き
• 趣味では自作言語を作ったり、
• MDN の翻訳ミートアップに参加したり、
• 仕事では MagicPod という会社でテクニカルサポートをしたりしています。
• igrep.el という Emacs プラグインがありますが無関係です！

📝今日話すこと

• 🔁「オブジェクトの所有権」は、
  • 異なる環境間で、
  • 情報を安全かつ高速に、
  • やり取りするための重要なアイディア
• 📮すでに postMessage というブラウザーの API や、
• 📮WebAssembly Component Model という仕様で使われており、
• ❣️今後ますます重要な知識になるはず！

📝アジェンダ

1. 所有権に入る前に…
   • postMessage とは？
   • 普通に postMessage でオブジェクトをやり取りしよう
   • 今度は Wasm Component Model でもオブジェクトをやり取りしよう
2. 所有権とは？
3. 所有権を移動させるとどうなる？
4. 所有権を移動させないとどうなる？
5. 普通のやり取り（コピー）だとダメなのか？

所有権に入る前に…

postMessageとは:

• JavaScript のオブジェクトを異なる環境（スレッド）間で安全にやり取りするための API

普通に postMessage でオブジェクトをやり取りしよう

<html>
<script>
  // メインスレッド
  const worker = new Worker("worker.js");
  worker.postMessage({ x: 1, y: 2 });
</script>
....

// worker.js
onmessage = (event) => {
  const { x, y } = event.data;
  postMessage({ x: x + 1, y: y + 1 });
};

postMessage によるオブジェクトのやり取りの仕組み

• オブジェクトをコピーしてやり取りする

今度は Wasm Component Model でもオブジェクトをやり取りしよう

Wasm Component Model って？:

• WebAssembly の仕様として、
• 「Component Model ABI」に従った「Wasm Component」を作ると、
• お互いの関数にお互いのオブジェクトを渡して呼び合えるようになる
  • 違う言語で作られた Wasm Component 同士でも OK！
  • FFI とかよりも安全で楽ちん！
• ブラウザーに入ると、JS以外の言語からブラウザーのAPIを呼ぶのが簡単に！
  • hoge

例

詳細はリポジトリーを参照！

// example.wit

world example {
  export greet: func(caller: string) -> string;
}

例

# python.py
import sys

class WitWorld():
    def greet(self, caller: str) -> str:
        version = sys.version_info
        major = version.major
        minor = version.minor
        micro = version.micro
        return f"Hello, {caller}! I'm Python {major}.{minor}.{micro}!"

例

componentize-py で Wasm Component を作り、jco で ESM に変換する:

$ componentize-py -d example.wit -w example componentize python -o python.wasm
$ jco transpile python.wasm -o out-python

例

実行例:

import { greet } from "./out-python/python.js";

console.log(greet(`Node.js ${process.version}`));

結果:

$ node simple/index.js
Hello, Node.js v26.7.0! I'm Python 3.14.0!

所有権とは

*️⃣このスライドにおける定義

• あるオブジェクト（プログラムが扱うデータ）がどの環境に属しているかを示す概念
• そのオブジェクトを使えるのは、属している環境だけ
  • 所有権を移動させると、移動先の環境でオブジェクトが使えるようになる代わりに、元の環境では使えなくなる

環境とは

*️⃣これもこのスライドにおける定義

プログラム（と、そのパーツ。スレッドやモジュール）がアクセスできるメモリー内のデータの集まり

// モジュール（がアクセスできる変数）の環境
import { imported } from "some-module.mjs";
const x = "hello";

function f() {
  // 関数（がアクセスできる変数）の環境
  const y = "world";
  console.log(imported, x, y);
}

postMessage における所有権の移動 (1)

<html>
<script>
  // メインスレッド
  const worker = new Worker("worker.js");
  const array = new Uint8Array([1, 2, 3]);
  // ここで `array` の所有権を `worker` に移動させる
  worker.postMessage(array, [array.buffer]);
  console.log(array); // ← ここでエラー！
</script>
....

// worker.js
onmessage = (event) => {
  const array = event.data;
  console.log(array);
};

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Transferable_objects

どんなオブジェクトを「移動させないといけない」のか

• 🐢コピーするには時間がかかるオブジェクト
  • 例: （サイズが大きな）ArrayBufferとか
• 💥1つのスレッドが占有しないとデータが競合してしまうオブジェクト
  • 例: MessagePortとか、OffscreenCanvasとか
  • ⚠️複数のスレッドで共有するのが極めて危険

https://share.google/aimode/vaK8RnKezhQ7bTETR

Wasm Component Model における所有権の移動

JSによるWasmコンポーネント作りの参考に: - ComponentizeJS/EXAMPLE.md at main · bytecodealliance/ComponentizeJS

シミュレーションしてみよう

所有権を侵害したやり取りのシミュレーションに - Proxy - JavaScript | MDN

📝まとめ

取り上げられなかった話題

• WITにおけるresource構文
• ownとborrowの違い

参考（本文中に言及がなかったもののみ）

• component-model/design/mvp/Explainer.md at main · WebAssembly/component-model

https://github.com/WebAssembly/component-model/blob/main/design/high-level/Choices.md

• Runtime system - Wikipedia