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.5k
Go + WebAssemblyを活用する / Using Go and WebAssembly
syumai
June 14, 2019
Tweet
Share
More Decks by syumai
See All by syumai
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
360
初めてDefinitelyTypedにPRを出した話
syumai
1
570
利用者視点で考える、イテレータとの上手な付き合い方
syumai
5
680
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
7
3.4k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
7
970
Goのmultiple errorsについて (2024年4月版)
syumai
5
9k
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
7
950
Go言語で始めるCloudflare Workers
syumai
9
2.8k
xoのコード生成でgqlgenのDataLoader実装を楽にした話
syumai
2
440
Other Decks in Technology
See All in Technology
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
200
Building Products in the LLM Era
ymatsuwitter
10
5.5k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.3k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
400
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
720
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
13
3.4k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
クラウドサービス事業者におけるOSS
tagomoris
1
820
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
740
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
600
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
200
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Designing Experiences People Love
moore
140
23k
How STYLIGHT went responsive
nonsquared
98
5.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
KATA
mclloyd
29
14k
4 Signs Your Business is Dying
shpigford
182
22k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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をより楽しんでいきまし ょう!
ご静聴ありがとうございました!