goとWasm(webAssembly)を使ってカウントアップアプリ作ってみた！
リポジトリはこちら
GitHub
GitHub - kid2Ion/goWasmCountUp
Contribute to kid2Ion/goWasmCountUp development by creating an account on GitHub.
Wasm楽しい
目次
リポジトリ構成
こんな感じ
- wasm
|- index.html
|- main.go
|- main.wasm(自動生成)
|- wasm_exec.js
- main.go
- go.modリポジトリ直下のmain.go
こちらはいつものようにこれだけ
func main() {
fmt.Println("Server Start")
http.Handle("/", http.FileServer(http.Dir("./wasm/")))
http.ListenAndServe(":8080", nil)
}まあwasm配下のページをホスティングしているだけです！
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>
<button id="countUp">Count Up</button>
<div>Current Count: <span id="countDisplay">0</span></div>
</body>
</html>基本的にはお決まりの文です！
<body>の中にボタンとカウントを表示するタグを入れています
wasm/main.go
func main() {
c := make(chan struct{}, 0)
setUpButton()
<-c
}
func setUpButton() {
document := js.Global().Get("document")
button := document.Call("getElementById", "countUp")
button.Call("addEventListener", "click", js.FuncOf(func(js.Value, []js.Value) interface{} {
countUp()
return nil
}))
}
var count int
func countUp() {
count++
fmt.Println("current count:", count)
updateDisplay(count)
}
func updateDisplay(count int) {
document := js.Global().Get("document")
countDisplay := document.Call("getElementById", "countDisplay")
countDisplay.Set("innerText", count)
}ここは本来であればjsで書くものをgoで書いています！(ここが一番楽しいとこ)
go側でDOMを操作してます。
main()は待機してsetUpButton()を呼び出します。
setUpButton()はボタンの要素をキャッチして押下される荼毘countUp()を呼び出します。
countUp()はcount変数を繰り上げつつupdateDisplay()を呼び出します
updateDisplay()は表示するhtmlタグを見つけて表示させます。
他のファイル
他のファイルは基本的に自動生成やコピーです！
そのあたりは以前書いた記事で紹介しているのでそちらも是非読んでみてください
以上でさ
