WebAssemblyでオセロを作ってみた

Transcript

1. WebAssemblyͰΦηϩΛ ࡞ͬͯΈͨ FukuokaJS 2021/10/12
2. ࣗݾ঺հ ໊લ: ༄ ྙߒ @t-yng ॴଐ: גࣜձࣾϠϚοϓ ෱Ԭྺ: 4ϲ݄ झຯ: ཱྀߦɾөը ຯḩຯͷ΋ͭು͕޷͖
3. Φηϩ࡞੒ͷ͖͔͚ͬ
4. Web Assembly (Wasm) ͱ͸ʁ WebAssembly ͸࠷ۙͷ΢Σϒϒϥ΢βʔͰಈ࡞͠ɺ৽ͨͳػೳͱ େ෯ͳύϑΥʔϚϯε޲্Λఏڙ͢Δ৽͍͠छྨͷίʔυͰ͢ɻ جຊతʹ௚઀هड़Ͱ͸ͳ͘ɺCɺC++ɺRust ౳ͷ௿ਫ४ͷݴޠʹ ͱͬͯޮՌతͳίϯύΠϧର৅ͱͳΔΑ͏ʹઃܭ͞Ε͍ͯ·͢ɻ Web Assembly ͱ͸Կ͔ | MDN ɾϒϥ΢βͰߴ଎ʹಈ࡞͢Δ ɾCɺRust ͳͲͷଞͷݴޠ͔ΒίϯύΠϧՄೳ ɾҰ෦ͷॏ͍ॲཧ͚ͩΛ Wasm Ͱߴ଎Խ͕Մೳ
5. Wasm ͸ JavaScript ΑΓߴ଎ʹಈ࡞͢ΔΒ͍͠ ͲΕ͚ͩߴ଎Խ͞ΕΔ͔ମײͯ͠Έ͍ͨ forϧʔϓΛճͯ͠ൺֱͩͱ࣮ײͮ͠Β͍
6. ΦηϩͷCPUΛ JavaScript ͱ Wasm Ͱ 
 ͦΕͧΕ࣮ߦͯ͠଎౓ൺֱΛͯ͠ΈΑ͏ʂ
7. ΍ͬͯΈͨ
8. IUUQTXBTNPUIFMMPUZOHKQ
9. ಈ࡞Πϝʔδ +BWB4DSJQU Φηϩͷج൫͸ JavaScript Ͱ࣮૷ CPUΛ JavaScript ͱ Rust Ͱ࣮૷ JavaScript൛ ͱ Wasm൛ ͷ੾Γସ͕͑Մೳ ੾Γସ͑Մೳ
10. ΑΓNखઌΛ୳ࡧ͢Δ͜ͱͰਫ਼౓্͕͕Δ ୳ࡧͷਂ͞ʹԠͯ͡രൃతʹܭࢉ͕࣌ؒ૿͑Δ ॲཧ͕ૣ͘ͳΔ = ୳ࡧൣғ͕޿͕Δ = ڧ͍CPU ϛχϚοΫε๏ʹΑΔCPUͷ࣮૷
11. ܭଌ݁Ռ खઌ·Ͱܭࢉͨ͠ࡍͷ଎౓݁Ռ +BWB4DSJQU
    T 8BTN
    T dഒͷ଎౓ࠩ
12. WasmͷϏϧυͱ࣮ߦ ʢRustʣ
13. wasm-pack ɾRustͷίʔυΛjsͰಡΈࠐΈՄೳͳwasmʹίϯύΠϧ͢Δ ɾnpm޲͚ʹwasmΛύοέʔδϯά͢Δࣄ΋Ͱ͖Δ ɾTypeScriptͷܕఆٛϑΝΠϧ΋Ұॹʹੜ੒ͯ͘͠ΕͨΓ͢Δ Cargo ɾRustͷύοέʔδ؅ཧπʔϧ wasm-packͷΠϯετʔϧ $ cargo install wasm-pack ※ Rustͷ։ൃ؀ڥ͸ηοτΞοϓલఏ
14. wasmͷϓϩδΣΫτ࡞੒ $ cargo new --lib wasm . ᵓᴷ package.json └─ wasm ᵓᴷ Cargo.toml └─ src └─ lib.rs ͜͜ʹ࣮૷Λॻ͍͍ͯ͘
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 ؔ਺Λݺͼग़͠ 
 Մೳʹ͢Δ
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 Λ௥Ճ
17. WasmʹίϯύΠϧ͢Δ $ wasm-pack build wasm ../src/lib/wasm TSDMJCST XBTN@CHKT XBTN@CH
    XBTN XBTN@CH
    XBTNEUT XBTNKT XBTNEUT QBDLBHFKTPO Ϗϧυ
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Ͱ
    Ϗϧυͨ͠੒Ռ෺
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Λࢼ͢͜ͱ͕Ͱ͖Δ ࣍εϥΠυͰ࡞੒༧ఆ ࣍εϥΠυͰ࡞੒༧ఆ
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
21. src/pages/index.js Λ࣮૷ import { add } from "../lib/wasm/wasm_bg"; const IndexPage = () => { return <button onClick={() => alert(add(10, 20))}>଍͠ࢉ</button>; }; export default IndexPage; Webpack5 Ͱ͸ wasmͷಡΈࠐΈΛαϙʔτ͍ͯ͠Δ WebAssembly.instantiateStreaming Λ࢖ͬͯ wasm ΛಡΈ ࠐΉܗࣜʹม׵ͯ͘͠Ε͍ͯΔ XFCQBDLFYBNQMFTXBTNTJNQMF $ mkdir -p src/pages && touch src/pages/index.jsx
22. ࣮ߦ $ yarn dev
23. ɾWasmͷ࣮ߦ଎౓͕ମײͰ͖ͯྑ͔ͬͨ ɾWasmͷϏϧυ͸ࢼ͚ͩ͢ͳΒࢥͬͨΑΓ΋؆୯ ɾ࣮຿Ͱ࢖͏ػձ͸·ͩগͳͦ͏ ɹɾϑϩϯτΤϯυͰॏ͍ͨॲཧ͕ඞཁͳ৔໘͸ ɹɹ·ͩগͳ͍ҹ৅ ·ͱΊ