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

WebAssemblyでオセロを作ってみた

8b05b9a8094d95fd6a45931611144aeb?s=47 t-yng
October 12, 2021

 WebAssemblyでオセロを作ってみた

8b05b9a8094d95fd6a45931611144aeb?s=128

t-yng

October 12, 2021
Tweet

More Decks by t-yng

Other Decks in Technology

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. ܭଌ݁Ռ खઌ·Ͱܭࢉͨ͠ࡍͷ଎౓݁Ռ +BWB4DSJQUT 8BTNT 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ͷϏϧυ͸ࢼ͚ͩ͢ͳΒࢥͬͨΑΓ΋؆୯ ɾ࣮຿Ͱ࢖͏ػձ͸·ͩগͳͦ͏ ɹɾϑϩϯτΤϯυͰॏ͍ͨॲཧ͕ඞཁͳ৔໘͸ ɹɹ·ͩগͳ͍ҹ৅ ·ͱΊ