Tweet
Tweet

Slide 1

Slide 1 text

Wasm わからないけど Go で実装したいから入門する おーたかこーたろー / @otakakot 2024.12.10 GoConnect #4 The Go gopher was designed by Renée French. #goconnect

Slide 2

Slide 2 text

Wasm ( Web Assembly ) ってご存知ですか？ こういうアイコン #goconnect

Slide 3

Slide 3 text

私はあんまりわかっていないです。 #goconnect

Slide 4

Slide 4 text

Wasm を知るといいことありそう！ たぶん・・・！ #goconnect #goconnect

Slide 5

Slide 5 text

INDEX 01 Wasm ( WebAssembly ) とは 02 Go × Wasm 03 なぜ Wasm に入門するのか 04 Go × WASI

Slide 6

Slide 6 text

01 Wasm ( WebAssembly ) とは 02 Go × Wasm 03 なぜ Wasm に入門するのか 04 Go × WASI INDEX #goconnect

Slide 7

Slide 7 text

WASM ( WebAssembly ) WebAssembly は現代のウェブブラウザーで実行できる新しい種類の コードです。ネイティブに近いパフォーマンスで動作する、コンパクト なバイナリー形式の低レベルなアセンブリー風言語です。さらに、 C/ C++、C# や Rust などの言語のコンパイル先となり、それらの言語を ウェブ上で実行することができます。 https:/ /developer.mozilla.org/ja/docs/WebAssembly/Concepts より抜粋 #goconnect #goconnect

Slide 8

Slide 8 text

WASM ( WebAssembly ) JavaScript を補完、並行して動作するように設計されています。 WebAssembly JavaScript API を使用して、 WebAssembly モジュールを JavaScript アプリケーションに読み込み、2 つの間で機能を共有できま す。これにより、WebAssembly コードの記述方法を知らなくても、 WebAssembly のパフォーマンスとパワー、 JavaScript の表現力と柔軟 性を同じアプリケーションで活用できます。 https:/ /developer.mozilla.org/ja/docs/WebAssembly/Concepts より抜粋 #goconnect #goconnect

Slide 9

Slide 9 text

なるほど、わからん #goconnect #goconnect

Slide 10

Slide 10 text

JavaScript 以外で書いたコードを JavaScript から扱えるようにしようぜ！ #goconnect #goconnect

Slide 11

Slide 11 text

INDEX 01 Wasm ( WebAssembly ) とは 02 Go × Wasm 03 なぜ Wasm に入門するのか 04 Go × WASI #goconnect

Slide 12

Slide 12 text

JavaScript 以外で書いたコードを  JavaScript から扱えるようにしようぜ！ Go #goconnect #goconnect

Slide 13

Slide 13 text

Go Wiki: WebAssembly 5T Go を実装すQ CT Wasm としてビルドすQ "T JavaScript サポートファイルをコピーすQ T JavaScript を実装する https://go.dev/wiki/WebAssembly より #goconnect #goconnect ※ Go のバージョンは 1.23

Slide 14

Slide 14 text

1. Go を実装する #goconnect #goconnect

Slide 15

Slide 15 text

2. Wasm としてビルドする #goconnect #goconnect

Slide 16

Slide 16 text

3. JavaScript サポートファイルをコピーする #goconnect #goconnect

Slide 17

Slide 17 text

4. JavaScript を実装する #goconnect #goconnect

Slide 18

Slide 18 text

JavaScriptの実装は何をしている？ #goconnect #goconnect

Slide 19

Slide 19 text

JavaScript での実装 ← wasm_exec.js のクラスをインスタンス化 ← Wasm モジュールをコンパイル & インスタンス化 ← Wasm モジュールを取得 & 指定 ← Wasm モジュールと JavaScript の橋渡し ← Wasm を実行 #goconnect #goconnect

Slide 20

Slide 20 text

JavaScript と Go の実装 #goconnect #goconnect

Slide 21

Slide 21 text

Go JavaScript #goconnect #goconnect

Slide 22

Slide 22 text

#goconnect #goconnect

Slide 23

Slide 23 text

Go JavaScript #goconnect #goconnect

Slide 24

Slide 24 text

Go JavaScript #goconnect #goconnect

Slide 25

Slide 25 text

Go JavaScript #goconnect #goconnect

Slide 26

Slide 26 text

Go JavaScript #goconnect #goconnect

Slide 27

Slide 27 text

WIT ってものがあるらしい。 #goconnect #goconnect

Slide 28

Slide 28 text

INDEX 01 Wasm ( WebAssembly ) とは 02 Go × Wasm 03 なぜ Wasm に入門するのか 04 Go × WASI #goconnect

Slide 29

Slide 29 text

Wasm ランタイム Supabase Edge Functions Deno Deploy Cloudflare Workers https://supabase.com/docs/guides/functions https://deno.com/deploy https://developers.cloudflare.com/workers #goconnect #goconnect

Slide 30

Slide 30 text

Wasm ランタイム Supabase Edge Functions Deno Deploy Cloudflare Workers https://supabase.com/docs/guides/functions https://deno.com/deploy https://developers.cloudflare.com/workers #goconnect #goconnect 無料でデプロイできる(Edge)サーバー

Slide 31

Slide 31 text

Wasm ランタイム Supabase Edge Functions Deno Deploy Cloudflare Workers https://supabase.com/docs/guides/functions https://deno.com/deploy https://developers.cloudflare.com/workers #goconnect v v #goconnect 無料！

Slide 32

Slide 32 text

Wasm ランタイム Supabase Edge Functions Deno Deploy Cloudflare Workers https://supabase.com/docs/guides/functions https://deno.com/deploy https://developers.cloudflare.com/workers #goconnect #goconnect 最高！

Slide 33

Slide 33 text

Wasm を知れば無料で開発できる Go サーバーの選択肢が増える！ #goconnect #goconnect

Slide 34

Slide 34 text

ただしサーバーを実装するには JavaScript ↔︎ Go の変換が必要 #goconnect #goconnect

Slide 35

Slide 35 text

JavaScript ↔︎ Go Request: Response: #goconnect #goconnect JavaScript Go Go JavaScript → →

Slide 36

Slide 36 text

JavaScript ↔︎ Go Request: Response: #goconnect #goconnect https://developer.mozilla.org/ja/docs/Web/API/ Request https://pkg.go.dev/net/http#Response https://pkg.go.dev/net/http#Request https://developer.mozilla.org/ja/docs/Web/API/ Response → →

Slide 37

Slide 37 text

JavaScript ↔︎ Go #goconnect #goconnect Request: Response: https://developer.mozilla.org/ja/docs/Web/API/ Request https://pkg.go.dev/net/http#Response https://pkg.go.dev/net/http#Request https://developer.mozilla.org/ja/docs/Web/API/ Response → → 結構めんどくさい & JavaScript の知識が必要

Slide 38

Slide 38 text

このツラミを感じず実装できる最高のライブラリ syumai/workers #goconnect #goconnect

Slide 39

Slide 39 text

#goconnect #goconnect

Slide 40

Slide 40 text

#goconnect #goconnect Cloudflare Workers で Go を動かせる 標準のhttp.Handler 形式で実装可能 JavaScriptの知識がな くても実装可能

Slide 41

Slide 41 text

Request: JavaScript → Go https://github.com/syumai/workers/blob/main/internal/jshttp/request.go より抜粋 #goconnect #goconnect

Slide 42

Slide 42 text

Response: Go → JavaScript https://github.com/syumai/workers/blob/main/internal/jshttp/response.go　より抜粋 #goconnect #goconnect

Slide 43

Slide 43 text

INDEX 01 Wasm ( WebAssembly ) とは 02 Go × Wasm 03 なぜ Wasm に入門するのか 04 Go × WASI #goconnect

Slide 44

Slide 44 text

Wasm のさらに向こうへ WASI Plus Ultra!! WASI ( WebAssembly System Interface ) の登場 Web 以外でも WebAssembly を使おうという動き ↓ これにともない WASI ランタイムが登場 l wasmtimj l Luce™ l l WasmEdge　　etc... Wasmem ↓ #goconnect #goconnect

Slide 45

Slide 45 text

Go × WASI #goconnect #goconnect

Slide 46

Slide 46 text

Hello World! はできるけど サーバーは WASI ランタイムによって 動かせなかったり... #goconnect #goconnect

Slide 47

Slide 47 text

無料デプロイのためにWASI への挑戦は続く... #goconnect #goconnect

Slide 48

Slide 48 text

Kotaro Otaka おーたかこーたろー / @otakakot Web Engineer 新卒入社 Hello Golang! Web Engineer ＠株式会社ビットキー 2020.04 2021.04 2022.11 Go言語推し #goconnect

Slide 49

Slide 49 text

https://zenn.dev/otakakot/articles/9e9269a87aafeb https://speakerdeck.com/otakakot/free- go-server-development-recommendations #goconnect #goconnect

Slide 50

Slide 50 text

#goconnect #goconnect Go 静聴 ありがとうございました！