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
FFI: RustとWebAssemblyとJavaScriptと
Search
d0iasm
January 27, 2020
Programming
1
1.3k
FFI: RustとWebAssemblyとJavaScriptと
2020/1/17にRust LT #8 で発表した資料です。
https://rust.connpass.com/event/160225/
d0iasm
January 27, 2020
Tweet
Share
More Decks by d0iasm
See All by d0iasm
WebAssembly outside of the browser
d0iasm
12
3.9k
Hello World in coreboot
d0iasm
3
910
Other Decks in Programming
See All in Programming
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
640
XP, Testing and ninja testing ZOZ5
m_seki
3
360
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.1k
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
680
Swift Concurrency - 状態監視の罠
objectiveaudio
2
480
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
420
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Catch Up: Go Style Guide Update
andpad
0
200
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
For a Future-Friendly Web
brad_frost
180
9.9k
A better future with KSS
kneath
239
17k
Typedesign – Prime Four
hannesfritz
42
2.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Writing Fast Ruby
sferik
629
62k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
FFI: RustとWebAssemblyと JavaScriptと @d0iasm
何をしてきた? • インターンシップ @ Google ◦ Chrome OS / Chrome
browser • Coreboot (オープンソースBIOS) 開発 @ GSoC 今は何してる? • インターンシップ @ Wasmer (Rust 使用) • RISC-Vエミュレータ開発 @ 趣味 (Rust 使用) • 修論 @ 大学 (Rust 不使用) Doi Asami d0iasm
rvemu: RISC-V Emulator Web上で動くRustで書かれたRISC-Vエミュレータ ブログ: https://d0iasm.github.io/blog/risc-v/2019/12/19/fibonacci-numbers-on-my-riscv-emulator.html • 現在RV64Gをサポート • まだ実用レベルでは無い
• ほとんどの部分がRustで書 かれている
rvemu: RISC-V Emulator 仕組み • バックエンドの仕組みは必要なく、ブラウザだけで動く • メインのコード(CPUエミュレーション)がRustで書かれている • ブラウザがサポートしている言語は
JavaScriptのみ 疑問 • Rustでフロントエンド開発するために、どうやって JavaScriptとやり取りする? Rust JavaScript Browser
RustをWebAssemblyにコンパイル Rust JavaScript Browser WebAssembly compile • スタック形式のVMで動くバイ ナリ •
LLVMが生成形式のターゲッ トとしてサポート
RustをWebAssemblyにコンパイル Rust JavaScript Browser WebAssembly compile i32 | i64 |
f32 | f64 の型しか サポートしていない OK: fn add(a: i32, b: i32) -> i32 NG: fn concat(a: &str, b: &str) -> String
wasm-bindgen (https://github.com/rustwasm/wasm-bindgen) • RustとJS間のグルーコードを生成してくれるツール • FFI (foreign function interface) の一種
◦ 異なるプログラミング言語間でやりとりをするための仕組み • JSから呼び出したいRustの関数に #[wasm_bindgen] をつけると、文字列等の データのやりとりが可能になる wasm_bindgenによって生成される ファイル • sample.js: グルーコード • sample_bg.wasm: 関数本体 sample.rs $ wasm-pack build --target web
wasm-bindgen (https://github.com/rustwasm/wasm-bindgen) sample.rs index.js $ wasm-pack build --target web sample.js
sample_bg.wasm
使い方はわかった。 で、 どういう仕組み? wasm-bindgenの実装と 生成されたコードを読んでみました
wasm-bindgenで文字列を扱う仕組み lib.rs hoge.js (プロジェクト名.js) 生成 生成されたJSコードから予想できること 1. Wasmが持つメモリ領域に対して mallocを し、文字列を保存する
2. 確保したメモリのポインタを ptr0とする 3. Rust関数の本体(wasm.bar)に対し、ポイン タ(ptr0)と変数の長さ(len0)を引数として渡 す。型はどちらもi32
wasm-bindgenで文字列を扱う仕組み src/lib.rs in rustwasm/wasm-bindgen JSコードからの予想通り、 Wasmが持つメモリ領域に対し てメモリ確保をしていることを確 認
wasm-bindgenで文字列を扱う仕組み Rust JavaScript WebAssembly fn bar(a: &str) fn bar(ptr: i32,
len: i32) 変形&生成 f o o bar(“foo”); 1. メモリ確保 2. 文字列保存 3. ポインタと文字列の長さを 使ってWasmの関数を呼ぶ Linear Memory
まとめ • RustとJS間をWebAssemblyを介することによってやりとり可能にする wasm-bindgenのツールについて紹介した • wasm-bindgenがどのように文字列をやりとりしているのかを説明した • 今回は触れなかったが、 web-sysという、DOMをRustから操作できるライブラリも 存在する
FFIの技術を使用することで Rustでフロントエンド開発ができる! ―― Rust is everywhere ありがとうございました @d0iasm 今回使用したコード : https://github.com/d0iasm/wasm-bindgen-sample
• Rust, WebAssembly, and Javascript Make Three: An FFI Story
◦ https://youtu.be/nvLw_XKlZaU • rustwasm/wasm-bindgen/examples/without-a-bundler ◦ https://github.com/rustwasm/wasm-bindgen/tree/master/exampl es/without-a-bundler • Design of wasm-bindgen ◦ https://rustwasm.github.io/docs/wasm-bindgen/contributing/desi gn/index.html References