tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

MENU

【Go + Vugu】WebAssembly を始める

Go言語を勉強し終えてからVuguに触ろうと思ったけど、待ちきれないので Vuguを触ってみる。

Vue.jsみたいなシンタックスでフロントエンドを書くことができて、WebAssemblyで動くようになっているらしい。
go.modとかよく分からないけど、成り行きでどうにかやってみるぞ!

ローカルにプロジェクトのフォルダを作成

とりあえず、これしとく。

mkdir vugu
cd vugu

Githubにリポジトリを作成

go.modを使うみたいなんだけど、リポジトリを指定して作ってた記事を見つけたので、それ通りにやってみる。

/vugu master
❯ git init
/vugu master
❯ git remote add origin https://github.com/tomatoaiu/vugu.git

init

go mod init してみるぞ。node.jsのnpm initに近い気がする。

/vugu master
❯ go mod init github.com/tomatoaiu/vugu
go: creating new go.mod: module github.com/tomatoaiu/vugu

go.modファイルができてた!

rootファイル作成

VuguのGetting Startedを見ながらやってみる。

/vugu master*
❯ touch root.vugu

初めてのvuguファイルに書き込み。本当にVue.jsみたいにかける。

<!-- source: https://www.vugu.org/doc/start -->
<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>

http server用のファイル作成

何番ポートでサーバを立てるのか決めてるみたいですね。

/vugu master*
❯ touch devserver.go
// source: https://www.vugu.org/doc/start

// +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))
}

run

ついにきた。これで動けば、勝ったもの同然。

/vugu master*
❯  go run devserver.go


go: finding github.com/vugu/vugu/simplehttp latest
go: finding github.com/vugu/vugu latest
go: downloading github.com/vugu/vugu v0.0.0-20190424010945-0a722f131ff9
go: extracting github.com/vugu/vugu v0.0.0-20190424010945-0a722f131ff9
go: finding github.com/stretchr/testify v1.3.0
go: finding github.com/cespare/xxhash v1.1.0
go: finding golang.org/x/tools v0.0.0-20190407030857-0fdf0c73855b
go: finding golang.org/x/text v0.3.0
go: finding golang.org/x/net v0.0.0-20190328230028-74de082e2cca
go: finding github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72
go: finding github.com/OneOfOne/xxhash v1.2.2
go: finding github.com/davecgh/go-spew v1.1.0
go: finding github.com/stretchr/objx v0.1.0
go: finding github.com/pmezard/go-difflib v1.0.0
go: finding golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2
go: finding golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a
go: finding golang.org/x/net v0.0.0-20190311183353-d8887717615a
go: downloading golang.org/x/net v0.0.0-20190328230028-74de082e2cca
go: downloading github.com/cespare/xxhash v1.1.0
go: extracting github.com/cespare/xxhash v1.1.0
go: extracting golang.org/x/net v0.0.0-20190328230028-74de082e2cca
2019/04/26 16:16:26 Starting HTTP Server at "127.0.0.1:8844"

127.0.0.1:8844にアクセスしてみるぞ!

結果

vugu
vugu

動いた!!!!!!!!!!!!
初めてのWebAssembly!!!!!

続き

Vugu で AddRemoveリストを作成してみる

参考文献