Go 1.11 から正式に Go の WebAssembly(wasm) サポートが導入されるのに先立ち、Go を wasm 化しブラウザでサクッと実行する手順をご紹介します。
概要
- Go 1.11beta1 で Go のコードを wasm に変換
- ブラウザで wasm を読み込むための html と js を用意
- ブラウザで Go の main 関数を実行
Go から wasm 生成するための Go コマンドを準備する
Go から wasm を生成するためには Go 1.11 のバイナリが必要ですが、今回はそのβ版である Go 1.11beta1 を利用します。
(もちろん master にも wasm サポートが取り込まれているので、そちらを使っても構いません)
また、 Go 1.11beta1 を利用するために go
コマンドの代わりとなるその名も go1.11beta1
コマンドが公式のサブリポジトリとして用意されているので、 go
コマンドのバージョンを切り替えたくないときや一時的に Go 1.11beta1 を使いたいときはこちらを使うと良いでしょう。次のコマンドラインでインストールできます。
$ go get golang.org/x/build/version/go1.11beta1
$ go1.11beta1 download
Go を wasm に変換する
今回は次の Go コードを用います。これをブラウザ上で実行するとコンソールに Hello, wasm!
と表示される予定です。
package main
import "fmt"
func main() {
fmt.Println("Hello, wasm!")
}
このコードを go build
で wasm に変換します。ただしデフォルトで吐かれるバイナリは Go をインストールした環境に最適化されるので、wasm 用のバイナリを吐くための環境変数 GOOS=js
と GOARCH=wasm
を設定します。
$ GOOS=js GOARCH=wasm go build -o test.wasm main.go
# go1.11beta1 コマンドを使う場合
# $ GOOS=js GOARCH=wasm go1.11beta1 build -o test.wasm main.go
ブラウザで wasm を読み込むための html と js を用意
公式が用意している最新のコードをそのまま引っ張ってきます。
$ 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 サーバを起動する
カレントディレクトリ配下の静的ファイルを返すだけの簡易 Web サーバーを作りましょう。ちょうどこんな感じですね。
package main
import (
"flag"
"log"
"net/http"
)
func main() {
addr := flag.String("a", ":5555", "address:port")
flag.Parse()
log.Printf("listening on %q\n", *addr)
log.Fatal(http.ListenAndServe(*addr, http.FileServer(http.Dir("."))))
}
それではさっそく起動してみましょう!
$ go run server.go
# go1.11beta1 コマンドを使う場合
# $ go1.11beta1 run server.go
そしてブラウザで localhost:5555/wasm_exec.html
にアクセスしてみましょう!
ブラウザの左上に Run
ボタンが表示されていると思いますが、wasm を読み込むまでは disabled になっています。
Run
ボタンが押せる状態になったらコンソールを開き Run
ボタンを押しましょう。
(コンソールの開き方は説明いりませんね?)
無事コンソールに Hello, wasm!
と表示されれば、Go の wasm 化およびブラウザへの読み込み成功です!
(ついでに test.wasm
のレスポンスヘッダの Content-Type
が application/wasm
になっていることも確認しておきましょう)