はじめてのWebAssembly

Nihonbashi.js #1の資料です。

Transcript

1. ͸͡Ίͯͷ8FC"TTFNCMZ ࣲా
   ࿨ف
   
   !TIJCF 
   /JIPOCBTIJKT
   
2. σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ :BIPP
   +"1"/ͷ޿ࠂܥπʔϧͷ
 ϑϩϯτΤϯυΛ୲౰͍ͯ͠·͢ ࣲా ࿨ف @shibe97
3. +BWB4DSJQUେ޷͖ͬࢠͰ͢
4. ͚Ͳ
5. ͪΐͬͱ๞͖ͨ
6. ͱ͍͏ΑΓ
7. 3FBDU
   
   3FEVY
   ๞͖ͨ
8. Կ͔৽͍͠΋ͷʹखΛग़ͯ͠ΈΑ͏ɾɾɾ
10. +BWB4DSJQUͷ໰୊఺
11. ͍ͩͿ଎͘ͳ͚ͬͨͲɺॏ͍ॲཧʹ͸ऑ͍ʢϒϥ΢βݻ·Δʣ
    ܕ͕໌ࣔతͰͳ͍
    ίϯύΠϧܕͰ͸ͳ͘ɺΠϯλϓϦλܕݴޠ
    'JSFGPYʢ4QJEFS.POLFZʣ
    &EHFʢ$IBLSBʣ
    $ISPNFʢ7ʣ
12. ͦ΋ͦ΋͜Μͳෳࡶͳ΋ͷΛ࡞ΔͨΊʹ஀ੜͨ͠ݴޠ͡Όͳ͍
    "KBYͷීٴͱڞʹαʔόαΠυͷॲཧ͕ΫϥΠΞϯταΠυʹ
 Ҡ͖ͬͯͨ͋ͨΓ͔Βແཧ͕ग़࢝Ίͨ
13. +BWB4DSJQU࣮ߦ࣌ͷྲྀΕ  ϒϥ΢β͕+BWB4DSJQUͷߏจղੳΛߦ͍ɺ"45ʢ"CTUSVDU
    4ZOUBY
    5SFFʣʹม׵
     "45ΛόΠτίʔυʹม׵͠ɺԾ૝Ϛγϯ্Ͱಈ࡞ͤ͞Δ
     ܕ৘ใ͕ݻ·͖ͬͯͨΒɺ෦෼తʹػցޠʹม׵
 ʢ+VTU
    JO
    5JNFίϯύΠϧʣ
14. ࣄલʹܕఆ͕ٛͰ͖Ε͹ʜ
15. asm.js
16. BTNKTͬͯͲΜͳ΋ͷ .P[JMMB͕ఏএͨ͠+BWB4DSJQUͷߴ଎Խٕज़
    ͋͘·Ͱ+BWB4DSJQUϑΝΠϧ
    ͋Δϧʔϧʹै͏ͱܕ৘ใΛ༩͑Δ͜ͱ͕Ͱ͖Δ
 ʢϒϥ΢βଆͷαϙʔτ͕΋ͪΖΜඞཁʣ
17. function AddFunctions(){ "use asm"; function add1(value){ value = value | 0; // Ҿ਺͸ int ͩͱ໌ࣔ var result = 0; // int ͱͯ͠એݴ
 result = (value + 1) | 0; // int ΁Ωϟετ return result; } return { add1: add1 } }
18. BTNKTʹΑΔҾ਺ͷܕఆٛ JOU WBMVF
    
    WBMVF
    c
     EPVCMF WBMVF
    
    WBMVF qPBU WBMVF
    
    G WBMVF
19. BTNKTͷͭΒΈ ਺஋ԋࢉ͔͠Ͱ͖ͳ͍
    จࣈྻ΍ΦϒδΣΫτΛແཧ΍Γදݱ͠Α͏ͱ͢ΔͱɺόΠφϦ͕ བྷΜͰ͖ͯπϥ͍
    ਓ͕ॻ͘ݴޠ͡Όͳ͍
20. ଞͷݴޠ͔Βม׵͢Ε͹ʜ
21. --7.ίϯύΠϧͷ࢓૊Έ $ $ 0CKFDUJWF$ (P 3VTU தؒݴޠ +BWB4DSJQU ͦͷଞݴޠ
22. ˞+BWB4DSJQU༻ͷ--7.ϕʔείϯύΠϥ
23. ม׵͸Ͱ͖ͨɺ͔͠͠ʜ ϑΝΠϧ༰ྔ͕େ͖͍
    )FMMP
    8PSME͚ͩͰ,
    BTNKT͸.P[JMMB͕ߟ͑ͨ΋ͷ͕ͩɺશϒϥ΢βϕϯμʔڠྗͯ͠ ΋ͬͱ͍ܰܗࣜ࡞ͬͪΌ͏ʁ
24. ʢXBTNʣ
25. ݱঢ়ɺXBTNʹม׵Ͱ͖Δݴޠ $
    $
    3VTU
26. Α͠ɺ3VTUͩʂ
27. ͬ͘͟Γ3VTUͬͯʁ ೥όʔδϣϯϦϦʔε
    .P[JMMB͕։ൃ
    'JSFGPY͔Β3VTUͰॻ͍ͨίʔυ͕ಈ͍͍ͯΔ
    ҆શੑɺฒྻੑʹ༏Ε͍ͯΔ
28. 3VTUͷओͳ༻్ 4ZTUFN
    1SPHSBNNJOH
    /FUXPSL
    1SPHSBNNJOH
    ,FSOFM
    8FC
    "TTFNCMZ
29. +BWB4DSJQU 1)1 3VCZ +BWB $ 3VTU ʢݸਓͷݟղͰ͢ʣ
30. FNTDSJQUFO +BWB4DSJQU
    "1* 8FC"TTFNCMZͰͷར༻ྫ index.rs index.wasm TypedArray
31. ࢼ͠ʹ3VTUͰ%0.Λు͖ग़ͤΔ͔
 ΍ͬͯΈͨ
32. XFCQMBUGPSNͱ͍͏DSBUFΛ࢖͏ /PEFͰ͍͏QBDLBHFతͳ΋ͷ
33. )5.-ͷத਎ <script> var Module = {} fetch('index.wasm') .then((response) => response.arrayBuffer()) .then((buffer) => { Module.wasmBinary = buffer; var script = document.createElement('script'); script.src = 'index.js'; document.body.appendChild(script); }) </script>
34. σϞ
35. ͳΜ͔3FBDUDSFBUF&MFNFOU 
 ͬΆ͕͋͞Δ
36. +49తͳ΋ͷ͕͋Ε͹
    ͍͍ײ͡ͳΔͷͰ͸ʁ
37. ͱࢥͬͨΒ͋ͬͨ
38. KTYST
    
    SFBDUST
39. ͚Ͳ·ͩ։ൃͷॳظஈ֊ͬΆ͍Ͱ͢
40. 5PEP.7$ IUUQSVTUXFCQMBUGPSNHJUIVCJPSVTUUPEPNWD
41. ·ͱΊ ͍ͭʹ+BWB4DSJQUҎ֎ͷݴޠ΋ϒϥ΢βͰಈ͔ͤΔ࣌୅ʹ
    3VTU͸·ͩ8FCΞϓϦ੍࡞ʹ͸ऑ͍͕ɺࠓޙ੒௕͍ͯͬͨ͠৔߹ʹ
 ϑϩϯτΤϯυ৘੎͕มΘΔՄೳੑ͕͋Γͦ͏
42. 5IBOLT
     5XJUUFS
    
    (JU)VC
    
    !TIJCF