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
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
170
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
880
【リラン】AIの光と闇?失敗しないために知っておきたいAIリスクとその対応 ①政府の動き編
tkhresk
0
140
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
310
TDD - Test Driven Drupal
opdavies
0
3k
DevRelによる信頼構築とデータ駆動で変わるエンジニア採用 / DevRel Trust Building to Data Driven Engineering Hiring
bobtani
1
130
大規模言語モデル (LLM)における低精度数値表現
pfn
PRO
3
820
Databricksの生成AI戦略
taka_aki
1
370
Domain-driven Design: A Complete Example
ewolff
2
250
Featured
See All Featured
A better future with KSS
kneath
231
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
What's in a price? How to price your products and services
michaelherold
238
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Building an army of robots
kneath
300
41k
Atom: Resistance is Futile
akmur
260
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
The Cost Of JavaScript in 2023
addyosmani
21
4k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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をより楽しんでいきまし ょう!
ご静聴ありがとうございました!