WebAssemblyでオセロを作ってみた

Transcript

1. WebAssemblyͰΦηϩΛ
   ࡞ͬͯΈͨ
   FukuokaJS
   
   
   2021/10/12
   

   View Slide

2. ࣗݾ঺հ
   ໊લ: ༄ ྙߒ @t-yng
   
   
   ॴଐ: גࣜձࣾϠϚοϓ
   
   
   ෱Ԭྺ: 4ϲ݄
   
   
   झຯ: ཱྀߦɾөը
   
   
   ຯḩຯͷ΋ͭು͕޷͖
   

   View Slide

3. Φηϩ࡞੒ͷ͖͔͚ͬ
   

   View Slide

4. Web Assembly (Wasm) ͱ͸ʁ
   WebAssembly ͸࠷ۙͷ΢Σϒϒϥ΢βʔͰಈ࡞͠ɺ৽ͨͳػೳͱ
   େ෯ͳύϑΥʔϚϯε޲্Λఏڙ͢Δ৽͍͠छྨͷίʔυͰ͢ɻ
   
   
   جຊతʹ௚઀هड़Ͱ͸ͳ͘ɺCɺC++ɺRust ౳ͷ௿ਫ४ͷݴޠʹ
   ͱͬͯޮՌతͳίϯύΠϧର৅ͱͳΔΑ͏ʹઃܭ͞Ε͍ͯ·͢ɻ
   Web Assembly ͱ͸Կ͔ | MDN
   ɾϒϥ΢βͰߴ଎ʹಈ࡞͢Δ
   
   
   ɾCɺRust ͳͲͷଞͷݴޠ͔ΒίϯύΠϧՄೳ
   
   
   ɾҰ෦ͷॏ͍ॲཧ͚ͩΛ Wasm Ͱߴ଎Խ͕Մೳ
   

   View Slide

5. Wasm ͸ JavaScript ΑΓߴ଎ʹಈ࡞͢ΔΒ͍͠
   
   
   ͲΕ͚ͩߴ଎Խ͞ΕΔ͔ମײͯ͠Έ͍ͨ
   
   
   forϧʔϓΛճͯ͠ൺֱͩͱ࣮ײͮ͠Β͍
   

   View Slide

6. ΦηϩͷCPUΛ JavaScript ͱ Wasm Ͱ
   

   ͦΕͧΕ࣮ߦͯ͠଎౓ൺֱΛͯ͠ΈΑ͏ʂ
   

   View Slide

7. ΍ͬͯΈͨ
   

   View Slide

8. IUUQTXBTNPUIFMMPUZOHKQ
   

   View Slide

9. ಈ࡞Πϝʔδ
   +BWB4DSJQU
   Φηϩͷج൫͸ JavaScript Ͱ࣮૷
   
   
   CPUΛ JavaScript ͱ Rust Ͱ࣮૷
   
   
   JavaScript൛ ͱ Wasm൛ ͷ੾Γସ͕͑Մೳ
   ੾Γସ͑Մೳ
   

   View Slide

10. ΑΓNखઌΛ୳ࡧ͢Δ͜ͱͰਫ਼౓্͕͕Δ
    
    
    ୳ࡧͷਂ͞ʹԠͯ͡രൃతʹܭࢉ͕࣌ؒ૿͑Δ
    
    
    ॲཧ͕ૣ͘ͳΔ = ୳ࡧൣғ͕޿͕Δ = ڧ͍CPU
    ϛχϚοΫε๏ʹΑΔCPUͷ࣮૷
    

    View Slide

11. ܭଌ݁Ռ
    खઌ·Ͱܭࢉͨ͠ࡍͷ଎౓݁Ռ
    +BWB4DSJQUT
    8BTNT
    dഒͷ଎౓ࠩ
    

    View Slide

12. WasmͷϏϧυͱ࣮ߦ
    
    
    ʢRustʣ
    

    View Slide

13. wasm-pack
    
    
    ɾRustͷίʔυΛjsͰಡΈࠐΈՄೳͳwasmʹίϯύΠϧ͢Δ
    
    
    ɾnpm޲͚ʹwasmΛύοέʔδϯά͢Δࣄ΋Ͱ͖Δ
    
    
    ɾTypeScriptͷܕఆٛϑΝΠϧ΋Ұॹʹੜ੒ͯ͘͠ΕͨΓ͢Δ
    
    
    Cargo
    
    
    ɾRustͷύοέʔδ؅ཧπʔϧ
    wasm-packͷΠϯετʔϧ
    $ cargo install wasm-pack
    ※ Rustͷ։ൃ؀ڥ͸ηοτΞοϓલఏ
    

    View Slide

14. wasmͷϓϩδΣΫτ࡞੒
    $ cargo new --lib wasm
    .
    
    
    ᵓᴷ package.json
    
    
    └─ wasm
    
    
    ᵓᴷ Cargo.toml
    
    
    └─ src
    
    
    └─ lib.rs
    ͜͜ʹ࣮૷Λॻ͍͍ͯ͘
    

    View Slide

15. RustΛ࣮૷ͯ͠ΈΔ
    extern crate wasm_bindgen;
    
    
    use wasm_bindgen::prelude::*;
    
    
    #[wasm_bindgen]
    
    
    pub fn add(a: i32, b: i32) -> i32 {
    
    
    a + b;
    
    
    }
    #[wasm_bindgen] Ͱ JavaScript͔Β add ؔ਺Λݺͼग़͠
    

    Մೳʹ͢Δ
    

    View Slide

16. Cargo.tomlͷઃఆ
    [package]
    
    
    name = "wasm"
    
    
    version = "0.1.0"
    
    
    edition = "2018"
    
    
    [lib]
    
    
    crate-type = ["cdylib"]
    
    
    [dependencies]
    
    
    wasm-bindgen="0.2"
    Cargo.toml: CargoͷઃఆϑΝΠϧ (package.jsonΈ͍ͨͳϞϊ)
    
    
    ɾlibͷλΠϓΛ cdylib ʹઃఆ͢Δ
    
    
    ɾdependencies ʹ wasm-bindgen Λ௥Ճ
    

    View Slide

17. WasmʹίϯύΠϧ͢Δ
    $ wasm-pack build wasm ../src/lib/wasm
    TSDMJCST
    XBTN@CHKT
    XBTN@CH
    XBTN
    XBTN@CH
    XBTNEUT
    XBTNKT
    XBTNEUT
    QBDLBHFKTPO
    Ϗϧυ
    

    View Slide

18. WasmʹίϯύΠϧ͢Δ
    .
    
    
    ᵓᴷ package.json
    
    
    ᵓᴷ src
    
    
    │ɹ └─ lib
    
    
    │ɹɹ └─ wasm
    
    
    │ɹɹɹɹ ᵓᴷᴷ package.json
    
    
    │ ɹɹɹɹ ᵓᴷᴷ wasm.d.ts
    
    
    │ ɹɹɹɹᵓᴷᴷ wasm.js
    
    
    │ɹɹɹɹ ᵓᴷᴷ wasm_bg.js
    
    
    │ ɹɹɹɹᵓᴷᴷ wasm_bg.wasm
    
    
    │ ɹɹɹɹᵋᴷᴷ wasm_bg.wasm.d.ts
    
    
    └─ wasm
    
    
    ɹɹᵓᴷ Cargo.toml
    
    
    ɹɹ └─ src
    
    
    ɹɹɹ ɹᵋᴷ lib.rs
    XBTNQBDLͰ
    Ϗϧυͨ͠੒Ռ෺
    

    View Slide

19. Next.jsͰϑϩϯτΤϯυΛߏங
    .
    
    
    ᵓᴷ package.json
    
    
    ᵓᴷ next.con
    fi
    g.js
    
    
    ᵓᴷ src
    
    
    │ ᵓᴷ lib
    
    
    │ ɹᴹ ɹ └─ wasm
    
    
    │ └─ pages
    
    
    │ ɹɹᵋᴷ index.jsx
    
    
    └─ wasm
    $ yarn install next react react-dom
    Next.jsΛ࢖͏͜ͱͰ࠷খߏ੒ͰWasmΛࢼ͢͜ͱ͕Ͱ͖Δ
    ࣍εϥΠυͰ࡞੒༧ఆ
    ࣍εϥΠυͰ࡞੒༧ఆ
    

    View Slide

20. Next.con
    fi
    g.js Λઃఆ
    // next.con
    fi
    g.js
    
    
    module.exports = {
    
    
    webpack(config) {
    
    
    // next build Λ͢Δ৔߹͸͜Ε͚ͩͩͱμϝ
    
    
    config.experiments = { asyncWebAssembly: true };
    
    
    return config;
    
    
    },
    
    
    };
    $ touch next.con
    fi
    g.js
    

    View Slide

21. src/pages/index.js Λ࣮૷
    import { add } from "../lib/wasm/wasm_bg";
    
    
    const IndexPage = () => {
    
    
    return alert(add(10, 20))}>଍͠ࢉ;
    
    
    };
    
    
    export default IndexPage;
    
    
    Webpack5 Ͱ͸ wasmͷಡΈࠐΈΛαϙʔτ͍ͯ͠Δ
    
    
    WebAssembly.instantiateStreaming Λ࢖ͬͯ wasm ΛಡΈ
    ࠐΉܗࣜʹม׵ͯ͘͠Ε͍ͯΔ
    XFCQBDLFYBNQMFTXBTNTJNQMF
    $ mkdir -p src/pages && touch src/pages/index.jsx
    

    View Slide

22. ࣮ߦ
    $ yarn dev
    

    View Slide

23. ɾWasmͷ࣮ߦ଎౓͕ମײͰ͖ͯྑ͔ͬͨ
    
    
    ɾWasmͷϏϧυ͸ࢼ͚ͩ͢ͳΒࢥͬͨΑΓ΋؆୯
    
    
    ɾ࣮຿Ͱ࢖͏ػձ͸·ͩগͳͦ͏
    
    
    ɹɾϑϩϯτΤϯυͰॏ͍ͨॲཧ͕ඞཁͳ৔໘͸
    
    
    ɹɹ·ͩগͳ͍ҹ৅
    ·ͱΊ
    

    View Slide