Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Go + WebAssemblyを活用する / Using Go and WebAssembly
Search
syumai
June 14, 2019
Technology
1
2.3k
Go + WebAssemblyを活用する / Using Go and WebAssembly
syumai
June 14, 2019
Tweet
Share
More Decks by syumai
See All by syumai
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
5
460
Go言語で始めるCloudflare Workers
syumai
3
1.1k
Goのジェネリクスを活用する
syumai
2
2.5k
Goでスタックトレースを扱う方法がややこしい件について
syumai
1
4k
What's new in Go 1.20?
syumai
2
1.7k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
1.1k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
640
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
460
What's new in Go 1.18?
syumai
4
1.9k
Other Decks in Technology
See All in Technology
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.8k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
260
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
680
Getting started with controlling LEGO using Swift
hcrane
0
140
どう買う?Azure
kuniteru
1
190
やっていきテスト
k6s4i53rx
0
160
Vos logs méritent mieux que la config par défaut
lyrixx
2
380
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
700
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Scaling GitHub
holman
456
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
How to name files
jennybc
62
92k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Transcript
Go + WebAssemblyを活用する mercari.go #8 (6/14) syumai
自己紹介 syumai merpay Backend Developer (2018/5~) 趣味でJavaScript / TypeScript (Deno)
をちょこちょこ書いてます
最近やった事
Software Designに記事を書きました Software Design 2019年6月号 GoとWebAssemblyで遊ぼう ブラウザからアップロードしたファイルをcompress/gzipで圧縮す る方法を紹介してます
Go Playgroundにタブを追加するChrome拡張を作った Go Playgroundが複数ファイル編集に対応していたのでタブを作っ てみました React Hooks + Redux +
TypeScript 動画をTwitterに貼ってます
本題
Go + WebAssemblyを活用する
今日は、気軽にGoのwasmを使っていく コツを紹介します
もう使ってみた方はいらっしゃいますか?
どんな事が出来るのか?
先日の出来事
#zp‑syumaiにて
None
社内で雑に依頼が飛んできた
Goでしか出来ないことをブラウザでやる
WebAssemblyがめっちゃハマりそう
やりました
time formatter の Demo https://syumai.github.io/go‑wasm‑playground/time/index.html
どうやっているのか?
まず、Goのwasmについておさらい
Goのwasmの使い方 buildオプションを設定する GOOS=js GOARCH=wasm .wasm ファイルが生成され、JavaScriptから呼び出し、Web上 で実行できるようになる syscall/js packageを使う JavaScript側のObjectを参照したり、関数を呼んだり出来る
詳しくはSoftware Design 6月号に書いてます(懇親会とかでも聞いてくだ さい!)
改めてtime formatterに戻ります
ディレクトリ構成 time ├── formatter │ └── formatter.go ├── index.html ├──
index.js ├── index.wasm └── main.go
formatter package
formatter packageでやっている事 ボタンクリック時に動かす関数を書く HTMLをゴリゴリ組み立てる ボタンを取得、クリックしたときの動作を設定する
ボタンクリック時に動かす関数を書く formatter/formatter.go Formatter structのメソッドにしています
HTMLをゴリゴリ組み立てる formatter/formatter.go JavaScript側のdocument Objectへの参照を作っておいて、 insertAdjacentHTML して突っ込みます
ボタンを取得、クリックしたときの動作を設定する formatter/formatter.go div.New などは、指定したセレクタで getElementById する関 数です
main.go
main.goでやっている事 formatterを初期化して呼ぶだけ
これで動いた
けどつらみが…
今の構成で辛いところ ├── formatter │ └── formatter.go => syscall/js に依存している ├──
index.html ├── index.js ├── index.wasm └── main.go
syscall/jsに依存している GOOS=js GOARCH=wasmでしかコンパイル出来ないコードになっ てしまう
syscall/jsに依存している GOOS=js GOARCH=wasmでしかコンパイル出来ないコードになっ てしまう => go testが動かせない!
DOM操作をGoで行っている JavaScriptのdomのラッパーを書かないと辛い コールバックの処理を書くのがGoだと結構大変 https://github.com/syumai/go‑wasm‑playground/tree/master/dom
Go + wasmでプロジェクトを作る時のコツ
Go + wasmでプロジェクトを作る時のコツ コアの機能のpackageを切り出す main packageだけをsyscall/jsに依存させる
さらに踏み込むと Go側はGoで行いたい処理に集中すべき DOM操作はJavaScriptで行うようにする
この構成で作ったプロジェクト
ojichat‑web
今話題のpackage greymdさんのojichatをwasmにしてWebページに組み込みます https://github.com/greymd/ojichat
知らない方のためのDemo https://github.com/syumai/ojichat‑web
やった事 使いたい機能だけをExportするpackageを作る ojichatから必要な機能だけをメソッドとしてExportするstruct を宣言 JavaScript側のグローバル変数に使いたい機能を設定する 上記のstructをマッピングするJavaScriptのObjectを作る
ディレクトリ構成 ojichat-web ├── ojichat | ├── ojichat.go => syscall/js に依存しない
│ └── ojichat_test.go ├── go.mod ├── go.sum ├── index.html ├── main.go ├── main.wasm └── wasm_exec.js
やった事を追っていきます 使いたい機能だけをExportするpackageを作る JavaScript側のグローバル変数に使いたい機能を設定する
使いたい機能だけをExportするpackageを作る ojichat/ojichat.go ojichatのgeneratorをimport OjiChat structを宣言
使いたい機能だけをExportするpackageを作る ojichat/ojichat.go Generate / TalkTo メソッドを公開
JavaScript側のグローバル変数に使いたい機能を設定す る main.go OjiChat structを初期化するコンストラクタを作る
JavaScript側のグローバル変数に使いたい機能を設定す る main.go グローバル変数としてOjiChatを設定
ブラウザのコンソールでDemo
DOM操作は全てJavaScript側に寄せています
DOM操作は全てJavaScript側に寄せています
注意点 このコンストラクタの作り方だとメモリが解放されないので注意 JavaScript側でGo側のstructへの参照を持っている時の処理は追い きれていないです…
testも動く! Demo
まとめ wasmのpackageはコア機能を切り離したほうがよいです syscall/jsはmain packageのみに依存させましょう テスト可能になります Go側でDOM操作までやるほど頑張らず、JavaScript側に寄せたほ うがよいです
と言いつつ Goだけで実装した簡易的な仮想DOMの実装を作っています https://github.com/syumai/go‑hyperscript ToDoリストも作れました Vue likeなGoのFrontendフレームワークのVuguなどもあります もっとGoだけで書きやすくなれば最高!
wasmを活用してGoをより楽しんでいきまし ょう!
ご静聴ありがとうございました!