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
600
【toranoana.deno#7】Denoからwasmを呼び出す基礎
6/22(水)開催のtoranoana.deno#7での発表資料になります。
虎の穴ラボ株式会社
June 23, 2022
Tweet
Share
More Decks by 虎の穴ラボ株式会社
See All by 虎の穴ラボ株式会社
Tailwind CSSとAtomic Designで実現する効率的な Web 開発の事例
toranoana
1
490
Denoについて、同人誌記事を出しました+update
toranoana
0
160
【虎の穴ラボ Tech Talk #2】プロンプトエンジニアリング
toranoana
0
95
20241121_[TechTalk#2]虎の穴ラボでのLLMについて取り組み紹介
toranoana
0
86
社内チャットへRAG導入した話(Tech Talk #2)
toranoana
0
150
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
520
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
toranoana
0
360
虎の穴ラボ Tech Talk_CDKでFargate環境構築
toranoana
1
380
虎の穴ラボスキルアップ支援制度の利用例
toranoana
0
6.7k
Other Decks in Technology
See All in Technology
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
130
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
CDK Vibe Coding Fes
tomoki10
1
630
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1.2k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
360
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Code Review Best Practice
trishagee
69
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Adaptive Systems
keathley
43
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Navigating Team Friction
lara
187
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Facilitating Awesome Meetings
lara
54
6.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GraphQLとの向き合い方2022年版
quramy
49
14k
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