Tweet
Tweet

Slide 1

Slide 1 text

wasm-bindgen ͦͷັྗͱ໘ന͞ emscripten & WebAssembly night !! #6 @T5uku5hi

Slide 2

Slide 2 text

຀໺ඒ࡙@T5uku5hi ࣗݾ঺հ w ৽ଔ೥໨ w ۀ຿Ͱ͸+BWBΛॻ͍͍ͯ·͢ w 3VTU͕େ޷͖Ͱ͢ w ޷͖͗ͯ͢ษڧձΛ։͖·ͨ͠

Slide 3

Slide 3 text

͜ͷηογϣϯͷΰʔϧ ௌऺͷօ͞·͕ɺ ☺XBTNCJOEHFOࢼͯ͠ΈΑ͏ʂ ͱ͍͏ঢ়ଶʹͳΔ͜ͱ XBTNCJOEHFO͍ͬͯ͢͝ʂ

Slide 4

Slide 4 text

wasm-bindgenͱ͸ ·ͣ͸ͬ͘͟Γߦ·ͱΊ w3VTUίϛϡχςΟͷެࣜϓϩμΫτͷҰͭ w3VTUͱ+4͕8FC"TTFNCMZΛ༻͍ͯγʔϜϨεʹ࢖͑Δ w๛෋ͳܕͰָʹ࡞ۀͰ͖Δͷ͕͍͢͝ ৄ͘͠આ໌͍͖ͯ͠·͢ʂ

Slide 5

Slide 5 text

Agenda w8FC"TTFNCMZͱ͸ w3VTUͷίʔυΛXBTNʹม׵͠ɺ+4Ͱݺͼग़ͯ͠ΈΔ w਺ࣈͷ৔߹ͱจࣈྻͷ৔߹ wXBTNΛ࢖͏্Ͱͷ՝୊ wXBTNCJOEHFOͱ͸

Slide 6

Slide 6 text

WebAssemblyͱ͸ wXFCϒϥ΢β্Ͱ࣮ߦͰ͖ΔόΠφϦܗࣜ w௿ਫ४ͷݴޠʹͱͬͯޮՌతͳίϯύΠϧର৅ wϢʔβʔ͸࡞ΓํΛ஌Δඞཁ͑͞ͳ͍ w8FC"TTFNCMZ͸+4ͷஔ͖׵͑Λҙਤ͍ͯ͠ͳ͍

Slide 7

Slide 7 text

+4ͷۤखͳ͜ͱ Λิర ੈք؍Λਤʹͯ͠Έͨ .rs .cpp .c .go .kt .wasm .wat ςΩετԽͯ͠ ಡΉ͜ͱ΋Մೳ ৭ʑͳݴޠͷ ίϯύΠϧର৅ ❤ .js

Slide 8

Slide 8 text

ͦΕͰ͸ૣ଎ .wasm .rs .js ❤ 3VTUͷίʔυΛ8FC"TTFNCMZʹม׵ͯ͠ɺ +4͔Βݺͼग़ͯ͠Έ·͠ΐ͏ʂ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

index.html +4͔Βݺͼग़͢

Slide 12

Slide 12 text

ϒϥ΢βʹදࣔ͞ΕΔ

Slide 13

Slide 13 text

จࣈྻͷදࣔ src/lib.rs

Slide 14

Slide 14 text

จࣈྻͷදࣔ index.html

Slide 15

Slide 15 text

ϒϥ΢βʹදࣔ͞Εʜ

Slide 16

Slide 16 text

ϒϥ΢βʹදࣔ͞Εʜ ͳ͍

Slide 17

Slide 17 text

Ṗͷ਺ྻ ͱ͸

Slide 18

Slide 18 text

.wasmΛ.watʹม׵ $ wasm2wat append_str.wasm -o append_str.wat // wabtͱ͍͏ม׵πʔϧΛ࢖͍ͬͯ·͢ command line

Slide 19

Slide 19 text

ղಡͯ͠Έ·ͨ͠ append_str.wat

Slide 20

Slide 20 text

ղಡͯ͠Έ·ͨ͠ append_str.wat ͸จࣈྻ͕֨ೲ͞Ε͍ͯΔ ઢܗϝϞϦͷΞυϨε

Slide 21

Slide 21 text

WebAssemblyͷݴޠ࢓༷ wίʔυͷ୯Ґ͸Ϟδϡʔϧ.PEVMF w.PEVMF͸ͭͷେ͖ͳ4ࣜͰදݱ͞ΕΔ wύϥϝʔλʹ͸ݱࡏͭͷܕ͕༗ޮ J J G G wෳࡶͳσʔλܕΛѻ͏ͨΊʹઢܗϝϞϦΛఏڙ͍ͯ͠Δ

Slide 22

Slide 22 text

ઢܗϝϞϦ͸ ArrayBuffer ϝϞϦ൪஍ͷͱ͜Ζ͔ΒԿ͔ೖΕ·ͨ͠ɻ จࣈྻ͕ԿͰ͋Δ͔͸ղऍ͠ͳ͍ɻೖΕ͓͚ͯͩ͘ɻ 8FC"TTFNCMZ ͷੈք +4ͷੈք όΠτͷ"SSBZ#V⒎FSͰ͢ɻ 7JFXʹ͸6JOU"SSBZΛར༻͠·͢ɻ VUGͰσίʔυ͠·͢ɻ Ͳ͜·Ͱจࣈྻͳͷ͔ఆΊɺจࣈྻͰ͋Δ͜ͱΛղऍ͢Δඞཁ͕͋Δʂ

Slide 23

Slide 23 text

จࣈྻѻ͏ͷ ΊΜͲ͍͘͞

Slide 24

Slide 24 text

΋ͬͱݴ͏ͱ ৭ʑΊΜͲ͍͘͞

Slide 25

Slide 25 text

index.html ݺͼग़͢ͷ΋େมͰͨ͠ΑͶ

Slide 26

Slide 26 text

.wasm .js ❤ શવ❤ͳؔ܎͡Όͳ͔ͬͨ wGFUDIߏจ͕௕͍ w"SSBZ#V⒎FSɺ7JFXʹؔ͢Δ࣮૷͕ඞཁ wจࣈྻͷ৔߹͸σίʔμʔ΋ඞཁ Ϣʔβʔ΁ͷෛ୲͕େ͖͍͜ͱ͕՝୊

Slide 27

Slide 27 text

ͦΕΛղܾ͢Δͷ͕ wasm-bindgenͰ͢

Slide 28

Slide 28 text

wasm-bindgenͰͰ͖Δ͜ͱ .wasm .js ❤ wલड़ͨ͠ΊΜͲ͍͘͞෦෼Λશ෦ࣗಈͰ࣮૷ͯ͘͠ΕΔ w+4ͷϞδϡʔϧΛJNQPSU͢Δײ֮ͰXBTNΛ࢖͑Δ wOQNͰαʔόʔΛ্ཱͪ͛ΒΕΔ

Slide 29

Slide 29 text

wasm-bindgenΛ࢖͏ [dependencies] wasm-bindgen = “0.2” Cargo.toml src/lib.rs

Slide 30

Slide 30 text

wasm-bindgenΛ࢖͏ $ wasm-pack build // wasm-pack: ͜ͷίϚϯυͰࣗಈ࡞੒͞ΕΔ command line pkg/js_hello_world.js .d.ts bg.d.ts .wasm .js .json QLH഑Լʹࣗಈੜ੒

Slide 31

Slide 31 text

wasm-bindgenΛ࢖͏ $ npm init $ npm install -D webpack webpack-cli webpack-dev-server command line webpack.config.js

Slide 32

Slide 32 text

index.html wasm-bindgenΛ࢖͏ index.js

Slide 33

Slide 33 text

wasm-bindgenΛ࢖͏ domUtils.js src/lib.rs $ wasm-pack build $ npx webpack-dev-server command line

Slide 34

Slide 34 text

ϒϥ΢βʹදࣔ͞Ε·ͨ͠

Slide 35

Slide 35 text

͓·͚ lib.rs +4"1*Λ3VTUͰॻ͚·͢

Slide 36

Slide 36 text

͓·͚ ϚϦΦͰͨ͠ʂ

Slide 37

Slide 37 text

·ͱΊ w8FC"TTFNCMZ͸+4Λิర͢ΔͨΊʹੜ·Ε͖ͯͨ w+4Ͱ࢖͏ʹ͸࢖͍উख͕ѱ͍ͱ͍͏՝୊͕͋ͬͨ wXBTNCJOEHFO͸ͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ