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

WebAssembly 入門

Pine Mizune
September 02, 2016

WebAssembly 入門

Gotanda.js #5 in TORETA の発表死霊

Pine Mizune

September 02, 2016
Tweet

More Decks by Pine Mizune

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ࣗݾ঺հ
    o (JU)VC !QJOF
    o 5XJUUFS!QJOF
    o ޷͖ͳݴޠ +BWB4DSJQU
    o (PUBOEBKT 0SHBOJ[FS
    o .PCJMF'BDUPSZ *OD

    View full-size slide

  3. 8FC"TTFNCMZ ͱ͸
    – ֓ཁ
    – ࠷ۙͷಈ޲
    ؆୯ͳαϯϓϧίʔυ
    – ୯७ͳԋࢉ
    – +BWB4DSJQUͱͷ࿈ܞ
    ໨࣍

    View full-size slide

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

    View full-size slide

  5. ϒϥ΢β޲͚ ࣮ߦՄೳόΠφϦϑΥʔϚοτ
    • +BWB4DSJQUͷ୅ସͰ͸ͳ͍
    • ωΠςΟϒίʔυ $$
    ͷ࣮ߦ଎౓ͷ
    • $ISPNF'JSFGPY /JHIUMZ
    Ͱࢼݧతʹ࣮૷ࡁΈ
    8FC"TTFNCMZͱ͸
    WebAssembly
    LLVM compiler
    C/C++

    View full-size slide

  6. n $ISPNFɺ8FC,JUɺ'JSFGPYɺ.JDSPTPGU&EHFɺ
    --7.ɺ6OJUZΒ͕αϙʔτΛද໌

    IUUQXXXQVCMJDLFZKQCMPHXFCBTTFNCMZIUNM
    n 7ɺ'JSFGPYɺ.JDSPTPGU&EHF͕ʮ8FC"TTFNCMZʯ
    ͷ࣮૷Λൃද ʢ

    IUUQXXXQVCMJDLFZKQCMPHWGJSFGPYNJDSPTPGU@FEHFXFC
    BTTFNCMZXFCIUNM
    8FC"TTFNCMZ ࠷ۙͷಈ޲

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. ؆୯ͳԋࢉͷྫ$ݴޠͰίʔυΛهड़
    int add(int a, int b) {
    return a + b;
    }
    C/C++ WebAssembly
    LLVM compiler
    DMBOHFNJUMMWN UBSHFUXBTN4PBEEMM BEET
    $ݴޠ

    View full-size slide

  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 NBSDIXBTNGJMFUZQFBTN rPBEET
    --7.*3

    View full-size slide

  11. ؆୯ͳԋࢉͷྫ"4.͔Β 4ࣜʹม׵
    add:
    .param i32, i32
    .result i32
    .local i32
    i32.const $push2=, 0
    C/C++ WebAssembly
    LLVM compiler
    TXBTNBMMPDBUFTUBDLIFMMPT IFMMPXBTU
    8FC"TTFNCMZ "4.

    View full-size slide

  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 rPBEEXBTN BEEXBTU
    8"45 8"4.ςΩετܗࣜ

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  15. +4Λ 8FC"TTFNCMZ ͔Βݺͼग़͢$ݴޠଆ
    void alert(char *s);
    void hello() {
    alert("Hello World!¥n");
    }
    $ݴޠ
    未解決
    ϦϯΫ࣌ʹղܾ͞Εͳ͍ؔ਺͸
    +BWB4DSJQUݺͼग़͠ʹίϯύΠϧ͞ΕΔ

    View full-size slide

  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ଆ

    View full-size slide

  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ଆ

    View full-size slide

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

    View full-size slide