Edited at

サクッと Go → WebAssembly を試す

More than 1 year has passed since last update.

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 サポートが取り込まれているので、そちらを使っても構いません)

https://github.com/golang/go/releases/tag/go1.11beta1

また、 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! と表示される予定です。


main.go

package main

import "fmt"

func main() {
fmt.Println("Hello, wasm!")
}


このコードを go build で wasm に変換します。ただしデフォルトで吐かれるバイナリは Go をインストールした環境に最適化されるので、wasm 用のバイナリを吐くための環境変数 GOOS=jsGOARCH=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 サーバーを作りましょう。ちょうどこんな感じですね。


server.go

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-Typeapplication/wasm になっていることも確認しておきましょう)


参考