Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E2b3ac88b4244e3addb6b4ba9c2dfcca?s=47 Misaki Makino
December 14, 2018

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

2018/12/14 Emscripten & WebAssembly night !! #6
で発表した内容です。

E2b3ac88b4244e3addb6b4ba9c2dfcca?s=128

Misaki Makino

December 14, 2018
Tweet

Transcript

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

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

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

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

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

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

  7. +4ͷۤखͳ͜ͱ Λิర ੈք؍Λਤʹͯ͠Έͨ .rs .cpp .c .go .kt .wasm .wat

    ςΩετԽͯ͠ ಡΉ͜ͱ΋Մೳ ৭ʑͳݴޠͷ ίϯύΠϧର৅ ❤ .js
  8. ͦΕͰ͸ૣ଎ .wasm .rs .js ❤ 3VTUͷίʔυΛ8FC"TTFNCMZʹม׵ͯ͠ɺ +4͔Βݺͼग़ͯ͠Έ·͠ΐ͏ʂ

  9. 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
  10. 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
  11. index.html +4͔Βݺͼग़͢

  12. ϒϥ΢βʹදࣔ͞ΕΔ

  13. จࣈྻͷදࣔ src/lib.rs

  14. จࣈྻͷදࣔ index.html

  15. ϒϥ΢βʹදࣔ͞Εʜ

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

  17. Ṗͷ਺ྻ ͱ͸ 

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

  19. ղಡͯ͠Έ·ͨ͠ append_str.wat

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

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

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

    VUGͰσίʔυ͠·͢ɻ Ͳ͜·Ͱจࣈྻͳͷ͔ఆΊɺจࣈྻͰ͋Δ͜ͱΛղऍ͢Δඞཁ͕͋Δʂ
  23. จࣈྻѻ͏ͷ ΊΜͲ͍͘͞

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

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

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

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

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

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

  30. wasm-bindgenΛ࢖͏  $ wasm-pack build // wasm-pack: ͜ͷίϚϯυͰࣗಈ࡞੒͞ΕΔ command line

    pkg/js_hello_world.js .d.ts bg.d.ts .wasm .js .json QLH഑Լʹࣗಈੜ੒
  31. wasm-bindgenΛ࢖͏  $ npm init $ npm install -D webpack

    webpack-cli webpack-dev-server command line webpack.config.js
  32. index.html wasm-bindgenΛ࢖͏  index.js

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

    command line
  34. ϒϥ΢βʹදࣔ͞Ε·ͨ͠

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

  36. ͓·͚ ϚϦΦͰͨ͠ʂ

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