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

はじめてのWebAssembly

 はじめてのWebAssembly

Nihonbashi.js #1の資料です。

Kazuki Shibata

May 18, 2017
Tweet

More Decks by Kazuki Shibata

Other Decks in Technology

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