Vuguに触れてみた(構文確認編)

# はじめに
こちらは別記事([Vuguに触れてみた(環境構築編) ](https://qiita.com/inagacky/items/a1c8f13f0aa3c956ef5f
))の続きです。
今回は実際に構文確認しつつ、Vuguに触れていきたいと思います。


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

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

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

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

```go: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>
```

### 実行結果
![VUGU1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/4024d34e-9a16-00f5-3155-1dad98406208.gif)

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

```go: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>

```
### 実行結果
![VUGU2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/22283f23-c7ad-9b84-f486-b44389b8c3af.gif)

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

```go: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>
```

### 実行結果
![VUGU3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/4541a863-b8b9-fb57-cf5d-0bc1fbe9e985.gif)

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

```go: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>

```

```go: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>
```

### 実行結果
先ほどと同様です。
![VUGU4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/041d1253-dbe5-0d9f-d7cf-d5207f7a6559.gif)

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

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