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
【toranoana.deno#7】Denoからwasmを呼び出す基礎
Search
虎の穴ラボ株式会社
June 23, 2022
Technology
0
460
【toranoana.deno#7】Denoからwasmを呼び出す基礎
6/22(水)開催のtoranoana.deno#7での発表資料になります。
虎の穴ラボ株式会社
June 23, 2022
Tweet
Share
More Decks by 虎の穴ラボ株式会社
See All by 虎の穴ラボ株式会社
FreshとHonoでDeno KVを使い倒す
toranoana
1
19
サブカル業界Developers_実践_開発業務でのAIの活用
toranoana
1
230
「エンジニアリングマネージャーのしごと」勉強してみた
toranoana
2
220
【OSC2024 Online/Spring】とらのあなラボの Deno イベント開催の取り組み
toranoana
0
260
【toranoana.deno#15】WebGPUで遊ぼう
toranoana
0
270
App Router による Web 開発について
toranoana
0
84
Fresh(Deno)をプラグインで拡張しよう!
toranoana
0
180
Freshプラグインのテストもプラグインを使うと捗る!
toranoana
0
120
個人開発アプリにスキーマ 駆動開発を取り入れた話
toranoana
0
69
Other Decks in Technology
See All in Technology
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
160
Vos logs méritent mieux que la config par défaut
lyrixx
2
340
GraphQLに入門してみた
chiroruxx
2
120
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
460
統計的学習理論読み Chapter 1
kmatsui
3
820
大規模データとの戦い方
knih
1
460
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
370
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
730
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
250
Autify Company Deck
autifyhq
1
30k
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
24
6.9k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
512
39k
The Pragmatic Product Professional
lauravandoore
24
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Faster Mobile Websites
deanohume
296
30k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Design by the Numbers
sachag
274
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Thoughts on Productivity
jonyablonski
57
3.8k
Agile that works and the tools we love
rasmusluckow
323
20k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
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