Go + WebAssemblyを活用する / Using Go and WebAssembly

Transcript

1. Go + WebAssemblyを活用する mercari.go #8 (6/14) syumai

2. 自己紹介 syumai merpay Backend Developer (2018/5~) 趣味でJavaScript / TypeScript (Deno)

   をちょこちょこ書いてます

3. 最近やった事

4. Software Designに記事を書きました Software Design 2019年6月号 GoとWebAssemblyで遊ぼう ブラウザからアップロードしたファイルをcompress/gzipで圧縮す る方法を紹介してます

5. Go Playgroundにタブを追加するChrome拡張を作った Go Playgroundが複数ファイル編集に対応していたのでタブを作っ てみました React Hooks + Redux +

   TypeScript 動画をTwitterに貼ってます

6. 本題

7. Go + WebAssemblyを活用する

8. 今日は、気軽にGoのwasmを使っていく コツを紹介します

9. もう使ってみた方はいらっしゃいますか？

10. どんな事が出来るのか？

11. 先日の出来事

12. #zp‑syumaiにて

13. None

14. 社内で雑に依頼が飛んできた

15. Goでしか出来ないことをブラウザでやる

16. WebAssemblyがめっちゃハマりそう

17. やりました

18. time formatter の Demo https://syumai.github.io/go‑wasm‑playground/time/index.html

19. どうやっているのか？

20. まず、Goのwasmについておさらい

21. Goのwasmの使い方 buildオプションを設定する GOOS=js GOARCH=wasm .wasm ファイルが生成され、JavaScriptから呼び出し、Web上 で実行できるようになる syscall/js packageを使う JavaScript側のObjectを参照したり、関数を呼んだり出来る

    詳しくはSoftware Design 6月号に書いてます（懇親会とかでも聞いてくだ さい！）

22. 改めてtime formatterに戻ります

23. ディレクトリ構成 time ├── formatter │ └── formatter.go ├── index.html ├──

    index.js ├── index.wasm └── main.go

24. formatter package

25. formatter packageでやっている事 ボタンクリック時に動かす関数を書く HTMLをゴリゴリ組み立てる ボタンを取得、クリックしたときの動作を設定する

26. ボタンクリック時に動かす関数を書く formatter/formatter.go Formatter structのメソッドにしています

27. HTMLをゴリゴリ組み立てる formatter/formatter.go JavaScript側のdocument Objectへの参照を作っておいて、 insertAdjacentHTML して突っ込みます

28. ボタンを取得、クリックしたときの動作を設定する formatter/formatter.go div.New などは、指定したセレクタで getElementById する関 数です

29. main.go

30. main.goでやっている事 formatterを初期化して呼ぶだけ

31. これで動いた

32. けどつらみが…

33. 今の構成で辛いところ ├── formatter │ └── formatter.go => syscall/js に依存している ├──

    index.html ├── index.js ├── index.wasm └── main.go

34. syscall/jsに依存している GOOS=js GOARCH=wasmでしかコンパイル出来ないコードになっ てしまう

35. syscall/jsに依存している GOOS=js GOARCH=wasmでしかコンパイル出来ないコードになっ てしまう => go testが動かせない！

36. DOM操作をGoで行っている JavaScriptのdomのラッパーを書かないと辛い コールバックの処理を書くのがGoだと結構大変 https://github.com/syumai/go‑wasm‑playground/tree/master/dom

37. Go + wasmでプロジェクトを作る時のコツ

38. Go + wasmでプロジェクトを作る時のコツ コアの機能のpackageを切り出す main packageだけをsyscall/jsに依存させる

39. さらに踏み込むと Go側はGoで行いたい処理に集中すべき DOM操作はJavaScriptで行うようにする

40. この構成で作ったプロジェクト

41. ojichat‑web

42. 今話題のpackage greymdさんのojichatをwasmにしてWebページに組み込みます https://github.com/greymd/ojichat

43. 知らない方のためのDemo https://github.com/syumai/ojichat‑web

44. やった事 使いたい機能だけをExportするpackageを作る ojichatから必要な機能だけをメソッドとしてExportするstruct を宣言 JavaScript側のグローバル変数に使いたい機能を設定する 上記のstructをマッピングするJavaScriptのObjectを作る

45. ディレクトリ構成 ojichat-web ├── ojichat | ├── ojichat.go => syscall/js に依存しない

    │ └── ojichat_test.go ├── go.mod ├── go.sum ├── index.html ├── main.go ├── main.wasm └── wasm_exec.js

46. やった事を追っていきます 使いたい機能だけをExportするpackageを作る JavaScript側のグローバル変数に使いたい機能を設定する

47. 使いたい機能だけをExportするpackageを作る ojichat/ojichat.go ojichatのgeneratorをimport OjiChat structを宣言

48. 使いたい機能だけをExportするpackageを作る ojichat/ojichat.go Generate / TalkTo メソッドを公開

49. JavaScript側のグローバル変数に使いたい機能を設定す る main.go OjiChat structを初期化するコンストラクタを作る

50. JavaScript側のグローバル変数に使いたい機能を設定す る main.go グローバル変数としてOjiChatを設定

51. ブラウザのコンソールでDemo

52. DOM操作は全てJavaScript側に寄せています

53. DOM操作は全てJavaScript側に寄せています

54. 注意点 このコンストラクタの作り方だとメモリが解放されないので注意 JavaScript側でGo側のstructへの参照を持っている時の処理は追い きれていないです…

55. testも動く！ Demo

56. まとめ wasmのpackageはコア機能を切り離したほうがよいです syscall/jsはmain packageのみに依存させましょう テスト可能になります Go側でDOM操作までやるほど頑張らず、JavaScript側に寄せたほ うがよいです

57. と言いつつ Goだけで実装した簡易的な仮想DOMの実装を作っています https://github.com/syumai/go‑hyperscript ToDoリストも作れました Vue likeなGoのFrontendフレームワークのVuguなどもあります もっとGoだけで書きやすくなれば最高！

58. wasmを活用してGoをより楽しんでいきまし ょう！

59. ご静聴ありがとうございました！