Slide 1
Slide 1 text
Go + WebAssemblyを活用する
mercari.go #8 (6/14)
syumai
Slide 2
Slide 2 text
自己紹介
syumai
merpay Backend Developer (2018/5~)
趣味でJavaScript / TypeScript (Deno) をちょこちょこ書いてます
Slide 3
Slide 3 text
最近やった事
Slide 4
Slide 4 text
Software Designに記事を書きました
Software Design 2019年6月号
GoとWebAssemblyで遊ぼう
ブラウザからアップロードしたファイルをcompress/gzipで圧縮す
る方法を紹介してます
Slide 5
Slide 5 text
Go Playgroundにタブを追加するChrome拡張を作った
Go Playgroundが複数ファイル編集に対応していたのでタブを作っ
てみました
React Hooks + Redux + TypeScript
動画をTwitterに貼ってます
Slide 6
Slide 6 text
本題
Slide 7
Slide 7 text
Go + WebAssemblyを活用する
Slide 8
Slide 8 text
今日は、気軽にGoのwasmを使っていく
コツを紹介します
Slide 9
Slide 9 text
もう使ってみた方はいらっしゃいますか？
Slide 10
Slide 10 text
どんな事が出来るのか？
Slide 11
Slide 11 text
先日の出来事
Slide 12
Slide 12 text
#zp‑syumaiにて
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
社内で雑に依頼が飛んできた
Slide 15
Slide 15 text
Goでしか出来ないことをブラウザでやる
Slide 16
Slide 16 text
WebAssemblyがめっちゃハマりそう
Slide 17
Slide 17 text
やりました
Slide 18
Slide 18 text
time formatter の Demo
https://syumai.github.io/go‑wasm‑playground/time/index.html
Slide 19
Slide 19 text
どうやっているのか？
Slide 20
Slide 20 text
まず、Goのwasmについておさらい
Slide 21
Slide 21 text
Goのwasmの使い方
buildオプションを設定する
GOOS=js GOARCH=wasm
.wasm ファイルが生成され、JavaScriptから呼び出し、Web上
で実行できるようになる
syscall/js packageを使う
JavaScript側のObjectを参照したり、関数を呼んだり出来る
詳しくはSoftware Design 6月号に書いてます（懇親会とかでも聞いてくだ
さい！）
Slide 22
Slide 22 text
改めてtime formatterに戻ります
Slide 23
Slide 23 text
ディレクトリ構成
time
├── formatter
│ └── formatter.go
├── index.html
├── index.js
├── index.wasm
└── main.go
Slide 24
Slide 24 text
formatter package
Slide 25
Slide 25 text
formatter packageでやっている事
ボタンクリック時に動かす関数を書く
HTMLをゴリゴリ組み立てる
ボタンを取得、クリックしたときの動作を設定する
Slide 26
Slide 26 text
ボタンクリック時に動かす関数を書く
formatter/formatter.go
Formatter structのメソッドにしています
Slide 27
Slide 27 text
HTMLをゴリゴリ組み立てる
formatter/formatter.go
JavaScript側のdocument Objectへの参照を作っておいて、
insertAdjacentHTML
して突っ込みます
Slide 28
Slide 28 text
ボタンを取得、クリックしたときの動作を設定する
formatter/formatter.go
div.New
などは、指定したセレクタで getElementById
する関
数です
Slide 29
Slide 29 text
main.go
Slide 30
Slide 30 text
main.goでやっている事
formatterを初期化して呼ぶだけ
Slide 31
Slide 31 text
これで動いた
Slide 32
Slide 32 text
けどつらみが…
Slide 33
Slide 33 text
今の構成で辛いところ
├── formatter
│ └── formatter.go => syscall/js
に依存している
├── index.html
├── index.js
├── index.wasm
└── main.go
Slide 34
Slide 34 text
syscall/jsに依存している
GOOS=js GOARCH=wasmでしかコンパイル出来ないコードになっ
てしまう
Slide 35
Slide 35 text
syscall/jsに依存している
GOOS=js GOARCH=wasmでしかコンパイル出来ないコードになっ
てしまう
=> go testが動かせない！
Slide 36
Slide 36 text
DOM操作をGoで行っている
JavaScriptのdomのラッパーを書かないと辛い
コールバックの処理を書くのがGoだと結構大変
https://github.com/syumai/go‑wasm‑playground/tree/master/dom
Slide 37
Slide 37 text
Go + wasmでプロジェクトを作る時のコツ
Slide 38
Slide 38 text
Go + wasmでプロジェクトを作る時のコツ
コアの機能のpackageを切り出す
main packageだけをsyscall/jsに依存させる
Slide 39
Slide 39 text
さらに踏み込むと
Go側はGoで行いたい処理に集中すべき
DOM操作はJavaScriptで行うようにする
Slide 40
Slide 40 text
この構成で作ったプロジェクト
Slide 41
Slide 41 text
ojichat‑web
Slide 42
Slide 42 text
今話題のpackage
greymdさんのojichatをwasmにしてWebページに組み込みます
https://github.com/greymd/ojichat
Slide 43
Slide 43 text
知らない方のためのDemo
https://github.com/syumai/ojichat‑web
Slide 44
Slide 44 text
やった事
使いたい機能だけをExportするpackageを作る
ojichatから必要な機能だけをメソッドとしてExportするstruct
を宣言
JavaScript側のグローバル変数に使いたい機能を設定する
上記のstructをマッピングするJavaScriptのObjectを作る
Slide 45
Slide 45 text
ディレクトリ構成
ojichat-web
├── ojichat
| ├── ojichat.go => syscall/js
に依存しない
│ └── ojichat_test.go
├── go.mod
├── go.sum
├── index.html
├── main.go
├── main.wasm
└── wasm_exec.js
Slide 46
Slide 46 text
やった事を追っていきます
使いたい機能だけをExportするpackageを作る
JavaScript側のグローバル変数に使いたい機能を設定する
Slide 47
Slide 47 text
使いたい機能だけをExportするpackageを作る
ojichat/ojichat.go
ojichatのgeneratorをimport
OjiChat structを宣言
Slide 48
Slide 48 text
使いたい機能だけをExportするpackageを作る
ojichat/ojichat.go
Generate / TalkTo メソッドを公開
Slide 49
Slide 49 text
JavaScript側のグローバル変数に使いたい機能を設定す
る
main.go
OjiChat structを初期化するコンストラクタを作る
Slide 50
Slide 50 text
JavaScript側のグローバル変数に使いたい機能を設定す
る
main.go
グローバル変数としてOjiChatを設定
Slide 51
Slide 51 text
ブラウザのコンソールでDemo
Slide 52
Slide 52 text
DOM操作は全てJavaScript側に寄せています
Slide 53
Slide 53 text
DOM操作は全てJavaScript側に寄せています
Slide 54
Slide 54 text
注意点
このコンストラクタの作り方だとメモリが解放されないので注意
JavaScript側でGo側のstructへの参照を持っている時の処理は追い
きれていないです…
Slide 55
Slide 55 text
testも動く！
Demo
Slide 56
Slide 56 text
まとめ
wasmのpackageはコア機能を切り離したほうがよいです
syscall/jsはmain packageのみに依存させましょう
テスト可能になります
Go側でDOM操作までやるほど頑張らず、JavaScript側に寄せたほ
うがよいです
Slide 57
Slide 57 text
と言いつつ
Goだけで実装した簡易的な仮想DOMの実装を作っています
https://github.com/syumai/go‑hyperscript
ToDoリストも作れました
Vue likeなGoのFrontendフレームワークのVuguなどもあります
もっとGoだけで書きやすくなれば最高！
Slide 58
Slide 58 text
wasmを活用してGoをより楽しんでいきまし
ょう！
Slide 59
Slide 59 text
ご静聴ありがとうございました！