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
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
効率的な開発手段として VRTを活用する
ishkawa
0
140
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
AIともっと楽するE2Eテスト
myohei
6
2.6k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
PicoRuby on Rails
makicamel
2
130
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
184
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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ͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ