こんにちは。現役エンジニアの”はやぶさ”@Cpp_Learningです。Go言語（Golang）やフロントエンドを勉強中です。
Golang × WebAssemblyについて勉強したので、備忘録も兼ねて本記事を書きます。
Contents
WebAssembly（wasm：ワズム）とは
WebAssembly（wasm：ワズム）とは、ブラウザ上で動作するバイナリ形式のことです。
C/C++、Rust、Go言語（Golang）などのプログラムからコンパイルおよびビルドすることで、ブラウザで動作するバイナリコード（*.wasm）を生成することができます。
GolangからJavaScriptを生成
少し脱線しますが、ブラウザ上で動作するアプリをGolang（以下Go）で開発したいなら、GopherJSを使って、GoからJavaScriptを生成するという手もあります。興味ある人は、以下の記事を参考にして下さい。
今回はGoからバイナリコード（*.wasm）を生成して、ブラウザ上で動かしてみます。
Go × WebAssembly（wasm）入門
Goの開発環境構築から説明します。
DockerでGolangの開発環境構築
まずは以下のコマンドで作業ディレクトリ：go-wasmを作成します。
$ mkdir go-wasm
次にDocker HubからGo公式イメージをpullしてきます。
$ docker pull golang:1.20.1
コンテナ起動時に、-vオプションでホストとコンテナ間のシェアディレクトリ（＝作業ディレクトリ）を設定して、作業するのが楽です。
$ docker run -v ${pwd}:/go/src/app –name go-wasm -it golang:1.20.1
以下のコマンドでgo.modを作成します。
$ cd src/app
$ go mod init example.com/myapp
以降からはソースコードを書いていきます。
main.go
コンソールに文字列を出力するだけのシンプルなコードが以下です。
|
1 2 3 4 5 6 7 8 9 |
package main import ( "fmt" ) func main() { fmt.Println("Hello, Go Assembly!") } |
以下のコマンドで動作確認しておきます。
$ go run main.go
問題なければGOOS=js,GOARCH=wasmでコンパイル＆ビルドして、main.wasmを生成します。
$ GOOS=js GOARCH=wasm go build -o main.wasm main.go
wasm_exec.js
Go公式リポジトリからwasm_exec.jsをダウンロードして、作業ディレクトリに保存します。このjsファイルを使って、main.wasmをブラウザ上で実行します。
index.html
wasm_exec.htmlを参考に、index.htmlを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html> <head> <meta charset="utf-8" /> <title>Go WebAssembly</title> <script src="wasm_exec.js"></script> </head> <body> <h1>Go WebAssembly</h1> <script> const go = new Go(); let mod, inst; WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => { mod = result.module; inst = result.instance; document.getElementById("runButton").disabled = false; }).catch((err) => { console.error(err); }); async function run() { // console.clear(); await go.run(inst); inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance } </script> <button onClick="run();" id="runButton" disabled>BUTTON</button> <!-- <button type="button" onclick="run()">BUTTON</button> --> </body> </html> |
最終的な作業ディレクトリの中身は以下の通りです。
|
1 2 3 4 5 6 7 |
workspace └─go-wasm ├──go.mod ├──main.go ├──index.html ├──wasm_exec.js └──main.wasm |
動作確認 -VSCode拡張機能のLive Serverでサーバー起動-
最後にローカルサーバーで動作確認をします。VSCode拡張機能のLive Serverを使えば、下記の３ステップでサーバーを起動できます。
- VSCodeでindex.htmlを開く
- 右クリック
- Open with Live Serverクリックでサーバー起動
適当なブラウザから http://127.0.0.1:5500/index.html にアクセスすれば、動作確認できます（以下ツイート）。
Golang × WebAssembly（wasm）入門しました。楽しい！ pic.twitter.com/LsoKmtW4MU
— はやぶさ@技術ノート (@Cpp_Learning) February 19, 2023
サーバー止めるときは「右クリック⇒Stop Live Serverクリック」です。
まとめ
Goのコードからwasmを生成してブラウザ上で実行する簡単な例を紹介しました。
以下 Goのオススメ書籍を紹介
