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
620
【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
520
Denoについて、同人誌記事を出しました+update
toranoana
0
170
【虎の穴ラボ Tech Talk #2】プロンプトエンジニアリング
toranoana
0
110
20241121_[TechTalk#2]虎の穴ラボでのLLMについて取り組み紹介
toranoana
0
98
社内チャットへRAG導入した話(Tech Talk #2)
toranoana
0
170
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
550
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
toranoana
0
390
虎の穴ラボ Tech Talk_CDKでFargate環境構築
toranoana
1
420
虎の穴ラボスキルアップ支援制度の利用例
toranoana
0
7.6k
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
390
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
Obsidian応用活用術
onikun94
1
480
Language Update: Java
skrb
2
290
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
230
ガチな登山用デバイスからこんにちは
halka
1
240
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
420
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
390
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
A designer walks into a library…
pauljervisheath
207
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Side Projects
sachag
455
43k
How to train your dragon (web standard)
notwaldorf
96
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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