GoではじめるWebAssebmly その2「JavaScriptイベントハンドリング」
WebAssebmlyはWebブラウザ上でバイナリファイル(テキスト形式もあり)を実行できる環境です。JavaScriptと異なりコードの漏洩がなく、実行速度も高速というのがメリットです。
WebAssebmlyは元々Rustで開発することが多かったですが、最近では様々なプログラミング言語が対応しています。その一つがGoです。Go 1.11からWebAssembly向けにもコンパイルできるようになっています。
一般的なWebAssemblyはDOMやネットワーク操作が行えません。それに対してGo 1.11ではJavaScript APIを使えるようにした syscall/js
パッケージを用いることで、DOMやネットワーク操作を可能にしています。
そこで今回はDOMのクリックイベントをWebAssemblyで扱う方法を紹介します。
まずGoのコードです。今回はmain.goとしています。最初に syscall/js
をインポートします。
import "syscall/js" |
そして、トップレベルのDOMであるドキュメントを作成します。
document := js.Global().Get("document") |
IDやクラスを使ってDOMを取得します。
button := document.Call("getElementById", "btn") |
取得したボタンに対してコールバックを指定します。
cb := js.NewCallback(func(args []js.Value) { | |
println("Clicked"); | |
}) |
ボタンのクリックイベントにコールバックを指定します。
button.Call("addEventListener", "click", cb) |
最後にプログラムが終了しないようにチャネルを待ち受けます。
<-make(chan struct{}, 0) |
これで完成です。全体のコードは次のようになります。
package main | |
import "syscall/js" | |
func main() { | |
document := js.Global().Get("document") | |
button := document.Call("getElementById", "btn") | |
cb1 := js.NewCallback(func(args []js.Value) { | |
println("Clicked"); | |
}) | |
button.Call("addEventListener", "click", cb1) | |
<-make(chan struct{}, 0) | |
} |
HTMLを準備する
HTMLはボタンを貼り付けだけのものです。
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="wasm_exec.js"></script> | |
<script> | |
const go = new Go(); | |
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => { | |
go.run(result.instance); | |
}); | |
</script> | |
</head> | |
<body> | |
<button id="btn">クリック</button> | |
</body> | |
</html> |
JavaScriptファイルを用意する
専用のJavaScriptファイルを設置します。
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . |
Goをコンパイルする
最後にGoファイルをコンパイルして WebAssebmly化します。
$ GOOS=js GOARCH=wasm go build -o main.wasm |
サーバを立ち上げる
Webサーバは goexec を用います。インストールは go get -u github.com/shurcooL/goexec
になります。インストールされたら以下のコマンドでHTTPサーバを立ち上げます。
$ goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))' |
これで http://localhost:8080/ でアクセスできます。
試す
では実際に試しているところです。ボタンをクリックすると開発者ツールのコンソールにログが出力されます。
このようにしてGoのコードからイベントハンドリングができます。
Goを使うことでWebアプリケーションをまるっとWebAssemblyで提供できる可能性が出てきました。高速、かつコードの隠蔽化も実現しますのでWebアプリケーションの可能性を飛躍的に向上できるでしょう。
ぜひトライしてみてください。
コメントは受け付けていません。