はじめてのWebAssembly

Nihonbashi.js #1の資料です。

Transcript

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

   View Slide

2. σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ
   :BIPP+"1"/ͷ޿ࠂܥπʔϧͷ

   ϑϩϯτΤϯυΛ୲౰͍ͯ͠·͢
   ࣲా ࿨ف @shibe97
   

   View Slide

3. +BWB4DSJQUେ޷͖ͬࢠͰ͢
   

   View Slide

4. ͚Ͳ
   

   View Slide

5. ͪΐͬͱ๞͖ͨ
   

   View Slide

6. ͱ͍͏ΑΓ
   

   View Slide

7. 3FBDU3FEVY๞͖ͨ
   

   View Slide

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

   View Slide

9. View Slide

10. +BWB4DSJQUͷ໰୊఺
    

    View Slide

11. ͍ͩͿ଎͘ͳ͚ͬͨͲɺॏ͍ॲཧʹ͸ऑ͍ʢϒϥ΢βݻ·Δʣ
    ܕ͕໌ࣔతͰͳ͍
    ίϯύΠϧܕͰ͸ͳ͘ɺΠϯλϓϦλܕݴޠ
    'JSFGPYʢ4QJEFS.POLFZʣ
    &EHFʢ$IBLSBʣ
    $ISPNFʢ7ʣ
    

    View Slide

12. ͦ΋ͦ΋͜Μͳෳࡶͳ΋ͷΛ࡞ΔͨΊʹ஀ੜͨ͠ݴޠ͡Όͳ͍
    "KBYͷීٴͱڞʹαʔόαΠυͷॲཧ͕ΫϥΠΞϯταΠυʹ

    Ҡ͖ͬͯͨ͋ͨΓ͔Βແཧ͕ग़࢝Ίͨ
    

    View Slide

13. +BWB4DSJQU࣮ߦ࣌ͷྲྀΕ
    ϒϥ΢β͕+BWB4DSJQUͷߏจղੳΛߦ͍ɺ"45ʢ"CTUSVDU4ZOUBY
    5SFFʣʹม׵
    "45ΛόΠτίʔυʹม׵͠ɺԾ૝Ϛγϯ্Ͱಈ࡞ͤ͞Δ
    ܕ৘ใ͕ݻ·͖ͬͯͨΒɺ෦෼తʹػցޠʹม׵

    ʢ+VTUJO5JNFίϯύΠϧʣ
    

    View Slide

14. ࣄલʹܕఆ͕ٛͰ͖Ε͹ʜ
    

    View Slide

15. asm.js
    

    View Slide

16. BTNKTͬͯͲΜͳ΋ͷ
    .P[JMMB͕ఏএͨ͠+BWB4DSJQUͷߴ଎Խٕज़
    ͋͘·Ͱ+BWB4DSJQUϑΝΠϧ
    ͋Δϧʔϧʹै͏ͱܕ৘ใΛ༩͑Δ͜ͱ͕Ͱ͖Δ

    ʢϒϥ΢βଆͷαϙʔτ͕΋ͪΖΜඞཁʣ
    

    View Slide

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
    }
    }
    

    View Slide

18. BTNKTʹΑΔҾ਺ͷܕఆٛ
    JOU WBMVFWBMVFc
    EPVCMF WBMVFWBMVF
    qPBU WBMVFG WBMVF
    
    

    View Slide

19. BTNKTͷͭΒΈ
    ਺஋ԋࢉ͔͠Ͱ͖ͳ͍
    จࣈྻ΍ΦϒδΣΫτΛແཧ΍Γදݱ͠Α͏ͱ͢ΔͱɺόΠφϦ͕
    བྷΜͰ͖ͯπϥ͍
    ਓ͕ॻ͘ݴޠ͡Όͳ͍
    

    View Slide

20. ଞͷݴޠ͔Βม׵͢Ε͹ʜ
    

    View Slide

21. --7.ίϯύΠϧͷ࢓૊Έ
    $
    $
    0CKFDUJWF$
    (P
    3VTU
    தؒݴޠ +BWB4DSJQU
    ͦͷଞݴޠ
    

    View Slide

22. ˞+BWB4DSJQU༻ͷ--7.ϕʔείϯύΠϥ
    

    View Slide

23. ม׵͸Ͱ͖ͨɺ͔͠͠ʜ
    ϑΝΠϧ༰ྔ͕େ͖͍
    )FMMP8PSME͚ͩͰ,
    BTNKT͸.P[JMMB͕ߟ͑ͨ΋ͷ͕ͩɺશϒϥ΢βϕϯμʔڠྗͯ͠
    ΋ͬͱ͍ܰܗࣜ࡞ͬͪΌ͏ʁ
    

    View Slide

24. ʢXBTNʣ
    

    View Slide

25. ݱঢ়ɺXBTNʹม׵Ͱ͖Δݴޠ
    $
    $
    3VTU
    

    View Slide

26. Α͠ɺ3VTUͩʂ
    

    View Slide

27. ͬ͘͟Γ3VTUͬͯʁ
    ೥όʔδϣϯϦϦʔε
    .P[JMMB͕։ൃ
    'JSFGPY͔Β3VTUͰॻ͍ͨίʔυ͕ಈ͍͍ͯΔ
    ҆શੑɺฒྻੑʹ༏Ε͍ͯΔ
    

    View Slide

28. 3VTUͷओͳ༻్
    4ZTUFN1SPHSBNNJOH
    /FUXPSL1SPHSBNNJOH
    ,FSOFM
    8FC"TTFNCMZ
    

    View Slide

29. +BWB4DSJQU
    1)1 3VCZ
    +BWB $
    3VTU
    ʢݸਓͷݟղͰ͢ʣ
    

    View Slide

30. FNTDSJQUFO +BWB4DSJQU"1*
    8FC"TTFNCMZͰͷར༻ྫ
    index.rs index.wasm TypedArray
    

    View Slide

31. ࢼ͠ʹ3VTUͰ%0.Λు͖ग़ͤΔ͔

    ΍ͬͯΈͨ
    

    View Slide

32. XFCQMBUGPSNͱ͍͏DSBUFΛ࢖͏
    /PEFͰ͍͏QBDLBHFతͳ΋ͷ
    

    View Slide

33. )5.-ͷத਎
    <br/>var Module = {}<br/>fetch('index.wasm')<br/>.then((response) => response.arrayBuffer())<br/>.then((buffer) => {<br/>Module.wasmBinary = buffer;<br/>var script = document.createElement('script');<br/>script.src = 'index.js';<br/>document.body.appendChild(script);<br/>})<br/>
    

    View Slide

34. σϞ
    

    View Slide

35. ͳΜ͔3FBDUDSFBUF&MFNFOU
    

    ͬΆ͕͋͞Δ
    

    View Slide

36. +49తͳ΋ͷ͕͋Ε͹
    ͍͍ײ͡ͳΔͷͰ͸ʁ
    

    View Slide

37. ͱࢥͬͨΒ͋ͬͨ
    

    View Slide

38. KTYSTSFBDUST
    

    View Slide

39. ͚Ͳ·ͩ։ൃͷॳظஈ֊ͬΆ͍Ͱ͢
    

    View Slide

40. 5PEP.7$
    IUUQSVTUXFCQMBUGPSNHJUIVCJPSVTUUPEPNWD
    

    View Slide

41. ·ͱΊ
    ͍ͭʹ+BWB4DSJQUҎ֎ͷݴޠ΋ϒϥ΢βͰಈ͔ͤΔ࣌୅ʹ
    3VTU͸·ͩ8FCΞϓϦ੍࡞ʹ͸ऑ͍͕ɺࠓޙ੒௕͍ͯͬͨ͠৔߹ʹ

    ϑϩϯτΤϯυ৘੎͕มΘΔՄೳੑ͕͋Γͦ͏
    

    View Slide

42. 5IBOLT
    
    5XJUUFS(JU)VC!TIJCF
    

    View Slide