この記事は弁護士ドットコム Advent Calendar 2022の4日目の記事です。
モチベーション
普段フロントエンド領域の開発を主にしていますが、バックエンド領域の知識も深めたいと思いGoの勉強を最近始めました。
そこでGoを使ってフロントエンドのアプリケーションを作りたいと思い、WebAssemblyを使用し簡単なTodoアプリを作ってみることにしました。
とはいえ、まずは各技術に詳しくないので軽く調べてみました。
WebAssembly(以下 wasm)とは？
- wasmと略される
- ネイティブに近いパフォーマンスでWeb上で動作するバイナリ形式の低レベルのアセンブリ言語
- JavaScriptと並列して動作する
- C/C++/Rustなどからwasmにコンパイルできる
Goでwasmを使うにはどうすればいい？
方法
どうやらGoの環境変数を設定すればよさそうです
GOOS=js GOARCH=wasm
実際に手を動かしてみる
まずは動くものを作ってみる
Todoアプリを作る前にまずは簡単なdevtoolのコンソール上で”Hello World”とログ出力されるものを作りたいと思います。
アプリケーションの構成
sample_wasm/
┣ main.go
┣ wasm/
┣ main.go
┣ index.html
┣ wasm_exec.js
※wasm_exec.jsは、Goインストール時にすでに用意されており、go/misc/wasm配下にあるので、手元にコピーしておきます
各ソースコードはこんな感じです
sample_wasm/main.go
package main
// 簡易サーバー
import (
"net/http"
)
func main() {
http.Handle("/", http.FileServer(http.Dir("./wasm/")))
http.ListenAndServe(":8080", nil)
}
sample_wasm/wasm/main.go
package main
// "Hello World"を表示するだけのもの
import "fmt"
func main(){
fmt.Println("Hello World")
}
sample_wasm/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>
</body>
</html>
上記のindex.htmlのスクリプト内で、WebAssemblyを使用しビルドしたmain.wasmを読み込んでいます
Goのソースコードをwasm用にビルド
GOOS=js GOARCH=wasm go build -o main.wasm
sample_wasm配下でサーバーを起動します
go run main.go
実際に http://localhost:8080/ にアクセスすると、
デベロッパーツール上のコンソール画面で"Hello World"が表示されることが確認できます。
実際にTodoアプリを作っていこうと思います〜
今回デザインとか気にしてないです。
使うもの
- syscall/js(GoでDomの操作をするもの)
作る機能
- Todoの追加
- Todoの削除
アプリケーションの構成
”まずは動くものを作ってみる”で用意したアプリケーションの構成と同じにし、
主に"sample_wasm/wasm/main.go"の中身を主に編集していく形で進めます。
実際に各機能を実装していく
UIの用意
<!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>
<div>
<h1>Todo App(Go and WebAssembly)</h1>
<input id="todo-input">
<button onClick="addTodo()">Add</button>
<ul id="todo-list">
</ul>
</div>
</body>
</html>
Todoの型の定義
type Todo struct {
id int
title string
}
Todoの追加機能作成
// 関数add/deleteで扱う変数を定義
var todo []Todo
var target int
var id = 1
func add(this js.Value, value []js.Value) interface{} {
todoInput := js.Global().Get("document").Call("getElementById", "todo-input")
todoTitle := todoInput.Get("value").String()
todo = append(todo, Todo{id: id, title: todoTitle})
li := js.Global().Get("document").Call("createElement", "li")
li.Set("id", "todo-list-"+strconv.Itoa(id))
btn := js.Global().Get("document").Call("createElement", "button")
btn.Set("textContent", "X")
btn.Set("onclick", js.FuncOf(delete).Call("bind", btn, strconv.Itoa(id)))
li.Set("textContent", todoTitle)
js.Global().Get("document").Call("getElementById", "todo-list").Call("appendChild", li)
li.Call("appendChild", btn)
todoInput.Set("value", "")
id += 1
return nil
}
Todoの削除機能作成
func delete(this js.Value, value []js.Value) interface{} {
targetId, _ := strconv.Atoi(value[0].String())
for index, item := range todo {
if item.id == targetId {
target = index
}
}
todo = append(todo[:target], todo[target+1:]...)
ul := js.Global().Get("document").Call("getElementById", "todo-list")
li := js.Global().Get("document").Call("getElementById", "todo-list-"+value[0].String())
ul.Call("removeChild", li)
return nil
}
関数addがButton要素から扱えるようにグローバル変数に登録します
func registerFunc() {
js.Global().Set("addTodo", js.FuncOf(add))
}
最終的なコードはこちらです
wasm/main.go
package main
import (
"strconv"
"syscall/js"
)
type Todo struct {
id int
title string
}
var todo []Todo
var target int
var id = 1
func add(this js.Value, value []js.Value) interface{} {
todoInput := js.Global().Get("document").Call("getElementById", "todo-input")
todoTitle := todoInput.Get("value").String()
todo = append(todo, Todo{id: id, title: todoTitle})
li := js.Global().Get("document").Call("createElement", "li")
li.Set("id", "todo-list-"+strconv.Itoa(id))
btn := js.Global().Get("document").Call("createElement", "button")
btn.Set("textContent", "X")
// delete関数をbuttonから実行できるよう設定
// delete関数でTodoのidを取れるように設定
btn.Set("onclick", js.FuncOf(delete).Call("bind", btn, strconv.Itoa(id)))
li.Set("textContent", todoTitle)
js.Global().Get("document").Call("getElementById", "todo-list").Call("appendChild", li)
li.Call("appendChild", btn)
//inputタグの中身を空にする
todoInput.Set("value", "")
id += 1
return nil
}
func delete(this js.Value, value []js.Value) interface{} {
targetId, _ := strconv.Atoi(value[0].String())
for index, item := range todo {
if item.id == targetId {
target = index
}
}
todo = append(todo[:target], todo[target+1:]...)
ul := js.Global().Get("document").Call("getElementById", "todo-list")
li := js.Global().Get("document").Call("getElementById", "todo-list-"+value[0].String())
ul.Call("removeChild", li)
return nil
}
func registerFunc() {
js.Global().Set("addTodo", js.FuncOf(add))
}
func main() {
c := make(chan struct{}, 0)
registerFunc()
<-c
}
所感
- 環境変数の設定だけでWASMに対応できるのは魅力的
- bindなどで値の受け渡しもできるので、VanilaJSに詳しければ学習ハードルは低そう
- JSとWASMの棲み分けの基準とか考えるのが難しそう
- 今回余裕がなかったので、Edit機能とか、スタイルとかも暇があれば整備したいな
明日は @datsukan さんです。お楽しみに。