Vugu: Go+WebAssemblyでつくる Omikuji-Go

Transcript

1. Vugu: Go+WebAssemblyでつくる Omikuji-Go Tokyo, July 18 2024 Misato IT Engineer @mikkegt
2. Today’s (glorious) blather. 自己紹介 01 コミュニティ活動 Vuguを使ったおみくじアプリ お披露目 Next Step おわり 02 03 04 05 06
3. お仕事：アプリ保守してます（TSとJava） お楽しみ：ランチに天王洲アイル, 運河散策 01 自己紹介
4. テック系・地域コミュニティで活動してます • WomenWhoGoスタッフ • 一般社団法人SingularitySocietyスタッフ ◦ 無料で使えるテイクアウトサービスの運用 ◦ たまにVue.jsを書いてます、たまに • 地域コミュニティ 02 コミュニティ活動 https://omochikaeri.com/
5. omikuji-go アプリを作った👏 この日のために👏👏 03 Vuguを使ったおみくじアプリ（本題）
6. おみくじアプリです Go+WebAssemblyなライブラリVuguを使用しました
7. WebAssemblyとは • GoやC++,Rustなどのコンパイル言語で書いたコードを Web用のAssemblyにコンパイルしブラウザーで実行する 技術です • JavaScriptと比べ処理速度が速く、複雑な計算や3Dグラ フィックスなどの重い処理に適しています • JavaScriptと連携して使用することができ、既存のウェ ブ技術と組み合わせて新しい可能性を広げています
8. プチ開発で採用したVugu • Vuguは、GoとWebAssemblyを使用してWebUIを構築す るための実験的なライブラリです • Vue.jsに触発された設計をもち、単一ファイルコンポー ネントやVue風のマークアップ構文を採用しています • Node.js、JavaScript、npmを使用せずに、純粋なGo コードでUIを開発できます • WebAssemblyを利用してブラウザ上で動作し、高速なパ フォーマンスを実現します
9. Vuguのコード, JSの部分に Goを書くのダヨ <div> <div vg-if="c.message != nil"> <p vg-html="c.message"></p> </div> </div> <script type="application/x-go"> import "hoge" type Root struct { message string } func (c *Root) hogehoge() { c.message = "hogehogehoge" } </script> 構造体 コンポーネントの状態管理 Vueのdataに相当 関数 Computedに相当 Watchに相当するもの はないけど実装は可 ディレクティブ
10. GoからDOM要素にアクセスできたりする <div> <canvas width="300" height="100" vg-js-populate="c.canvasPopulate(value)" ></canvas> </div> <script type="application/x-go"> type Root struct {} func (c *Root) canvasPopulate(value js.Value) { drawCtx := value.Call("getContext", "2d") drawCtx.Set("font", "30px Arial") drawCtx.Call("strokeText", "Hello from Vugu!", 10, 50) } </script>
11. omikuji-go お披露目 04 Vuguを使ったおみくじアプリ（Demo）
12. VuguはTinyGoでビルドできる //go:generate vugugen -tinygo ビルドしてCDNのWorkerに のせるのに挑戦したいかも 05 Next Step
13. ROB PIKE Go's purpose is to make its designers' programming lives better.
14. おしまい Thankyou! https://www.vugu.org/ https://pkg.go.dev/github.com/vugu/vugu https://github.com/mikkegt/omikuji-go