ツイートが100RT超えたので、Qiitaにも書いてみます。
Go 1.11がJavaScript APIをすべてサポートしたライブラリを開発し、WebAssemblyに新しい未来が見えました。それまでのWebAssemblyはDOMやネットワーク操作ができないとされてきたので、ループ処理の高速化や数値計算、またはCanvasをゴリゴリ使うゲームくらいしか使い道がないよね…といった評価でした。しかしJavaScript APIが実装されたことで、DOM操作やネットワーク処理が可能になり、WebアプリケーションをそのままGoに置き換えられるんじゃないかという可能性が出てきました。
GoではじめるWebAssebmly その1「Hello World」 | hifive開発者ブログ
とは言え、直接書くとコードがなかなか複雑というか、残念な感じになっていました。例えばネットワークのオンライン、オフラインをイベント通知を受け取る場合のコードは下記のようになります。
navigator := js.Global().Get("navigator")
cb1 := js.NewCallback(func(args []js.Value) {
if navigator.Get("onLine").Bool() {
println("Network is Online");
} else {
println("Network is Offline");
}
})
window.Call("addEventListener", "online", cb1)
window.Call("addEventListener", "offline", cb1)
その内、良い感じにラッピングしたフレームワーク（しかも仮想DOMが使えるような）が出るんじゃないかと思っていたのですが、ついにVuguによって実現しそうです。
Vugu: A modern UI library for Go+WebAssembly
ということで、Getting startedに沿った進め方を紹介します。
Go 1.12のインストール
VuguはGo 1.12が必須です。ということでインストールします。goenv を使うと楽ちんです。
$ goenv install 1.12
$ goenv local 1.12
go.modの作成
go.mod というファイルを作ります。内容は次の通りです。
module example.org/someone/testapp
root.vuguの作成
root.vuguはWeb Component風にUI、Goがまとまったファイルになります。たぶん画面ごとにvuguファイルを作っていくのでしょう。root.vuguの内容は次の通りです。
<div class="my-first-vugu-comp">
<button @click="data.Toggle()">Test</button>
<div vg-if="data.Show">I am here!</div>
</div>
<style>
.my-first-vugu-comp { background: #eee; }
</style>
<script type="application/x-go">
type RootData struct { Show bool }
func (data *RootData) Toggle() { data.Show = !data.Show }
</script>
見て分かりますが、scriptタグがapplication/x-goになっていて、その中はGoを記述します。RootDataを定義しておいて、それがイベント時に送られてくるので、その内容を書き換えるといった具合です。Vueとはちょっと書き方が違いますが、分からないものでもないでしょう。
開発用サーバを作る
ここは単純なGoです。devserver.go というファイルで作りますが、名前は何でも良いです。
// +build ignore
package main
import (
"log"
"net/http"
"os"
"github.com/vugu/vugu/simplehttp"
)
func main() {
wd, _ := os.Getwd()
l := "127.0.0.1:8844"
log.Printf("Starting HTTP Server at %q", l)
h := simplehttp.New(wd, true)
// include a CSS file
// simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
log.Fatal(http.ListenAndServe(l, h))
}
実行する
では実行します。単に実行するだけでvuguのダウンロードも行ってくれる辺り、Goは素晴らしいですね。
$ go run devserver.go
これで http://localhost:8844 でサーバが立ち上がります。
アクセスする
では実際にアクセスします。アクセスすると最初にローディングが走って、Webの画面が表示されます。このローディングの時にWebAssemblyやGoファイルが生成されます。
Hot reloadはないですが、HTTPサーバは落とさずに再読み込みするだけで表示が更新されます。ネットワークを見ると、ちゃんとWebAssemblyファイルが生成されているのが分かります。これは動的なようで、静的ファイルはありませんでした。
まとめ
Vuguはまだリリースしたてで、Experimentalなステージです。しかし、Goで書けるので型付けがあり、柔軟な書き方ができること、さらにWebAssemblyによって高速なWebアプリケーション（後、普通のJavaScriptより難読化が進んでいる）が作れるのがメリットになるでしょう。何よりVueっぽく書けるのが個人的に一押しポイントです。
なお、DOMやネットワーク操作はWebブラウザ側のJavaScriptで実行されます。WebAssemblyでもDOM書き換えが高速化されたり、CORS制限を越えたネットワークアクセスができる訳ではないのでご注意ください。
ぜひVuguを体験してみてください！