JavaScript
Go
golang
WebAssembly

サクッと Go → WebAssembly を試す

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

参考