tomatoaiu の Tech Blog

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

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

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

Vugu Go Webassembly

昨日はGo言語のライブラリのVuguでWebAssemblyに入門してみました。
今日は、Vuguで何か作成しようと思い、Go言語を学びながらAddRemoveリストを作成しました！

出来上がったもの

AddボタンとRemoveボタンをつけました。 Addボタンと押すとitemという文字列がリストに追加されて、Removeボタンを押すとitemという文字列がリストから一つ削除されます。

vugu_add_remove_list
vugu_add_remove_list

謎なところ

  • emitの仕方が分からない
  • RootDataにsliceが追加できない
  • RootDataの初期値が分からない
  • inputタグからの文字列の受け取りが分からない
  • deployの仕方が分からない

emitの仕方が分からない

コンポーネントを分けて作成しようと思ったのですが、親から子供にはpropsでデータを渡せるようになっていました。しかし、子供から親へのデータを渡す方法がわかりませんでした。そもそもGo言語詳しくないので、いろいろといじっても構文すら分からないところがあったので気長に考えてみます。

RootDataにsliceが追加できない

RootDataというのはVueでいうところのdata()に当たります。そのRootDataに配列を定義して、vg-forを使うことによりで列の長さの分だけliを追加することができます。しかし、現段階だとスライスを使ったものがエラーになってしまい、固定長の長さしかサポートされていないようです。

<ul vg-for='_, item := range data.Items'>
  <li vg-html="item"></li>
</ul>

ですので、sliceからarrayに、arrayからsliceにということにチャレンジしてみました。
だいたい以下のような形で変換することができました。

// arrayからslice
kahen := kotei[:]

// sliceからarray
kotei := make([]string, len(kahen))

RootDataの初期値が分からない

これほんと分かりませんでした。Go言語について詳しくなれたらわかるかもしれないです。

inputタグからの文字列の受け取りが分からない

Vueだとdataに定義しておいた変数を使って、inputタグにv-modelという形でその定義した変数を書くことにより、inputで編集した文字列が簡単に参照できるようになります。
今回はAdd、Removeボタンでリストにitemという文字列を追加するようにしているのですが、好きな文字列を追加したいと考えました。しかし、ちょこちょこ触ってみてもよくわかりませんでした。

成果物

今回作成したAddRemoveListです。
https://github.com/tomatoaiu/vugu-add-remove-list

デプロイできた

https://tomatoaiu.github.io/vugu-add-remove-list/dist/

デプロイ できるように修正

こちらのコミットです。
https://github.com/tomatoaiu/vugu-add-remove-list/commit/faa003819a7afa7228fdd5b08a0026b0bc23b652

何を修正したかと言うと読み込んでいたと思ったwasm_exec.jsファイルを読み込めるようにしただけです。

まとめ

Vuguはまだまだこれからのようでした。Vuguで何かを作成するスキルもまだまだこれからのようでした。
ビルド方法をちゃんと調べてまとめたいです。まぁとりあえず見ることができる形になって良かった！

しかし、現在の仕様だと、Androidからは見ることができないらしい。むむむ

参考文献