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
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
5
570
Go言語で始めるCloudflare Workers
syumai
5
1.5k
Goのジェネリクスを活用する
syumai
2
2.7k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
4.7k
What's new in Go 1.20?
syumai
2
1.7k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
1.2k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
680
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
480
Other Decks in Technology
See All in Technology
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
1
180
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
8.2k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
1.7k
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
140
TDD - Test Driven Drupal
opdavies
0
3k
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
160
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
380
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
220
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
560
パフォーマンス最適化のベストプラクティス
databricksjapan
0
200
Featured
See All Featured
Building Adaptive Systems
keathley
32
1.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Debugging Ruby Performance
tmm1
70
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Code Review Best Practice
trishagee
56
15k
A better future with KSS
kneath
231
16k
How STYLIGHT went responsive
nonsquared
92
4.8k
RailsConf 2023
tenderlove
9
580
KATA
mclloyd
16
12k
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をより楽しんでいきまし ょう!
ご静聴ありがとうございました!