初めてのwebAssembly with Go

2024年3月10日

webAssemblyなるものを初めて使ってみました！もちろんgo言語です

いつもアプリ開発の時フロント明るくないんだよね〜

バックエンドに集中したいんだよね〜と思ってました・・・

WebAssemblyを使うと簡単にいうとGo言語だけでアプリ作れちゃうって感じです！（多分html, css, jsの知識はいるがその辺はまあうん）

Hello Worldを出すまで

repositoryはこちら

repository構成

- main.go
- go.mod
- wasm
  |- index.html
  |- main.go

repository直下のmainのコード

ここではserver起動処理を書きます。localhost:8080で立ち上がるようにしておきます

func main() {
	fmt.Println("Server Start")
	http.Handle("/", http.FileServer(http.Dir("./wasm/")))
	http.ListenAndServe(":8080", nil)
}

wasm/index.html

ここはお決まりっぽいので一旦コピペです

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Wasm Sample</title>
        <script src="wasm_exec.js"></script>
        <script>
            const go = new Go();
            WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
                go.run(result.instance);
            }).catch(e => console.log(e));
        </script>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

多分ここをいじっていけばフロントを触れる。

scriptの中でassemblyがjsを呼び出すようにとかしてそうだが一旦スルー

wasm/main.go

func main() {
	fmt.Println("Hello World")
}

ここのmainファイルはおそらくjsとして実行したい内容を書く

この例だと検証のconsoleにHello Worldが出てくれました！嬉しい

wasm/wasm_exec.js

これはgoに元々あるのをcopyします！

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./

まあ「何か」をよしなにやってくれているのです（テキトウ）

最後に

GOOS=js GOARCH=wasm go build -o main.wasm

でバイナリファイル的なのをビルドして、(ここはwasm/で)

go run main.go(ここはリポジトリ直下で)

http://localhost:8080/ にアクセスすれば以下の画面！やったぜ〜！

以上です！めっちゃ楽しいのでこれからしばらくwebAssemblyで色々やってみようと思います〜

参考にさせていただいた記事（ありがとうございます）

初めてのwebAssembly with Go

Hello Worldを出すまで

関連記事