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
120
【toranoana.deno#7】Denoからwasmを呼び出す基礎
6/22(水)開催のtoranoana.deno#7での発表資料になります。
虎の穴ラボ株式会社
June 23, 2022
Tweet
Share
More Decks by 虎の穴ラボ株式会社
See All by 虎の穴ラボ株式会社
【個人的】オブジェクト指向の現在地
toranoana
0
130
oakのミドルウェアを書くときの技のらしきもの
toranoana
0
120
toranoana.deno説明資料
toranoana
0
100
とらのあなラボTechConferenceVol.2_私、ECサイトはユーザーに使いやすくって言ったよね!〜とらのあな通販サイト 改善の取り組み〜
toranoana
0
160
クロスドメイントラッキングによる分析環境の構築
toranoana
0
150
OpenSearchで始める全文検索
toranoana
0
180
とらのあなラボTechConferenceVol.2_WAF-Athenaによるセキュリティ対策
toranoana
0
210
既存クラウドをTerraformで管理してみた
toranoana
0
9
【Tech Conference vol.2】コミュニケーションと技術を加速させるリモートワークペアプログラミング
toranoana
0
190
Other Decks in Technology
See All in Technology
FoodTechにおける商流・金流・物流の進化/Evolution of Commercial, Financial, and Logistics in FoodTech
dskst
0
400
SlackBotで あらゆる業務を自動化。問い合わせ〜DevOpsまで #CODT2022
kogatakanori
0
790
What's new in Vision
satotakeshi
0
200
UIKitのアップデート #WWDC22
akatsuki174
4
310
UWBを使ってみた
norioikedo
0
400
Oracle Cloud Infrastructure:2022年6月度サービス・アップデート
oracle4engineer
PRO
0
120
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
pastelinc
0
840
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
マネージャーからみたスクラムと自己管理化
shibe23
0
1k
Istio入門
nutslove
15
4.9k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
18k
Data in Google I/O - IO Extended GDG Seoul
kennethanceyer
0
150
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
57
5.2k
Visualization
eitanlees
124
11k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Designing with Data
zakiwarfel
91
3.9k
Why Our Code Smells
bkeepers
PRO
324
55k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Automating Front-end Workflow
addyosmani
1351
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Documentation Writing (for coders)
carmenhchung
48
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Optimizing for Happiness
mojombo
365
63k
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/manual@v1.8.3/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