Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
【toranoana.deno#7】Denoからwasmを呼び出す基礎
虎の穴ラボ株式会社
June 23, 2022
Technology
0
290
【toranoana.deno#7】Denoからwasmを呼び出す基礎
6/22(水)開催のtoranoana.deno#7での発表資料になります。
虎の穴ラボ株式会社
June 23, 2022
Tweet
Share
More Decks by 虎の穴ラボ株式会社
See All by 虎の穴ラボ株式会社
Let_s_Go_Talk__6__GoのLT会_.pdf
toranoana
0
11
Fresh(Deno)で 画像投稿サイトを作ってみよう! with Cloudflare x Tora Viewer
toranoana
0
180
Deno Deployを使ってマークダウンで 書けるブログが爆速で建てられた話【toranoana.deno #10】
toranoana
0
210
TypeScript初心者がDeno+Freshで GraphQLエンドポイントを作成した話
toranoana
0
120
【20221019_toranoana.deno#9】閉鎖した個人開発のサービスを Deno Deployで復元する
toranoana
0
150
【20221019_toranoana.deno#9】ブログをlumeに移植しよう
toranoana
0
180
【20220920UV Study : フロントエンドLT会#7】WebAssemblyでブロック崩しを作ってみた話
toranoana
0
54
マネジメントLT_とらのあな通販マーケティングチームでの 開発の進め方
toranoana
0
73
Amplify + Next.js + TypeScript のアプリをいい感じにしたかった
toranoana
1
370
Other Decks in Technology
See All in Technology
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
140
02_プロトタイピングの進め方
kouzoukaikaku
0
340
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
350
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.6k
ChatGPT for Hacking
anugrahsr
0
4.3k
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.1k
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
170
OVN-Kubernetes-Introduction-ja-2023-01-27.pdf
orimanabu
1
320
Deep dive in Reserved Instance ~脳死推奨量購入からの脱却~
kzkmaeda
0
510
JAWS-UG 横浜 #54 資料
takakuni
0
210
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
100
グローバルチームことはじめ / Bootstrapping a global team
tasshi
1
670
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
Typedesign – Prime Four
hannesfritz
34
1.5k
Designing with Data
zakiwarfel
91
4.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.9k
What's new in Ruby 2.0
geeforr
336
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Embracing the Ebb and Flow
colly
75
3.6k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Transcript
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. denoでwasm呼ぶ基礎
虎の穴ラボ 藤原 佳顕 1
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. アジェンダ •
概要 • watについて • Denoからのwasmの取り扱いについて • まとめ 2
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 自己紹介 3
• 名前 ◦ 藤原佳顕 • 仕事 ◦ FantiaとかCreatiaとか社内アプリとか • 好み ◦ Clojure、Rust • 趣味 ◦ 格闘ゲーム ▪ Melty Blood、Guilty Gear ◦ ダライアス外伝
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 概要 4
• Denoからwasmを呼ぶのをいくつか試してみたので紹介します • wasmのコードは以下の本の序盤の内容になります ◦ https://www.amazon.co.jp/dp/4798173592/ref=cm_sw_r_tw_dp_ADTSNXQRE1PDMECHT79E ◦ wasm自体の書式はwatになります
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. watについて 5
• https://developer.mozilla.org/ja/docs/WebAssembly/Understanding_the_text_format • 「wasmバイナリーのテキスト表現」 ◦ 一種のプログラミング言語っぽいもの • S式形式と線形命令形式の2パターンある ◦ S式は名前の通りLisp系言語で使われるS式 ◦ 線形命令形式はスタックを直接操作するようなスタイル
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. watについて 6
• 線形命令スタイル (module (func (export "AddInt") (param $value_1 i32) (param $value_2 i32) (result i32) local.get $value_1 local.get $value_2 i32.add ) )
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. watについて 7
• S式スタイル (module (func (export "AddInt") (param $value_1 i32) (param $value_2 i32) (result i32) (i32.add (local.get $value_1) (local.get $value_2)) ) )
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う 8
• 公式ドキュメント通りの方法 const wasmCode = await Deno.readFile("AddInt.wasm"); const wasmModule = new WebAssembly.Module(wasmCode); const wasmInstance = new WebAssembly.Instance(wasmModule); const value1 = parseInt(Deno.args[0]); const value2 = parseInt(Deno.args[1]); const addInt = wasmInstance.exports.AddInt as (v1: number, v2: number) => number; console.log(addInt(value1, value2).toString());
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う
9 • https://deno.land/
[email protected]
/getting_started/webassembly ◦ サンプル上はバイナリがハードコーディングされていますが、ファイル読み込みに変更しています • 一方MDNの資料 ◦ https://developer.mozilla.org/ja/docs/WebAssembly/Loading_and_running ◦ > 新しい WebAssembly.compileStreaming/WebAssembly.instantiateStreaming メソッドは、より効率的 です。 • => Web APIに準拠しているのであれば使えるのでは?
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う
10 • instantiateStreamingを使うことでファイル読み込みとwasmのインスタンス化が一度に できる ◦ MDNのサンプル上はネットワーク経由でのfetch ◦ 今やりたいのはローカルファイルの読み込み ▪ →fetch経由でローカルファイルを読み込めるか • Denoではローカルファイルfetchがサポートされている ◦ https://deno.land/manual/runtime/web_platform_apis#fetching-local-files
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う 11
• instantiateStreamingを使う const wasmInstance = await WebAssembly.instantiateStreaming( fetch(new URL("./AddInt.wasm", import.meta.url).toString()), {}, ); const value1 = parseInt(Deno.args[0]); const value2 = parseInt(Deno.args[1]); const addInt = wasmInstance.instance.exports.AddInt as (v1: number, v2: number) => number; console.log(addInt(value1, value2).toString());
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う
12 • wasmが対応している型 ◦ i32/i64/f32/f64 • JavaScriptのNumber型 ◦ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Obje cts/Number ◦ `JavaScript の Number 型は IEEE 754 の倍精度 64ビットバイナリー形式であり ` ◦ Numberではi64が表現しきれない
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う
13 • BigInt ◦ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Obje cts/BigInt ◦ ES2020で導入された任意精度な整数値 • 数値のあとに`n`をつけるか、BigInt関数で作れる
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う
14 • i32だった部分をi64に変更 (module (func (export "AddIntBig") (param $value_1 i64) (param $value_2 i64) (result i64) local.get $value_1 local.get $value_2 i64.add ) )
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. Denoからwasmを扱う
15 • DenoならそのままBigIntが利用可能 const wasmInstance = await WebAssembly.instantiateStreaming( fetch(new URL("./AddIntBig.wasm", import.meta.url).toString()), {}, ); const value1 = BigInt(Deno.args[0] || 0); const value2 = BigInt(Deno.args[1] || 0); const addInt = wasmInstance.instance.exports.AddIntBig as (v1: BigInt, v2: BigInt) => BigInt; console.log(addInt(value1, value2).toString()); $ deno run -A AddIntBig.ts 9007199254740991 9007199254740991 > 18014398509481982
Copyright (C) 2021 Toranoana Inc. All Rights Reserved. まとめ •
DenoがWeb APIを取り込んでいるおかげでwasm関連のものはMDNのドキュメント等を 見ることでほぼそのまま動くことがわかりました • UI関連までwasm側で実装したものがDeno+WebViewとかで動くかは今後やってみたい です 16