WebAssembly 入門

Transcript

1. Pine Mizune Sep 2, 2016 / Gotanda.js #5 WebAssembly 入門

2. ࣗݾ঺հ o (JU)VC
   !QJOF o 5XJUUFS
   !QJOF o ޷͖ͳݴޠ +BWB4DSJQU o

   (PUBOEBKT 0SHBOJ[FS o .PCJMF
   'BDUPSZ
   *OD

3.  8FC"TTFNCMZ ͱ͸ – ֓ཁ – ࠷ۙͷಈ޲  ؆୯ͳαϯϓϧίʔυ –

   ୯७ͳԋࢉ – +BWB4DSJQU
   ͱͷ࿈ܞ ໨࣍

4. 8FC"TTFNCMZ ͱ͸Կ͔  8FC"TTFNCMZ ͱ͸  8FC"TTFNCMZ ͷ࠷ۙͷಈ޲

5. ϒϥ΢β޲͚ ࣮ߦՄೳόΠφϦϑΥʔϚοτ • +BWB4DSJQU
   ͷ୅ସͰ͸ͳ͍ • ωΠςΟϒίʔυ $$
   ͷ࣮ߦ଎౓ͷ 
    •

   $ISPNF
   
   'JSFGPY
   /JHIUMZ
   Ͱࢼݧతʹ࣮૷ࡁΈ 8FC"TTFNCMZͱ͸ WebAssembly LLVM compiler C/C++

6. n $ISPNFɺ8FC,JUɺ'JSFGPYɺ.JDSPTPGU
   &EHFɺ --7.ɺ6OJUZΒ͕αϙʔτΛද໌  IUUQXXXQVCMJDLFZKQCMPHXFCBTTFNCMZIUNM n 7ɺ'JSFGPYɺ.JDSPTPGU
   &EHF͕ʮ8FC"TTFNCMZʯ ͷ࣮૷Λൃද ʢ IUUQXXXQVCMJDLFZKQCMPHWGJSFGPYNJDSPTPGU@FEHFXFC

   BTTFNCMZXFCIUNM 8FC"TTFNCMZ ࠷ۙͷಈ޲

7. 8FC"TTFNCMZ Λ࢖ͬͨ ؆୯ͳαϯϓϧίʔυ  ؆୯ͳԋࢉ  8FC"TTFNCMZ ͔Βͷ +4
   ͷݺͼग़͠ ˞
   ιʔείʔυ
   IUUQTHJUIVCDPNQJOFXBTNTBNQMF

8. 8FC"TTFNCMZ Λ࢖ͬͨ ؆୯ͳαϯϓϧίʔυ  ؆୯ͳԋࢉ  8FC"TTFNCMZ ͔Βͷ +4
   ͷݺͼग़͠

9. ؆୯ͳԋࢉͷྫ
   
   
   $
   ݴޠͰίʔυΛهड़ int add(int a, int b) { return a +

   b; } C/C++ WebAssembly LLVM compiler DMBOH
   FNJUMMWN UBSHFUXBTN
   4
   P
   BEEMM BEET $
   ݴޠ

10. ؆୯ͳԋࢉͷྫ
    
    
    --7.
    *3
    ͔Β "4.
    ʹม׵ define hidden i32 @add(i32 %a, i32 %b) #0

    { entry: %a.addr = alloca i32, align 4 %b.addr = alloca i32, align 4 store i32 %a, i32* %a.addr, align 4 C/C++ WebAssembly LLVM compiler MMD BEEMM NBSDIXBTN
    GJMFUZQFBTN rP
    BEET --7.
    *3

11. ؆୯ͳԋࢉͷྫ
    
    
    
    "4.
    ͔Β 4
    ࣜʹม׵ add: .param i32, i32 .result i32 .local i32

    i32.const $push2=, 0 C/C++ WebAssembly LLVM compiler TXBTN
    BMMPDBUFTUBDL
    
    IFMMPT 
    IFMMPXBTU 8FC"TTFNCMZ "4.

12. ؆୯ͳԋࢉͷྫ
    
    
    
    4
    ͔ࣜΒόΠφϦʹม׵ (func $add (param $0 i32) (param $1 i32) (result

    i32) (local $2 i32) (i32.store offset=12 (set_local $2 (i32.sub (i32.load offset=4 C/C++ WebAssembly LLVM compiler TFYQSXBTN rP
    BEEXBTN BEEXBTU 8"45
    8"4.
    ςΩετܗࣜ

13. ؆୯ͳԋࢉͷྫ
    
    
    
    ϒϥ΢β͔ΒಡΈࠐΈ࣮ߦ fetch('/add.wasm') .then(function (res) { return res.arrayBuffer() }) .then(function (arrayBuffer)

    { const binArray = new Uint8Array(arrayBuffer) const module = Wasm.instantiateModule(binArray, {}) console.log(module.exports.add(5, 8)) }) +BWB4DSJQU

14. 8FC"TTFNCMZ Λ࢖ͬͨ ؆୯ͳαϯϓϧίʔυ  ؆୯ͳԋࢉ  8FC"TTFNCMZ ͔Βͷ +4
    ͷݺͼग़͠

15. +4
    Λ 8FC"TTFNCMZ ͔Βݺͼग़͢
    
    $
    ݴޠଆ void alert(char *s); void hello() { alert("Hello

    World!¥n"); } $
    ݴޠ 未解決 ϦϯΫ࣌ʹղܾ͞Εͳ͍ؔ਺͸ +BWB4DSJQU
    ݺͼग़͠ʹίϯύΠϧ͞ΕΔ

16. const module = Wasm.instantiateModule(binArray, { env: { alert: function (ptr)

    { const memory = new Uint8Array(module.exports.memory) const str = cstr2str(memory, ptr) console.log(str) }, }, }) module.exports.hello() +BWB4DSJQU ΞυϨε͕౉Δ θϩऴ୺จࣈྻ ͔Βͷม׵ॲཧ ୈ 
    Ҿ਺ʹ ؔ਺ҰཡΛ౉͢ +4
    Λ 8FC"TTFNCMZ ͔Βݺͼग़͢
    
    +4
    ଆ

17. function cstr2str(buf, pos) { var s = ’’ while (buf.length

    > pos && buf[pos] != 0) { s += String.fromCharCode(buf[pos]) ++pos } return s } +BWB4DSJQU 6JOU"SSBZ
    ͔Β θϩऴ୺จࣈྻΛऔΓग़ͯ͠Δ͚ͩ +4
    Λ 8FC"TTFNCMZ ͔Βݺͼग़͢
    
    +4
    ଆ 

18. ·ͱΊ ü 8FC"TTFNCMZ ͸طʹϒϥ΢βͰಈ͘ ü ਖ਼ࣜͳن֨ʹͳΔͷ͸·ͩઌ ü ڵຯͷ͋Δํ͸৮ͬͯΈ͍ͯͩ͘͞

19. FIN