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

はじめてのWebAssembly

 はじめてのWebAssembly

Nihonbashi.js #1の資料です。

B22ff27b7826e3299c8dba2e99f2aef8?s=128

Kazuki Shibata

May 18, 2017
Tweet

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ʢ"CTUSVDU4ZOUBY 5SFFʣʹม׵  "45ΛόΠτίʔυʹม׵͠ɺԾ૝Ϛγϯ্Ͱಈ࡞ͤ͞Δ  ܕ৘ใ͕ݻ·͖ͬͯͨΒɺ෦෼తʹػցޠʹม׵
 ʢ+VTUJO5JNFίϯύΠϧʣ

  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 WBMVFWBMVFc EPVCMF WBMVF WBMVF qPBU WBMVFG WBMVF

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

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

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

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

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

  24. ʢXBTNʣ

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

  26. Α͠ɺ3VTUͩʂ

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

  28. 3VTUͷओͳ༻్ 4ZTUFN1SPHSBNNJOH /FUXPSL1SPHSBNNJOH ,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. KTYSTSFBDUST

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

  40. 5PEP.7$ IUUQSVTUXFCQMBUGPSNHJUIVCJPSVTUUPEPNWD

  41. ·ͱΊ ͍ͭʹ+BWB4DSJQUҎ֎ͷݴޠ΋ϒϥ΢βͰಈ͔ͤΔ࣌୅ʹ 3VTU͸·ͩ8FCΞϓϦ੍࡞ʹ͸ऑ͍͕ɺࠓޙ੒௕͍ͯͬͨ͠৔߹ʹ
 ϑϩϯτΤϯυ৘੎͕มΘΔՄೳੑ͕͋Γͦ͏

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