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.3k
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
脆弱性診断の内製化と外注
tsukushi
8
3.5k
プロダクトセキュリティにおける欠如モデルからの脱却
tsukushi
0
960
スクラム開発経験者のエンジニアが 1年間脆弱性診断してお伝えしたいいくつかのこと
tsukushi
0
790
Attractions and interests of wasm-bindgen
tsukushi
2
720
Rust + WebAssemblyに入門した話
tsukushi
1
2.2k
未経験新卒エンジニアがRustを学び始めてよかったこと
tsukushi
2
9.3k
Other Decks in Programming
See All in Programming
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.2k
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Ruby GitHub Packages
bkuhlmann
0
620
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
430
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Making Projects Easy
brettharned
108
5.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Infographics Made Easy
chrislema
237
18k
The Mythical Team-Month
searls
215
42k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
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ͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ