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
wasm-bindgen - その魅力と面白さ -
Search
Misaki Makino
December 14, 2018
Programming
1
3.9k
wasm-bindgen - その魅力と面白さ -
2018/12/14 Emscripten & WebAssembly night !! #6
で発表した内容です。
Misaki Makino
December 14, 2018
Tweet
Share
More Decks by Misaki Makino
See All by Misaki Makino
社会人がProSecで学んでみて
tsukushi
0
64
脆弱性診断の内製化と外注
tsukushi
9
4.1k
プロダクトセキュリティにおける欠如モデルからの脱却
tsukushi
0
1.2k
スクラム開発経験者のエンジニアが 1年間脆弱性診断してお伝えしたいいくつかのこと
tsukushi
0
1k
Attractions and interests of wasm-bindgen
tsukushi
2
810
Rust + WebAssemblyに入門した話
tsukushi
1
2.6k
未経験新卒エンジニアがRustを学び始めてよかったこと
tsukushi
2
10k
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
PicoRuby on Rails
makicamel
2
130
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
PipeCDのプラグイン化で目指すところ
warashi
1
270
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Statistics for Hackers
jakevdp
799
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Producing Creativity
orderedlist
PRO
346
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Docker and Python
trallard
44
3.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Transcript
wasm-bindgen ͦͷັྗͱ໘ന͞ emscripten & WebAssembly night !! #6 @T5uku5hi
ඒ࡙@T5uku5hi ࣗݾհ w ৽ଔ w ۀͰ+BWBΛॻ͍͍ͯ·͢ w 3VTU͕େ͖Ͱ͢ w ͖͗ͯ͢ษڧձΛ։͖·ͨ͠
͜ͷηογϣϯͷΰʔϧ ௌऺͷօ͞·͕ɺ ☺XBTNCJOEHFOࢼͯ͠ΈΑ͏ʂ ͱ͍͏ঢ়ଶʹͳΔ͜ͱ XBTNCJOEHFO͍ͬͯ͢͝ʂ
wasm-bindgenͱ ·ͣͬ͘͟Γߦ·ͱΊ w3VTUίϛϡχςΟͷެࣜϓϩμΫτͷҰͭ w3VTUͱ+4͕8FC"TTFNCMZΛ༻͍ͯγʔϜϨεʹ͑Δ w๛ͳܕͰָʹ࡞ۀͰ͖Δͷ͕͍͢͝ ৄ͘͠આ໌͍͖ͯ͠·͢ʂ
Agenda w8FC"TTFNCMZͱ w3VTUͷίʔυΛXBTNʹม͠ɺ+4Ͱݺͼग़ͯ͠ΈΔ wࣈͷ߹ͱจࣈྻͷ߹ wXBTNΛ͏্Ͱͷ՝ wXBTNCJOEHFOͱ
WebAssemblyͱ wXFCϒϥβ্Ͱ࣮ߦͰ͖ΔόΠφϦܗࣜ wਫ४ͷݴޠʹͱͬͯޮՌతͳίϯύΠϧର wϢʔβʔ࡞ΓํΛΔඞཁ͑͞ͳ͍ w8FC"TTFNCMZ+4ͷஔ͖͑Λҙਤ͍ͯ͠ͳ͍
+4ͷۤखͳ͜ͱ Λิర ੈք؍Λਤʹͯ͠Έͨ .rs .cpp .c .go .kt .wasm .wat
ςΩετԽͯ͠ ಡΉ͜ͱՄೳ ৭ʑͳݴޠͷ ίϯύΠϧର ❤ .js
ͦΕͰૣ .wasm .rs .js ❤ 3VTUͷίʔυΛ8FC"TTFNCMZʹมͯ͠ɺ +4͔Βݺͼग़ͯ͠Έ·͠ΐ͏ʂ
3VTUͷϓϩάϥϜΛॻ͘ $ cargo new --lib add_one $ cd add_one command
line [lib] crate-type = ["cdylib"] Cargo.toml #[no_mangle] pub extern fn add_one(x: u32) -> u32 { x + 1 } src/lib.rs
XBTNʹม͢Δ $ cargo build --target wasm32-unknown-unknown --release $ wasm-gc target/wasm32-unknown-unknown/release/add_one.wasm
-o add_one.gc.wasm // wasm-gc: ෆཁͳόΠφϦΛআͯ͘͠ΕΔπʔϧ command line
index.html +4͔Βݺͼग़͢
ϒϥβʹදࣔ͞ΕΔ
จࣈྻͷදࣔ src/lib.rs
จࣈྻͷදࣔ index.html
ϒϥβʹදࣔ͞Εʜ
ϒϥβʹදࣔ͞Εʜ ͳ͍
Ṗͷྻ ͱ
.wasmΛ.watʹม $ wasm2wat append_str.wasm -o append_str.wat // wabtͱ͍͏มπʔϧΛ͍ͬͯ·͢ command line
ղಡͯ͠Έ·ͨ͠ append_str.wat
ղಡͯ͠Έ·ͨ͠ append_str.wat จࣈྻ͕֨ೲ͞Ε͍ͯΔ ઢܗϝϞϦͷΞυϨε
WebAssemblyͷݴޠ༷ wίʔυͷ୯ҐϞδϡʔϧ.PEVMF w.PEVMFͭͷେ͖ͳ4ࣜͰදݱ͞ΕΔ wύϥϝʔλʹݱࡏͭͷܕ͕༗ޮ J J G G wෳࡶͳσʔλܕΛѻ͏ͨΊʹઢܗϝϞϦΛఏڙ͍ͯ͠Δ
ઢܗϝϞϦ ArrayBuffer ϝϞϦ൪ͷͱ͜Ζ͔ΒԿ͔ೖΕ·ͨ͠ɻ จࣈྻ͕ԿͰ͋Δ͔ղऍ͠ͳ͍ɻೖΕ͓͚ͯͩ͘ɻ 8FC"TTFNCMZ ͷੈք +4ͷੈք όΠτͷ"SSBZ#V⒎FSͰ͢ɻ 7JFXʹ6JOU"SSBZΛར༻͠·͢ɻ
VUGͰσίʔυ͠·͢ɻ Ͳ͜·Ͱจࣈྻͳͷ͔ఆΊɺจࣈྻͰ͋Δ͜ͱΛղऍ͢Δඞཁ͕͋Δʂ
จࣈྻѻ͏ͷ ΊΜͲ͍͘͞
ͬͱݴ͏ͱ ৭ʑΊΜͲ͍͘͞
index.html ݺͼग़͢ͷେมͰͨ͠ΑͶ
.wasm .js ❤ શવ❤ͳؔ͡Όͳ͔ͬͨ wGFUDIߏจ͕͍ w"SSBZ#V⒎FSɺ7JFXʹؔ͢Δ࣮͕ඞཁ wจࣈྻͷ߹σίʔμʔඞཁ Ϣʔβʔͷෛ୲͕େ͖͍͜ͱ͕՝
ͦΕΛղܾ͢Δͷ͕ wasm-bindgenͰ͢
wasm-bindgenͰͰ͖Δ͜ͱ .wasm .js ❤ wલड़ͨ͠ΊΜͲ͍͘͞෦Λશ෦ࣗಈͰ࣮ͯ͘͠ΕΔ w+4ͷϞδϡʔϧΛJNQPSU͢Δײ֮ͰXBTNΛ͑Δ wOQNͰαʔόʔΛ্ཱͪ͛ΒΕΔ
wasm-bindgenΛ͏ [dependencies] wasm-bindgen = “0.2” Cargo.toml src/lib.rs
wasm-bindgenΛ͏ $ wasm-pack build // wasm-pack: ͜ͷίϚϯυͰࣗಈ࡞͞ΕΔ command line
pkg/js_hello_world.js .d.ts bg.d.ts .wasm .js .json QLHԼʹࣗಈੜ
wasm-bindgenΛ͏ $ npm init $ npm install -D webpack
webpack-cli webpack-dev-server command line webpack.config.js
index.html wasm-bindgenΛ͏ index.js
wasm-bindgenΛ͏ domUtils.js src/lib.rs $ wasm-pack build $ npx webpack-dev-server
command line
ϒϥβʹදࣔ͞Ε·ͨ͠
͓·͚ lib.rs +4"1*Λ3VTUͰॻ͚·͢
͓·͚ ϚϦΦͰͨ͠ʂ
·ͱΊ w8FC"TTFNCMZ+4Λิర͢ΔͨΊʹੜ·Ε͖ͯͨ w+4Ͱ͏ʹ͍উख͕ѱ͍ͱ͍͏՝͕͋ͬͨ wXBTNCJOEHFOͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ