Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
33
Help us understand the problem. What is going on with this article?
@cia_rana

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

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

参考

33
Help us understand the problem. What is going on with this article?
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
cia_rana
Gopher/道玄坂の緑の会社で3DCG関連のえんじにゃーんしてる/Creator Support Engineer

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
33
Help us understand the problem. What is going on with this article?