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
4k
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
65
脆弱性診断の内製化と外注
tsukushi
9
4.1k
プロダクトセキュリティにおける欠如モデルからの脱却
tsukushi
0
1.2k
スクラム開発経験者のエンジニアが 1年間脆弱性診断してお伝えしたいいくつかのこと
tsukushi
0
1k
Attractions and interests of wasm-bindgen
tsukushi
2
820
Rust + WebAssemblyに入門した話
tsukushi
1
2.6k
未経験新卒エンジニアがRustを学び始めてよかったこと
tsukushi
2
10k
Other Decks in Programming
See All in Programming
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
390
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
What's new in Adaptive Android development
fornewid
0
130
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
Flutterと Vibe Coding で個人開発!
hyshu
1
220
Vibe coding コードレビュー
kinopeee
0
400
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
43k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
KATA
mclloyd
31
14k
Optimizing for Happiness
mojombo
379
70k
Faster Mobile Websites
deanohume
308
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Music & Morning Musume
bryan
46
6.7k
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ͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ