Help us understand the problem. What is going on with this article?

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

参考

cia_rana
Go言語/Ruby/渋谷で働くそふとうぇあえんじにゃーん/ Creator Support Engineer
https://medium.com/@cia_rana/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした