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

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

Transcript

1. wasm-bindgen 
   ͦͷັྗͱ໘ന͞
    emscripten & WebAssembly night !! #6 @T5uku5hi
2. ຀໺
   ඒ࡙
   @T5uku5hi 
   ࣗݾ঺հ
    w ৽ଔ೥໨
   w ۀ຿Ͱ͸+BWBΛॻ͍͍ͯ·͢
   w 3VTU͕େ޷͖Ͱ͢
   w ޷͖͗ͯ͢ษڧձΛ։͖·ͨ͠
3. 
   ͜ͷηογϣϯͷΰʔϧ
    ௌऺͷօ͞·͕ɺ ☺
   
   XBTNCJOEHFO
   ࢼͯ͠ΈΑ͏ʂ ͱ͍͏ঢ়ଶʹͳΔ͜ͱ
   
   XBTNCJOEHFO
   ͍ͬͯ͢͝ʂ
4. 
   wasm-bindgenͱ͸
   
   ·ͣ͸ͬ͘͟Γߦ·ͱΊ w
   3VTUίϛϡχςΟͷެࣜϓϩμΫτͷҰͭ
   w
   3VTUͱ+4͕8FC"TTFNCMZΛ༻͍ͯγʔϜϨεʹ࢖͑Δ
   w
   ๛෋ͳܕͰָʹ࡞ۀͰ͖Δͷ͕͍͢͝ ৄ͘͠આ໌͍͖ͯ͠·͢ʂ
5. 
   Agenda
    w
   8FC"TTFNCMZͱ͸
   w
   3VTUͷίʔυΛXBTNʹม׵͠ɺ+4Ͱݺͼग़ͯ͠ΈΔ
   w
   ਺ࣈͷ৔߹ͱจࣈྻͷ৔߹
   w
   XBTNΛ࢖͏্Ͱͷ՝୊
   w
   XBTNCJOEHFOͱ͸
6. 
   WebAssemblyͱ͸
    w
   XFCϒϥ΢β্Ͱ࣮ߦͰ͖ΔόΠφϦܗࣜ
   w
   ௿ਫ४ͷݴޠʹͱͬͯޮՌతͳίϯύΠϧର৅
   w
   Ϣʔβʔ͸࡞ΓํΛ஌Δඞཁ͑͞ͳ͍
   w
   8FC"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 ❤ 
    શવ❤ͳؔ܎͡Όͳ͔ͬͨ
     w
    GFUDIߏจ͕௕͍
    w
    "SSBZ#V⒎FSɺ7JFXʹؔ͢Δ࣮૷͕ඞཁ
    w
    จࣈྻͷ৔߹͸σίʔμʔ΋ඞཁ Ϣʔβʔ΁ͷෛ୲͕େ͖͍͜ͱ͕՝୊
27. ͦΕΛղܾ͢Δͷ͕
    wasm-bindgenͰ͢
28. 
    wasm-bindgenͰͰ͖Δ͜ͱ  .wasm .js ❤ w
    લड़ͨ͠ΊΜͲ͍͘͞෦෼Λશ෦ࣗಈͰ࣮૷ͯ͘͠ΕΔ
    w
    +4ͷϞδϡʔϧΛJNQPSU͢Δײ֮ͰXBTNΛ࢖͑Δ
    w
    OQNͰαʔόʔΛ্ཱͪ͛ΒΕΔ
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. 
    ·ͱΊ
     w
    8FC"TTFNCMZ͸+4Λิర͢ΔͨΊʹੜ·Ε͖ͯͨ
    w
    +4Ͱ࢖͏ʹ͸࢖͍উख͕ѱ͍ͱ͍͏՝୊͕͋ͬͨ
    w
    XBTNCJOEHFO͸ͦ͜Λղܾ͢Δ͍͢͝πʔϧ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ