GoではじめるWebAssebmly その1「Hello World」
WebAssebmlyはWebブラウザ上でバイナリファイル(テキスト形式もあり)を実行できる環境です。JavaScriptと異なりコードの漏洩がなく、実行速度も高速というのがメリットです。
WebAssebmlyは元々Rustで開発することが多かったですが、最近では様々なプログラミング言語が対応しています。その一つがGoです。Go 1.11からWebAssembly向けにもコンパイルできるようになっています。
この記事ではWebAssembly · golang/go Wikiに沿ってGoでWebAssemblyを実行するまでを紹介します。
環境
WebAssebmlyはモダンなWebブラウザが対応していますが、Goが提供するJavaScriptコードがSafariでは動きませんでした。以下はGoogle Chromeで試しています。
Goのコード
今回はとてもシンプルなコードです。 main.go
として作成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package main | |
import "fmt" | |
func main() { | |
fmt.Println("Hello, WebAssembly!") | |
} |
このコードをGoでコンパイルします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ GOOS=js GOARCH=wasm go build -o main.wasm |
これで main.wasm というファイルが作成されます。
HTMLについて
HTMLはテンプレートになっており、以下を使います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="wasm_exec.js"></script> | |
<script> | |
const go = new Go(); | |
WebAssembly.instaantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => { | |
go.run(result.instance); | |
}); | |
</script> | |
</head> | |
<body></body> | |
</html> |
JavaScriptについて
WebAssebmlyを解釈するのにGoが提供しているJavaScriptライブラリを使います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . |
この3つのファイルで実行します。
goexecのインストール
HTTPサーバを立てる必要があるので、goexecをインストールします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ go get -u github.com/shurcooL/goexec |
これで準備完了です。
実行する
HTTPサーバを立てます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))' |
http://localhost:8080/ でHTTPサーバが立ち上がるので、Google Chromeからアクセスします。
開発者ツールのコンソールに Hello, WebAssembly!
と出力されれば完成です。
GoでWebAssemblyを書く場合、特別なテクニックが必要という訳ではありません。普段のGoの書き方で、コンパイル方法を指定するだけです。Goであれば、よりモダンな書き方でWebAssemblyが使えるようになりますのでお勧めです。
コメントは受け付けていません。