めちゃくちゃ雑にWASMでhello worldしとく

📅 December 17, 2020

•

⏱️3 min read

どうもこんちは。寒くて寒くて冬が越せそうにないおじさんです。

今流行のWASMでこんにちは世界してみます。（かなり雑に）

早速やってみる

main.goの作成

それでは、早速雑にmain.goを作ります。

package main

import "fmt"

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

.wasmを作成

ブラウザは、 .wasmでないと解釈できないので、.wasmに変換します。

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

Goのwasm用のライブラリをコピー

WebAssebmlyを解釈するのに、Goが用意してくれてるjsのライブラリを使います。

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

index.htmlを作る

これで、.wasmと、.wasmを解釈するためのｊｓのライブラリが用意できたので、index.htmlを作ります。こんな感じ。

<html>
<head>
  <meta charset="utf-8">
  <script src="wasm_exec.js"></script>
  <script>
    const go = new Go();
    WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
      go.run(result.instance);
    });
  </script>
</head>

<body>
</body>
</html>

ブラウザで確認

私は、JS大好き民なので、serveを使いますが、サーバーを立てたい方はサーバーを立てて、index.html返してあげてください。めんどくさい方は、こんな感じで、

serve -p 80

localhost:80にアクセスして、コンソール確認すると、Hello, WebAssembly! と表示されているはず。やった！！！goを使ってこんちは世界できました!!!

serveインストールされてない方は、こちらからどうぞ。 serve - npm

感想

WASMと聞くと凄く難しそうなイメージがありますが、意外と簡単にこんちは世界できるんですね！！！（何もしてないけど）ちゃんとWASM使いこなせると、フロントエンド開発でも、JS以外のライブラリも使えるようになって、開発の幅が広がりそうですね。

次回は、もうちょっとGoならではなWASMを試してみたいと思います。

ほいじゃーまた。

← Prev Next →