Golang の WASM (Golang から JavaScript の呼び出し, JavaScript から Golang の呼び出し)

基本的なことは以下の公式ドキュメントをみてください。

<https://github.com/golang/go/wiki/WebAssembly>

最低限のステップをまとめると、以下の手順になります。

• 以下の環境変数を指定して WASM 化したいプロジェクトをビルドします。

  • これで main.wasm に WASM 化したコードが出力されます。

$ GOOS=js GOARCH=wasm go build -o main.wasm

• 以下の wasm_exec.js をコピーします。

$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

• html で wasm_exec.js をロードし、JS から以下を実行すると

wasm 化した go のプログラムが実行されます。

  const go = new Go();
  WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
      go.run(result.instance);
  });

以上のステップで、 go.run(result.instance); のタイミングで go の main が実行されます。

go.argv = [ "a", "b", "c" ];
go.run(result.instance);

golang の wasm は、 main を実行するだけです。

これだけでは、 折角 wasm 化した golang のモジュールを有効に使えません。

有効に利用するには、 Golang と JavaScript を互いに連携させる必要があります。

この連携をするための仕組みとして、 go には "syscall/js" パッケージが提供されています。

このパッケージには、主に以下が提供されています。

• golang のデータと JavaScript との相互データ変換処理
• golang から JavaScript の関数コール処理

例えば、 golang から JavaScript のグローバル変数 hoge に 1 をセットするには、 以下を実行します。

js.Global().Set("hoge", 1)

"syscall/js" パッケージでは、 JavaScript 側のオブジェクトは 全て Value 型 でアクセスします。

例えば、上記の js.Global() は JavaScript のグローバルスコープを返しますが、 この時の戻り値は Value 型です。

この Value 型は JavaScript のオブジェクトを管理し、 Value 型のメソッドを通して、 値の設定や取得、 JavaScript の関数の実行などができます。

例えば、以下を golang で実行すると、 JavaScript の console.log( 'hoge' ) が実行されます。

js.Global().Get("console").Get("log").Invoke("hoge")

上記で示した通り、JavaScript の関数の実行は Invoke() です。 この関数の戻り値も Value 型です。 これは、Invoke() で実行した JavaScript の関数の戻り値を管理しています。 この Value のメソッドの Bool(), Int(), String() などを利用することで、 Value 型で管理している値を取得できます。

go.run(result.instance); は、 golang の main() 関数を実行します。

しかし、これでは Go の任意の関数を実行することができません。

Go の任意の関数を実行するには、 JavaScript 側に golang の関数オブジェクトを渡す必要があります。

JavaScript 側に golang の関数オブジェクトを渡す方法としては、 次の 2 つがあります。

• Value.Set() 関数を利用し、 JavaScript の任意のオブジェクトに golang の関数オブジェクトを Set する。
• golang から JavaScript の関数を実行する際、 その関数の引数として golang の関数オブジェクトを渡す。

ここでは、 Value.Set() を利用する方法について例を挙げて説明します。

func jsFunc(this js.Value, args []js.Value) interface{} {
}

js.Global().Set("_hoge", js.FuncOf( jsFunc ))

_hoge()

func main() {
    js.Global().Set("_hoge", js.FuncOf( jsFunc ))
}

func jsFunc(this js.Value, args []js.Value) interface{} {
}
func main() {
    js.Global().Set("_hoge", js.FuncOf( jsFunc ))
    <-make( chan bool )
}

これまでブラウザ上で実行可能な言語が javascript に制限されていたのが、 wasm によってその制限が無くなりました。

しかし、現時点で wasm の実行パフォーマンスは、 ブラウザによって大きく異なるようです。

fengari と golang の wasm とで次の lua コードの実行時間を計測したところ、

local function fib( num )
   if num < 2 then
      return num
   end
   return fib( num - 2 ) + fib( num - 1 )
end

firefox では fengari の方が若干速く終了し、 chrome では wasm の方が爆速で終了しました。

なお、 chrome 上で動作させた fengari は、 firefox 上で動作させた fengari よりも早いです。 つまり、 JavaScript, wasm ともに chrome の方が高速に処理できます。

また、 golang を wasm に変換すると、 生成した wasm のサイズが大きくなります。

実行時のパフォーマンスがブラウザによって大きく依存する点や、 wasm のサイズをトータルで考えると、 golang の wasm を安易に利用するべきではないです。

なお、 golang の公式ドキュメントに TinyGo が紹介されている通り、 TinyGo では standard golang と比べると、 wasm のサイズが小さく使い勝手も良いようなので、 TinyGo を検討してみると良いと思います。

ただし、TinyGo は go の幾つかの標準パッケージを対応していないため、 それらパッケージを利用したプロジェクトは、 TinyGo を利用することができません。

LuneScript はその制限に該当したため、 TinyGo ではなく standard golang で wasm 対応しています。