Golang × WebAssembly（wasm）入門｜はやぶさの技術ノート

こんにちは。現役エンジニアの”はやぶさ”@Cpp_Learningです。Go言語（Golang）やフロントエンドを勉強中です。

Golang × WebAssemblyについて勉強したので、備忘録も兼ねて本記事を書きます。

Contents

1 WebAssembly（wasm：ワズム）とは
2 GolangからJavaScriptを生成
3 Go × WebAssembly（wasm）入門
4 まとめ

WebAssembly（wasm：ワズム）とは

WebAssembly（wasm：ワズム）とは、ブラウザ上で動作するバイナリ形式のことです。

C/C++、Rust、Go言語（Golang）などのプログラムからコンパイルおよびビルドすることで、ブラウザで動作するバイナリコード（*.wasm）を生成することができます。

GolangからJavaScriptを生成

少し脱線しますが、ブラウザ上で動作するアプリをGolang（以下Go）で開発したいなら、GopherJSを使って、GoからJavaScriptを生成するという手もあります。興味ある人は、以下の記事を参考にして下さい。

【GopherJS入門】GoのソースコードからJavaScriptを生成GoのソースコードからJavaScriptを生成できるGopherJSの基本的な使い方を紹介している記事です。複数のサンプルコードも公開しています。...

今回は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

コンソールに文字列を出力するだけのシンプルなコードが以下です。

package main

import (
	"fmt"
)

func main() {
	fmt.Println("Hello, Go Assembly!")
}

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を作成します。

<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>

<html>

<head>

<title>Go WebAssembly</title>

</head>

<body>

<h1>Go WebAssembly</h1>

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>

</body>

</html>

最終的な作業ディレクトリの中身は以下の通りです。

workspace
  └─go-wasm
      ├──go.mod
      ├──main.go
      ├──index.html
      ├──wasm_exec.js
      └──main.wasm

workspace

└─go-wasm

├──go.mod

├──main.go

├──index.html

├──wasm_exec.js

└──main.wasm

動作確認 -VSCode拡張機能のLive Serverでサーバー起動-

最後にローカルサーバーで動作確認をします。VSCode拡張機能のLive Serverを使えば、下記の３ステップでサーバーを起動できます。

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のコードを実行できた！感動した！！

まとめ

Goのコードからwasmを生成してブラウザ上で実行する簡単な例を紹介しました。

はやぶさ

本記事が Go × WebAssembly（wasm）入門したい人の参考になれば嬉しいです

以下 Goのオススメ書籍を紹介

改訂2版みんなのGo言語

created by Rinker

Go言語による並行処理

created by Rinker

オライリー・ジャパン

実用 Go言語 ―システム開発の現場で知っておきたいアドバイス

created by Rinker

詳解Go言語Webアプリケーション開発

created by Rinker

Golang × WebAssembly（wasm）入門

WebAssembly（wasm：ワズム）とは

GolangからJavaScriptを生成

Go × WebAssembly（wasm）入門

DockerでGolangの開発環境構築

main.go

wasm_exec.js

index.html

動作確認 -VSCode拡張機能のLive Serverでサーバー起動-

まとめ

プライム感謝祭セールを完全攻略！事前準備やお得キャンペーンを徹底解説

【アマゾンプライムデー2023年】完全攻略！事前準備やお得キャンペーンを徹底解説

【2023年版】アマゾンプライム会員のメリット・デメリットを紹介！