Help us understand the problem. What is going on with this article?

GoでVueっぽくWebアプリが作れるVugu事始め

More than 1 year has passed since last update.

ツイートが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ファイルが生成されます。

Untitled3.gif

Hot reloadはないですが、HTTPサーバは落とさずに再読み込みするだけで表示が更新されます。ネットワークを見ると、ちゃんとWebAssemblyファイルが生成されているのが分かります。これは動的なようで、静的ファイルはありませんでした。

Screenshot_ 2019-04-03 10.52.36.png

まとめ

Vuguはまだリリースしたてで、Experimentalなステージです。しかし、Goで書けるので型付けがあり、柔軟な書き方ができること、さらにWebAssemblyによって高速なWebアプリケーション(後、普通のJavaScriptより難読化が進んでいる)が作れるのがメリットになるでしょう。何よりVueっぽく書けるのが個人的に一押しポイントです。

なお、DOMやネットワーク操作はWebブラウザ側のJavaScriptで実行されます。WebAssemblyでもDOM書き換えが高速化されたり、CORS制限を越えたネットワークアクセスができる訳ではないのでご注意ください。

ぜひVuguを体験してみてください!

Vugu: A modern UI library for Go+WebAssembly

goofmint
MOONGIFT CEO. ニフクラ mobile backend、hifiveエバンジェリスト
https://www.moongift.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした