日本語

WebAssembly チュートリアル

WebAssembly - Go言語での動作

こんにちは、将来のプログラミングスーパースターたち！今日は、Go言語を使ったWebAssemblyの世界に興味深い旅に出かけます。これらの用語が今は宇宙語のように聞こえるかもしれませんが、このチュートリアルの終わりまでには、これらを流暢に話すことができるようになるでしょう！

WebAssembly - Working with Go

WebAssemblyとは？

コードに取り組む前に、まずWebAssemblyとは何かを理解しましょう。超高速のレースカー（WebAssembly）がどんなトラック（ウェブブラウザ）でも驚異的なスピードで走れるように考えてみてください。Go、C++、Rustなどの言語で書かれたプログラムを直接ウェブブラウザで実行できる方法で、ウェブアプリケーションをより速く、より強力にします。

WebAssemblyでGoを使う理由

今日の選択した言語、Goはプログラミングの世界でのスイスアーミーナイフです。シンプルで効率的で、WebAssemblyのおかげでウェブブラウザでも実行できるようになりました。ウェブアプリケーションにスーパーパワーを与えるようなものです！

Go環境の設定

まず第一に、Go環境を設定する必要があります。それは、美味しい料理を作る前にキッチンを準備することに似ています。

  1. 公式サイトからGoをインストールします（https://golang.org/）
  2. GOPATHを設定します（Goはインストール中にガイドします）
  3. コードエディタをインストールします（Visual Studio Codeを推奨しますが、お好みのものを使ってください）

初めてのGo WebAssemblyプログラム

簡単な「Hello, WebAssembly!」プログラムから始めましょう。まだすべてを理解できない場合は心配しないでください。ステップバイステップで説明します。

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("Hello, %s! Welcome to WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

これを分解すると：

  1. package main: これはGoに、これは私たちのプログラムのメインパッケージであることを伝えます。
  2. import: fmtとsyscall/jsという2つのパッケージをインポートしています - fmtはプリントに、syscall/jsはJavaScriptとの対話に使います。
  3. func main(): これは私たちのプログラムのエントリーポイントです。
  4. js.Global().Set("greet", js.FuncOf(greet)): これは私たちのgreet関数をJavaScriptに公開します。
  5. <-make(chan bool): これはプログラムを実行し続け、JavaScriptからの呼び出しを待ちます。
  6. func greet: この関数は名前を取り、HTML要素に挨拶を更新します。

GoプログラムをWebAssemblyにコンパイル

次に、私たちのGoコードをWebAssemblyに変換しましょう。ターミナルを開き、以下のコマンドを実行します：

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

このコマンドはGoに、私たちのプログラムをJavaScript（GOOS=js）およびWebAssembly（GOARCH=wasm）にコンパイルするように指示します。

WebAssemblyを実行するためのHTMLページを作成

私たちのWebAssemblyを実行するためのHTMLページを作成する必要があります。以下は簡単なものです：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly Demo</h1>
<input id="name" type="text" placeholder="Enter your name">
<button onclick="greet(document.getElementById('name').value)">Greet</button>
<p id="greeting"></p>
<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>
</body>
</html>

このHTMLファイルは：

  1. 名前を入力するフィールドを作成します。
  2. 私たちのgreet関数を呼び出すボタンがあります。
  3. WebAssemblyランタイム（wasm_exec.js）を読み込みます。
  4. WebAssemblyファイル（main.wasm）を読み込み、実行します。

WebAssemblyアプリケーションを実行

これを実行するためには、ウェブサーバーが必要です。以下の簡単なPythonコマンドで1つを起動します：

python -m http.server

今、ブラウザを開き、http://localhost:8000にアクセスします。私たちのページが表示されるはずです！

出力の理解

名前を入力して「Greet」をクリックすると、パーソナライズされた挨拶が表示されます。これは、WebAssemblyのおかげでブラウザ内で実行されている私たちのGo関数です！

結論

おめでとうございます！あなたは刚刚初めてのGo WebAssemblyアプリケーションを作成しました。ここではまだ表面をなぞっただけですが、私はあなたの好奇心を引きたいと思っています。

覚えておいてください、コードを学ぶことは新しい言語や楽器を学ぶのと同じです。練習、忍耐、粘り強さが必要です。しかし、それぞれのステップで新しい可能性を開き、創造的な可能性を広げています。

codingを続け、探求を続け、そして最も重要なのは、楽しむことです！

Credits: Image by storyset

前のチュートリアル:
WebAssembly - Rustとの連携
次のチュートリアル:
WebAssembly - Node.jsとの連携