はじめてのWebAssembly

Transcript

1. ͸͡Ίͯͷ8FC"TTFNCMZ ࣲా
   ࿨ف
   
   !TIJCF 
   /JIPOCBTIJKT
   

2. σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ :BIPP
   +"1"/ͷ޿ࠂܥπʔϧͷ
 ϑϩϯτΤϯυΛ୲౰͍ͯ͠·͢ ࣲా ࿨ف @shibe97

3. +BWB4DSJQUେ޷͖ͬࢠͰ͢

4. ͚Ͳ

5. ͪΐͬͱ๞͖ͨ

6. ͱ͍͏ΑΓ

7. 3FBDU
   
   3FEVY
   ๞͖ͨ

8. Կ͔৽͍͠΋ͷʹखΛग़ͯ͠ΈΑ͏ɾɾɾ

9. None

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