はじめに

こちらは別記事(Vuguに触れてみた(環境構築編) )の続きです。
今回は実際に構文確認しつつ、Vuguに触れていきたいと思います。

Vuguに触れてみた(環境構築)のファイル構成前提で始めますので、ご了承ください。

また、今回作ったものに関しては下記リポジトリに置いています。(更新するかもです。)
https://github.com/inagacky/vugu_sample

構文確認

まずは root.vugu を元に、色々と触れていこうと思います。
初期状態だと色々文言が入っていますので、削除してから始めています。

vg-if

Show Button というボタンをクリックすると、 Show というbool型の値が変わり、
SAMPLE TEXT という文言を表示するだけのコードです。

root.vugu

<div>
    <main role="main" class="container text-center">
        <div class="mt-5">
            <h1>Vugu Test</h1>
            <div class="lead">
                <input type="button" @click='c.Show=!c.Show' value="Show Button" />
            </div>
            <div vg-if='c.Show' style="margin-top: 10px; font-size: 20px;">
                SAMPLE TEXT
            </div>
        </div>
    </main>
</div>

<script type="application/x-go">
type Root struct {
    Show bool `vugu:"data"`
} 
</script>

実行結果

vg-for

もちろんfor文もかけます。
下記のコードは、Add Button をクリックする度に、100までの乱数値をリストに追加し、
リスト文を表示しているコードです。

root.vugu

<div>
    <main role="main" class="container text-center">
        <div class="mt-5">
            <h1>Vugu Test</h1>
            <div class="lead">
                <input type="button" @click='c.HandleClick(event)' value="Add Button" />
            </div>
            <div vg-if='len(c.Numbers) > 0'>
              <span vg-for='_, num := range c.Numbers'>
                  <span vg-content='num' style="margin-left: 10px;"></span>
              </span>
            </div>
        </div>
    </main>
</div>

<script type="application/x-go">

import "math/rand"

type Root struct {
  Numbers []int `vugu:"data"`
}

func (r *Root) HandleClick(event vugu.DOMEvent) {
  // リストへ追加
  r.Numbers = append(r.Numbers, rand.Intn(100))
}

</script>

実行結果

vg-attr

動的にStyle属性やClass属性の付与を行えます。
下記の例では、乱数を生成した後、乱数に応じたClass名を付与し、数字に色をつけています。

root.vugu

<div>
    <main role="main" class="container text-center">
        <div class="mt-5">
            <h1>Vugu Test</h1>
            <div class="lead">
                <input type="button" @click='c.HandleClick(event)' value="Add Button" />
            </div>
            <div vg-if='len(c.Randoms) > 0'>
              <span vg-for='_, rNumber := range c.Randoms'>
                  <span :class="rNumber.Style" vg-content='rNumber.Number' style="margin-left: 10px;"></span>
              </span>
            </div>
        </div>
    </main>
</div>

<script type="application/x-go">

import "math/rand"

type Root struct {
    Randoms []Random `vugu:"data"`
    Style string `vugu:"data"`
}

type Random struct {
	Number int
	Style string
}

func (r *Root) HandleClick(event vugu.DOMEvent) {

  num := rand.Intn(3)
  randomNum := Random {
  	Number: num,
  	Style: []string{"red", "green", "blue"}[num],
  }
  r.Randoms = append(r.Randoms, randomNum)
}

</script>

<style>
  .red {
    color: #f00;
  }
  .green {
    color: #0f0;
  }
  .blue {
    color: #00f;
  }
</style>

実行結果

コンポーネント作成

もちろん独自コンポーネントも作成することができます。
今回はサンプルとして、先ほどのコードの乱数の数値表示と色付けを
random-line.vugu に切り出し、コンポーネントにしました。

root.vugu

<div>
    <main role="main" class="container text-center">
        <div class="mt-5">
            <h1>Vugu Test</h1>
            <div class="lead">
                <input type="button" @click='c.HandleClick(event)' value="Add Button" />
            </div>
            <div vg-if='len(c.Numbers) > 0'>
              <span vg-for='_, rNumber := range c.Numbers'>
                  <main:RandomLine :Number="rNumber"></main:RandomLine>
              </span>
            </div>
        </div>
    </main>
</div>

<script type="application/x-go">

import "math/rand"

type Root struct {
    Numbers []int `vugu:"data"`
    Style string `vugu:"data"`
}

type Random struct {
	Number int
	Style string
}

func (r *Root) HandleClick(event vugu.DOMEvent) {

  num := rand.Intn(3)
  r.Numbers = append(r.Numbers, num)
}

</script>

random-line.vugu

<span :class='c.getStyle(c.Number)' vg-content='c.Number' style="margin-left: 10px;"></span>

<script type="application/x-go">
    type RandomLine struct {
      Number int `vugu:"data"`
    }

    func (r *RandomLine) getStyle(num int) string {
    	return []string{"red", "green", "blue"}[num];
    }
</script>

<style>
    .red {
        color: #f00;
    }
    .green {
        color: #0f0;
    }
    .blue {
        color: #00f;
    }
</style>

実行結果

先ほどと同様です。

終わりに

Golang と Vue.js に触れたことがある方なら、ある程度直感的に理解ができるのではないでしょうか。
正直まだまだ発展途上の技術だと思いますし、日本語の情報(というか英語も)ほぼ無く、
GitHubのIssueを確認したり、時には Vugu 自体のコードを読むことが必要になってきそうです。
将来的に Golang× WebAssembly といった場合に、一つの選択肢になればいいなと思います。
次回は何かしらアプリでも作ってみようかなと思います。

閲覧頂きありがとうございました！