GoでWebAssemblyを使ってみよう
Go1.11からWebAssemblyが公式サポートされました。これまでWebAssemblyの開発はRustがメインに使われてきましたが、Goは構文も分かりやすく、非常に良い選択肢になると思われます。
特に面白いのはDOM連携がとても容易な点ではないかと思います。今回はその使い方を紹介します。
まず基本から
Go1.11以降のインストールが終わっている前提とします。例えばコンソールに出力するためには以下のようなコードを書きます。
| package main | |
| import ( | |
| "fmt" | |
| ) | |
| func main() { | |
| fmt.Println("Hello World") | |
| } |
これをコンパイルします。test.wasmというファイルが作成されます。
| GOOS=js GOARCH=wasm go build -o test.wasm main.go |
Webブラウザで実行する際には、公式に用意されているHTML/JavaScriptファイルを使うと簡単です。
| curl -sO https://raw.githubusercontent.com/golang/go/master/misc/wasm/wasm_exec.html | |
| curl -sO https://raw.githubusercontent.com/golang/go/master/misc/wasm/wasm_exec.js |
そしてWebサーバを立ち上げて wasm_exec.html を読み込みます。runというボタンがあるので、それを押すと処理が実行されます。
DOM連携
Goの場合、main関数を必ず使うようです。そしてmain関数は引数が使えません。そこで syscall/js パッケージを読み込みます。これを読み込むと、例えば #num1 の値を次のようにして取得できます。
| js.Global().Get("document"). | |
| Call("querySelector", "#num1"). | |
| Get("value"). | |
| String() |
逆にセットする場合は下記のようになります。
| js.Global().Get("document"). | |
| Call("querySelector", "#res"). | |
| Set("value", "Hello") |
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) | |
| } |
これで足し算ができます。デモをこちらに置いてありますので体験してみてください。
なお、GoのWASMはサイズが若干大きめです（上記の足し算を行うもので2.5MBあります）。また、関数が使えない（分かっていないだけかも知れません）ので、ファイル数が増えたり、main関数での分岐が必要になるかも知れません。
とは言え、Goの文法でWASMが書けるメリットは非常に大きく、Webアプリケーションの高速化が容易に実現できたり、全体をGoで開発することも夢ではなさそうです。
コメントは受け付けていません。