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
500
Go言語で始めるCloudflare Workers
syumai
4
1.3k
Goのジェネリクスを活用する
syumai
2
2.5k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
4.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
660
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
470
What's new in Go 1.18?
syumai
4
1.9k
Other Decks in Technology
See All in Technology
0→1開発における技術選定において一番大切なこと
bicstone
1
320
反実仮想機械学習とは何か
usaito
PRO
6
1.3k
【SORACOM UG】(2024年度版) SIMってなんだ? ~セルラー通信がつながる仕組み、解説します~
soracom
PRO
0
210
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
オブザーバビリティの Primary Signals
onk
PRO
0
530
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.8k
Databricks:『生成AI World Cup』のご案内
databricksjapan
1
130
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
シン・Kafka / shin-kafka
oracle4engineer
PRO
6
2.7k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
420
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
280
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
150
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Language of Interfaces
destraynor
151
23k
Code Reviewing Like a Champion
maltzj
513
39k
YesSQL, Process and Tooling at Scale
rocio
162
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
4 Signs Your Business is Dying
shpigford
175
21k
Designing for Performance
lara
601
67k
The Invisible Customer
myddelton
114
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
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をより楽しんでいきまし ょう!
ご静聴ありがとうございました!