wasm-bindgen - その魅力と面白さ -

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.conﬁg.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͸ͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

wasm-bindgen - その魅力と面白さ -

wasm-bindgen - その魅力と面白さ -

More Decks by Misaki Makino

Other Decks in Programming

Featured

Transcript