GoでWebAssemblyを使ってみよう
Go1.11からWebAssemblyが公式サポートされました。これまでWebAssemblyの開発はRustがメインに使われてきましたが、Goは構文も分かりやすく、非常に良い選択肢になると思われます。
特に面白いのはDOM連携がとても容易な点ではないかと思います。今回はその使い方を紹介します。
まず基本から
Go1.11以降のインストールが終わっている前提とします。例えばコンソールに出力するためには以下のようなコードを書きます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package main | |
| import ( | |
| "fmt" | |
| ) | |
| func main() { | |
| fmt.Println("Hello World") | |
| } |
これをコンパイルします。test.wasmというファイルが作成されます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| GOOS=js GOARCH=wasm go build -o test.wasm main.go |
Webブラウザで実行する際には、公式に用意されているHTML/JavaScriptファイルを使うと簡単です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 の値を次のようにして取得できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| js.Global().Get("document"). | |
| Call("querySelector", "#num1"). | |
| Get("value"). | |
| String() |
逆にセットする場合は下記のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| js.Global().Get("document"). | |
| Call("querySelector", "#res"). | |
| Set("value", "Hello") |
Callはメソッドの呼び出し、値の取得はGet、設定はSetと非常にシンプルな形です。例えば足し算の処理は下記のように記述できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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で開発することも夢ではなさそうです。
hifive開発者ブログ 
コメントは受け付けていません。