1. 導入
Go言語はサーバーサイドで活躍するイメージが強いですが、実はブラウザ上で動くアプリケーションも作成できます。それがWebAssembly(Wasm)です。通常、フロントエンドにはJavaScriptが使われますが、Goでロジックを記述し、それをWasmに変換することで、ブラウザ上でGoの強力な型システムや並行処理を活用できるようになります。今回は、Goのコードをブラウザで動かすための第一歩を解説します。
2. 基礎知識
WebAssembly(Wasm)とは、ブラウザ上で高速に動作するように設計されたバイナリ形式のことです。Goはコンパイル言語であるため、ソースコードをブラウザが理解できる形式に変換する必要があります。その際に使われるのが、環境変数である GOOS=js(OSをJavaScript環境に指定)と GOARCH=wasm(アーキテクチャをWasmに指定)です。これらをビルド時に指定することで、Goプログラムをブラウザで実行可能なファイルに変換できます。
3. 実装/解決策
Goのコードをブラウザで動かすには、以下のステップが必要です。
1. Goのソースコードを書く。
2. GOOS=js GOARCH=wasm を指定してビルドし、.wasmファイルを作成する。
3. Goが標準で提供している wasm_exec.js というブリッジ用ファイルを取得する。
4. HTMLファイルからWasmを読み込んで実行する。
4. サンプルプログラム
以下のコードを main.go として保存してください。
package main
import (
“fmt”
“syscall/js”
)
func main() {
// ブラウザのグローバルオブジェクト(window)を取得
document := js.Global().Get(“document”)
// HTML上に新しい要素を作成し、Goから文字を表示する
h1 := document.Call(“createElement”, “h1”)
h1.Set(“innerText”, “Hello from Go WebAssembly!”)
document.Get(“body”).Call(“appendChild”, h1)
fmt.Println(“Goからブラウザを操作しました!”)
}
ビルドの手順:
ターミナルで以下のコマンドを実行します。
GOOS=js GOARCH=wasm go build -o main.wasm
また、Goのインストールディレクトリから wasm_exec.js をコピーしてくる必要があります。
cp “$(go env GOROOT)/misc/wasm/wasm_exec.js” .
5. 応用・注意点
現場でWasmを扱う際の注意点は、「DOM操作のコスト」です。GoとJavaScriptの間でデータをやり取りする際にはブリッジを通る必要があり、過度なDOM操作はパフォーマンス低下を招きます。また、Wasmは実行時にブラウザ側で wasm_exec.js を読み込む必要があるため、ローカル開発時には簡易的なWebサーバー(`goexec ‘http.ListenAndServe(“:8080”, http.FileServer(http.Dir(“.”)))’` など)を立てて確認するようにしてください。最初は小さなロジックをWasm化し、徐々にブラウザ操作に慣れていくのが効率的な学習方法です。

コメント