GoでWebAssemblyを体験 - Ikkyu's Tech Blog

そろそろWebAssemblyを学んでいきたなーって思っていまして、じゃどうやって勉強するの？って思い調べてると、

WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。

なるほど...🤔 そうなると、低水準の言語を使う必要があるようです。

ということでGoを使います。

理由は、

前に少しだけ触ったことのある
人気ある

ということで今回は、Goの環境構築とWebAssembly · golang/go WikiのGetting Startedまでやろうと思います。

検証環境

OS: macOS Catalina(10.15.2)
shell: fish shell
ブラウザ: Google Chrome(79.0.3945.88)
Node.js: v12.12.0

Goの環境構築

Goをダウンロード -> インストール

Downloads - The Go Programming Languageからダウンロードします。

ダウンロードしたファイルを開くとインストーラが起動しますので、インストールを行います。

PATHを設定

fish shellの場合

set -U fish_user_paths /usr/local/go/bin $fish_user_paths

PATHが通っているか確認します。

$ go version
go version go1.13.5 darwin/amd64

OK✌️

コンパイルしてwasmファイルを作成

さて、WebAssembly · golang/go WikiのGetting Startedをやっていきます。

goファイルを作成します。

package main

import "fmt"

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

コンパイルします。

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

wasm_exec.jsをコピーします。読み込んだwasmファイルを実行するのに必要なファイルのようです。

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

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>

サーバを立ち上げて、ブラウザで表示します。

npx http-server

dev toolsのコンソールパネルに

Hello, WebAssembly!

と表示されれば成功です！👏

今回は以上です。

次はWebAssemblyで計算した結果を受け取るというようなことがしたいな... あとGoも学んでいきたい