コンテンツへスキップ

GoでWebAssemblyを使ってみよう

by : 2019/04/09

Go1.11からWebAssemblyが公式サポートされました。これまでWebAssemblyの開発はRustがメインに使われてきましたが、Goは構文も分かりやすく、非常に良い選択肢になると思われます。

特に面白いのはDOM連携がとても容易な点ではないかと思います。今回はその使い方を紹介します。

まず基本から

Go1.11以降のインストールが終わっている前提とします。例えばコンソールに出力するためには以下のようなコードを書きます。

package main
import (
"fmt"
)
func main() {
fmt.Println("Hello World")
}

view raw
index.go
hosted with ❤ by GitHub

これをコンパイルします。test.wasmというファイルが作成されます。

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

view raw
index.
hosted with ❤ by GitHub

Webブラウザで実行する際には、公式に用意されているHTML/JavaScriptファイルを使うと簡単です。

そしてWebサーバを立ち上げて wasm_exec.html を読み込みます。runというボタンがあるので、それを押すと処理が実行されます。

DOM連携

Goの場合、main関数を必ず使うようです。そしてmain関数は引数が使えません。そこで syscall/js パッケージを読み込みます。これを読み込むと、例えば #num1 の値を次のようにして取得できます。

js.Global().Get("document").
Call("querySelector", "#num1").
Get("value").
String()

view raw
index.go
hosted with ❤ by GitHub

逆にセットする場合は下記のようになります。

js.Global().Get("document").
Call("querySelector", "#res").
Set("value", "Hello")

view raw
index.go
hosted with ❤ by GitHub

Callはメソッドの呼び出し、値の取得はGet、設定はSetと非常にシンプルな形です。例えば足し算の処理は下記のように記述できます。

package main
import (
"fmt"
"syscall/js"
"strconv"
)
func main() {
num1 := js.Global().Get("document").
Call("querySelector", "#num1").
Get("value").
String()
i, _ := strconv.Atoi(num1)
fmt.Println(i)
num2 := js.Global().Get("document").
Call("querySelector", "#num2").
Get("value").
String()
j, _ := strconv.Atoi(num2)
js.Global().Get("document").
Call("querySelector", "#res").
Set("value", i + j)
}

view raw
index.go
hosted with ❤ by GitHub

これで足し算ができます。デモをこちらに置いてありますので体験してみてください。


なお、GoのWASMはサイズが若干大きめです(上記の足し算を行うもので2.5MBあります)。また、関数が使えない(分かっていないだけかも知れません)ので、ファイル数が増えたり、main関数での分岐が必要になるかも知れません。

とは言え、Goの文法でWASMが書けるメリットは非常に大きく、Webアプリケーションの高速化が容易に実現できたり、全体をGoで開発することも夢ではなさそうです。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。