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

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

Φηϩ࡞੒ͷ͖͔͚ͬ

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

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

ΦηϩͷCPUΛ JavaScript ͱ Wasm Ͱ 
 ͦΕͧΕ࣮ߦͯ͠଎౓ൺֱΛͯ͠ΈΑ͏ʂ

΍ͬͯΈͨ

IUUQTXBTNPUIFMMPUZOHKQ

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

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

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

WasmͷϏϧυͱ࣮ߦ ʢRustʣ

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

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

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 ؔ਺Λݺͼग़͠ 
 Մೳʹ͢Δ

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 Λ௥Ճ

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

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Ͱ Ϗϧυͨ͠੒Ռ෺

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Λࢼ͢͜ͱ͕Ͱ͖Δ ࣍εϥΠυͰ࡞੒༧ఆ ࣍εϥΠυͰ࡞੒༧ఆ

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

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

࣮ߦ $ yarn dev

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