LoginSignup
66
31

More than 5 years have passed since last update.

サクッと Go → WebAssembly を試す

Last updated at Posted at 2018-07-03

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

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

参考

66
31
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
66
31