Golang 1.11のWebassemblyチュートリアルやってみた！ʕ◔ϖ◔ʔ

• Twitter
• Facebook
• B! はてブ
• Pocket
• Feedly

TL;DR

• Go 1.11でModules、WebAssemblyへの試験的な対応など、いくつかの大きな変更と既存パッケージの改良などがあった
•  The Go Blog - Go 1.11 is released
•  WebAssembly（以下Wasm）のGo公式wikiが親切でわかりやすい！筋トレしたくなってきた！ʕ◔ϖ◔ʔ
•  Go Wiki - WebAssembly

やったことメモ

Hello Wasm!

ソースコードは kemokemo/wasmgo-sketchbook/hello-wasm にあります。

shellにfishを使ってるので公式wikiと若干コマンドが違います。 🐟
まずwasm形式にビルドします。

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

動作に必要なjsファイルをカレントディレクトリにコピーします。

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

goexecで即座にServeします。（goexecめちゃくちゃ便利ですね！）

go get -u github.com/shurcooL/goexec
goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'

ここまでできたら http://localhost:8080/index.html にアクセスします。
以下のようなページが表示されたら成功です！！ʕ◔ϖ◔ʔ ウワォ

DOMをいじってみる

ソースコードは kemokemo/wasmgo-sketchbook/dom-control にあります。

syscall/js を使います。IDベースでボタンを探して、イベントハンドラを追加します。

func pressed(args []js.Value) {
 fmt.Println("button clicked")
}

func registerCallbacks() {
 js.Global().Get("document").Call("getElementById", "myButton").Call("addEventListener", "click", js.NewCallback(pressed))
}

func main() {
 c := make(chan struct{}, 0)

 fmt.Println("Go wasm initialized.")
 registerCallbacks()

 <-c
}

これを動かすと、以下の動画のようにボタンを押すたびに button clicked というログがでます。

あとがきみたいなの

今回実施できなかったのですが、Wasmで以下のようなこともやってみたい。

• ボタン操作のハンドラーで外部のWebAPIから情報をフェッチ
• フェッチしてきた情報をGoコード側で変換、整形して表示
• この時、今回Go 1.11で改良されたテンプレート初期値機能を使いたい