{"id":13203,"date":"2026-03-17T06:29:41","date_gmt":"2026-03-17T06:29:41","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=13203"},"modified":"2026-07-01T18:41:19","modified_gmt":"2026-07-01T18:41:19","slug":"webassembly-javascript-data-exchange","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/webassembly-javascript-data-exchange\/","title":{"rendered":"WebAssembly\u3068JavaScript\u9593\u306e\u30c7\u30fc\u30bf\u3084\u308a\u3068\u308a\u5b8c\u5168\u30ac\u30a4\u30c9\uff5c\u7dda\u5f62\u30e1\u30e2\u30ea\u30fbArrayBuffer\u30fb\u6587\u5b57\u5217\u30fbserde-wasm-bindgen\u30fbSharedArrayBuffer\u30fb\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u30fb\u30e1\u30e2\u30ea\u7ba1\u7406\u307e\u3067\u5fb9\u5e95\u89e3\u8aac"},"content":{"rendered":"
\"\"\u751f\u5f92<\/span><\/div>
\n

WebAssembly\u3092JavaScript\u304b\u3089\u4f7f\u3044\u305f\u3044\u3093\u3067\u3059\u304c\u3001\u6570\u5024\u306f\u6e21\u305b\u3066\u3082\u6587\u5b57\u5217\u3084\u914d\u5217\u306e\u6e21\u3057\u65b9\u304c\u5206\u304b\u3089\u306a\u304f\u3066\u8a70\u307e\u3063\u3066\u3044\u307e\u3059\u2026\u2026<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n

\"\"\u30da\u30f3\u535a\u58eb<\/span><\/div>
\n

WebAssembly\u3068JavaScript\u9593\u306e\u30c7\u30fc\u30bf\u3084\u308a\u3068\u308a\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u30d1\u30bf\u30fc\u30f3\u304c\u3042\u308b\u3093\u3058\u3083\uff01\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u306f\u76f4\u63a5\u6e21\u305b\u308b\u304c\u3001\u6587\u5b57\u5217\u3084\u8907\u96d1\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u30e1\u30e2\u30ea\uff08ArrayBuffer\uff09\u3092\u901a\u3058\u3066\u6e21\u3059\u5fc5\u8981\u304c\u3042\u308b\u3093\u3058\u3083\u3002wasm-bindgen\u3092\u4f7f\u3048\u3070Rust\u3067\u66f8\u3044\u305fWasm\u306f\u3053\u306e\u8907\u96d1\u3055\u3092\u62bd\u8c61\u5316\u3057\u3066\u304f\u308c\u308b\uff01\u3055\u3089\u306bSharedArrayBuffer\u3067\u300c\u30bc\u30ed\u30b3\u30d4\u30fc\u5171\u6709\u300d\u3082\u5b9f\u73fe\u3067\u304d\u308b\u3057\u3001JS\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092Wasm\u306b\u6e21\u3059\u65b9\u6cd5\u3082\u89e3\u8aac\u3059\u308b\u305e\uff01<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n

\n

\u3053\u306e\u8a18\u4e8b\u3067\u308f\u304b\u308b\u3053\u3068<\/h2>\n
    \n
  • WebAssembly\u306e\u7dda\u5f62\u30e1\u30e2\u30ea\u30e2\u30c7\u30eb\u3068ArrayBuffer\u306e\u57fa\u672c\u7684\u306a\u4ed5\u7d44\u307f<\/li>\n
  • \u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u30fb\u6587\u5b57\u5217\u30fb\u30d0\u30a4\u30ca\u30ea\u30c7\u30fc\u30bf\u306e\u5b89\u5168\u306a\u53d7\u3051\u6e21\u3057\u65b9\u6cd5<\/li>\n
  • wasm-bindgen\u3068serde-wasm-bindgen\u3067\u69cb\u9020\u5316\u30c7\u30fc\u30bf\u3092\u578b\u5b89\u5168\u306b\u6271\u3046\u624b\u9806<\/li>\n
  • SharedArrayBuffer\u3067JS\u3068Wasm\u9593\u306e\u30bc\u30ed\u30b3\u30d4\u30fc\u5171\u6709\u3092\u5b9f\u73fe\u3059\u308b\u65b9\u6cd5<\/li>\n
  • JS\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306eWasm\u3078\u306e\u6e21\u3057\u65b9\u30fb\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u9632\u6b62\u30fbTypeScript\u578b\u306e\u81ea\u52d5\u751f\u6210<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n

    WebAssembly\u306e\u57fa\u672c\u306f\u5206\u304b\u3063\u305f\u3082\u306e\u306e\u3001\u300c\u6587\u5b57\u5217\u3084\u914d\u5217\u30fb\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u3069\u3046\u3084\u3063\u3066JavaScript\u3068Wasm\u9593\u3067\u3084\u308a\u3068\u308a\u3059\u308b\u304b\u300d\u3067\u8a70\u307e\u308b\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002Wasm\u306fJavaScript\u306eValue\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u76f4\u63a5\u6271\u3048\u305a\u3001\u30e1\u30e2\u30ea\uff08\u7dda\u5f62\u30e1\u30e2\u30ea\uff09\u3092\u901a\u3058\u3066\u30c7\u30fc\u30bf\u3092\u6e21\u3059<\/strong>\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

    \u672c\u8a18\u4e8b\u3067\u306f\u3001Wasm-JavaScript\u9593\u306e\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u306e\u57fa\u672c\u539f\u5247\u30fb\u7dda\u5f62\u30e1\u30e2\u30ea\u30e2\u30c7\u30eb\u306e\u8a73\u7d30\u30fb\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u30fb\u6587\u5b57\u5217\uff08TextEncoder\/Decoder\u624b\u52d5\u5b9f\u88c5\uff09\u30fbwasm-bindgen\u306b\u3088\u308b\u81ea\u52d5\u5909\u63db\u30fbserde-wasm-bindgen\u306b\u3088\u308b\u69cb\u9020\u5316\u30c7\u30fc\u30bf\u30fbSharedArrayBuffer\u30bc\u30ed\u30b3\u30d4\u30fc\u5171\u6709\u30fbJS\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306eWasm\u3078\u306e\u6e21\u3057\u65b9\u30fbC++\uff08Emscripten\uff09\u30a2\u30d7\u30ed\u30fc\u30c1\u30fb\u30e1\u30e2\u30ea\u7ba1\u7406\u3068\u30ea\u30fc\u30af\u9632\u6b62\u30fbTypeScript\u578b\u306e\u81ea\u52d5\u751f\u6210<\/span><\/strong>\u3092\u5b8c\u5168\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \n\n\n\n

    WebAssembly\u306e\u30e1\u30e2\u30ea\u30e2\u30c7\u30eb\u3092\u7406\u89e3\u3059\u308b<\/h2>\n\n\n
    \n
    \"WebAssembly\u306e\u7dda\u5f62\u30e1\u30e2\u30ea\u3068JavaScript\u9593\u306e\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u306e\u56f3\"<\/figure>\n<\/div>\n\n\n
    >\u3010WebAssembly\u3068JavaScript\u9593\u306e\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u306e\u57fa\u672c\u539f\u5247\u3011\n\n\u2705 \u76f4\u63a5\u6e21\u305b\u308b\u3082\u306e\uff08\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\uff09:\n\u2192 \u6574\u6570\uff08i32, i64\uff09\uff1aJavaScript\u306e number \u3068\u76f4\u63a5\u3084\u308a\u3068\u308a\u53ef\u80fd\n\u2192 \u6d6e\u52d5\u5c0f\u6570\u70b9\uff08f32, f64\uff09\uff1aJavaScript\u306e number \u3068\u76f4\u63a5\u3084\u308a\u3068\u308a\u53ef\u80fd\n\u2192 bigint (i64 \u306e\u5927\u304d\u306a\u5024)\uff1aJavaScript\u306e BigInt \u3068\u5bfe\u5fdc\n\n\u274c \u76f4\u63a5\u6e21\u305b\u306a\u3044\u3082\u306e\uff08\u53c2\u7167\u578b\uff09:\n\u2192 \u6587\u5b57\u5217\uff08string\uff09\n\u2192 \u914d\u5217\uff08Array, TypedArray \u306e\u9ad8\u30ec\u30d9\u30ebAPI\uff09\n\u2192 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff08{ key: value }\uff09\n\u2192 \u3053\u308c\u3089\u306f\u300cWebAssembly.Memory\uff08\u7dda\u5f62\u30e1\u30e2\u30ea\uff09\u3092\u901a\u3058\u305f\u9593\u63a5\u7684\u306a\u6e21\u3057\u65b9\u300d\u304c\u5fc5\u8981\n\n\u3010\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u306e3\u3064\u306e\u624b\u6bb5\u3011\n1. \u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u95a2\u6570\u306e\u5f15\u6570\/\u623b\u308a\u5024\uff08\u6570\u5024\u306e\u307f\u76f4\u63a5\uff09\n2. WebAssembly.Memory\uff08\u5171\u6709\u7dda\u5f62\u30e1\u30e2\u30ea\uff09\u3092\u4ecb\u3057\u305f\u30d0\u30c3\u30d5\u30a1\u6e21\u3057\n3. wasm-bindgen\uff08Rust\uff09\/ Emscripten\uff08C\/C++\uff09: \u8907\u96d1\u306a\u578b\u3092\u81ea\u52d5\u5909\u63db\n\n\u3010Wasm\u306e\u7dda\u5f62\u30e1\u30e2\u30ea\u3068\u306f\u3011\n\u2192 Wasm\u30e2\u30b8\u30e5\u30fc\u30eb\u306f\u300c\u7dda\u5f62\u30e1\u30e2\u30ea\u300d\u3068\u3044\u3046\u9023\u7d9a\u3057\u305f\u30d0\u30a4\u30c8\u914d\u5217\u3092\u6301\u3064\n\u2192 JavaScript\u304b\u3089\u306f ArrayBuffer \u3068\u3057\u3066\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\n\u2192 Uint8Array, Int32Array \u7b49\u306eTypedArray\u3067\u8aad\u307f\u66f8\u304d\u3067\u304d\u308b\n\u2192 \u521d\u671f\u30b5\u30a4\u30ba\u306f page\uff0864KB\uff09\u5358\u4f4d\u3067\u6307\u5b9a\u3001memory.grow() \u3067\u62e1\u5f35\u53ef\u80fd<\/code><\/pre>\n\n\n\n
    >\/\/ WebAssembly.Memory \u306e\u57fa\u672c\u64cd\u4f5c\nconst memory = new WebAssembly.Memory({\n  initial: 1,   \/\/ 1 page = 64KB\n  maximum: 100, \/\/ \u6700\u5927100 page = 6.4MB\n  shared: false, \/\/ true\u306b\u3059\u308b\u3068SharedArrayBuffer\u306b\u306a\u308b\n})\n\n\/\/ JavaScript\u5074\u3067\u30e1\u30e2\u30ea\u306b\u30a2\u30af\u30bb\u30b9\nconst buffer = memory.buffer  \/\/ ArrayBuffer\nconst view = new Uint8Array(buffer)  \/\/ \u30d0\u30a4\u30c8\u5358\u4f4d\u3067\u8aad\u307f\u66f8\u304d\nconst int32View = new Int32Array(buffer)  \/\/ 4\u30d0\u30a4\u30c8\u6574\u6570\u3068\u3057\u3066\u8aad\u307f\u66f8\u304d\n\n\/\/ \u30e1\u30e2\u30ea\u306b\u30c7\u30fc\u30bf\u3092\u66f8\u304d\u8fbc\u3080\nview[0] = 72    \/\/ 'H'\nview[1] = 101   \/\/ 'e'\nview[2] = 108   \/\/ 'l'\nview[3] = 108   \/\/ 'l'\nview[4] = 111   \/\/ 'o'\n\n\/\/ \u30e1\u30e2\u30ea\u3092\u62e1\u5f35\u3059\u308b\nconst prevPages = memory.grow(1)  \/\/ 1\u30da\u30fc\u30b8\uff0864KB\uff09\u62e1\u5f35\n\/\/ grow()\u5f8c\u306f buffer \u304c\u65b0\u3057\u3044ArrayBuffer\u306b\u306a\u308b\u305f\u3081\u518d\u53d6\u5f97\u304c\u5fc5\u8981<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u306e\u53d7\u3051\u6e21\u3057\uff08\u6700\u3082\u30b7\u30f3\u30d7\u30eb\uff09<\/h2>\n\n\n\n
    >\/\/ Rust \u3067\u6570\u5024\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u3066JS\u304b\u3089\u547c\u3073\u51fa\u3059\u4f8b\n\n\/\/ src\/lib.rs\nuse wasm_bindgen::prelude::*;\n\n\/\/ i32\uff0832\u30d3\u30c3\u30c8\u6574\u6570\uff09\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}\n\n\/\/ f64\uff0864\u30d3\u30c3\u30c8\u6d6e\u52d5\u5c0f\u6570\u70b9\uff09\n#[wasm_bindgen]\npub fn square(x: f64) -> f64 {\n    x * x\n}\n\n\/\/ bool\uff08i32\u306e0\/1\u3068\u3057\u3066\u5909\u63db\uff09\n#[wasm_bindgen]\npub fn is_even(n: i32) -> bool {\n    n % 2 == 0\n}\n\n\/\/ \u8907\u6570\u306e\u6570\u5024\u3092\u51e6\u7406\n#[wasm_bindgen]\npub fn calculate_stats(values: &[f64]) -> f64 {\n    if values.is_empty() { return 0.0; }\n    values.iter().sum::() \/ values.len() as f64  \/\/ \u5e73\u5747\u5024\n}\n\n\/\/ i64 \u3068 BigInt\uff08JavaScript\u5074\u3067BigInt\u3092\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308b\uff09\n#[wasm_bindgen]\npub fn factorial(n: u32) -> u64 {\n    (1..=n as u64).product()\n}<\/code><\/pre>\n\n\n\n
    >\/\/ JavaScript \u5074\nimport init, { add, square, is_even, calculate_stats, factorial } from '.\/pkg\/my_wasm.js'\nawait init()\n\nconsole.log(add(3, 4))             \/\/ \u2192 7\nconsole.log(square(2.5))           \/\/ \u2192 6.25\nconsole.log(is_even(42))           \/\/ \u2192 true\nconsole.log(calculate_stats([1, 2, 3, 4, 5])) \/\/ \u2192 3\uff08\u5e73\u5747\u5024\uff09\n\n\/\/ i64\u306fBigInt\u3068\u3057\u3066\u8fd4\u3063\u3066\u304f\u308b\nconst result = factorial(20)\nconsole.log(result)  \/\/ \u2192 2432902008176640000n\uff08BigInt\uff09<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u6587\u5b57\u5217\u306e\u53d7\u3051\u6e21\u3057\uff5cTextEncoder\u3068\u30e1\u30e2\u30ea\u64cd\u4f5c<\/h2>\n\n\n\n
    \u65b9\u6cd5A\uff1awasm-bindgen\u3067\u81ea\u52d5\u5909\u63db\uff08\u63a8\u5968\uff09<\/h3>\n\n\n\n
    >\/\/ Rust + wasm-bindgen: &str \u3092\u76f4\u63a5\u53d7\u3051\u53d6\u308c\u308b\uff08wasm-bindgen\u304c\u5909\u63db\u3092\u884c\u3046\uff09\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!(\"\u3053\u3093\u306b\u3061\u306f\u3001{}\u3055\u3093\uff01\", name)\n}\n\n#[wasm_bindgen]\npub fn reverse_string(s: &str) -> String {\n    s.chars().rev().collect()\n}\n\n\/\/ \u6587\u5b57\u5217\u306e\u914d\u5217\u3092\u53d7\u3051\u53d6\u308b\uff08wasm-bindgen\u304cjs_sys::Array\u7d4c\u7531\u3067\u5909\u63db\uff09\n#[wasm_bindgen]\npub fn join_strings(separator: &str, parts: js_sys::Array) -> String {\n    let strs: Vec = parts\n        .iter()\n        .filter_map(|v| v.as_string())\n        .collect();\n    strs.join(separator)\n}<\/code><\/pre>\n\n\n\n
    >\/\/ JavaScript \u5074 - wasm-bindgen\u304c\u6587\u5b57\u5217\u5909\u63db\u3092\u81ea\u52d5\u3067\u884c\u3046\nimport init, { greet, reverse_string, join_strings } from '.\/pkg\/my_wasm.js'\nawait init()\n\nconst message = greet('\u7530\u4e2d')\nconsole.log(message)  \/\/ \u2192 \"\u3053\u3093\u306b\u3061\u306f\u3001\u7530\u4e2d\u3055\u3093\uff01\"\n\nconst reversed = reverse_string('Hello, World!')\nconsole.log(reversed)  \/\/ \u2192 \"!dlroW ,olleH\"\n\n\/\/ wasm-bindgen\u306e\u5185\u90e8\u51e6\u7406\uff08\u900f\u904e\u7684\u306b\u884c\u308f\u308c\u308b\uff09:\n\/\/ 1. JS\u306estring \u2192 TextEncoder \u3067UTF-8\u30d0\u30a4\u30c8\u5217\u306b\u5909\u63db\n\/\/ 2. Wasm\u306e\u30e1\u30e2\u30ea\uff08alloc\u78ba\u4fdd\uff09\u306b\u66f8\u304d\u8fbc\u3080\n\/\/ 3. \u30dd\u30a4\u30f3\u30bf\u3068\u9577\u3055\u3092Wasm\u95a2\u6570\u306b\u6e21\u3059\n\/\/ 4. Wasm\u95a2\u6570\u304c\u623b\u308a\u5024\u306e\u30dd\u30a4\u30f3\u30bf\u3068\u9577\u3055\u3092\u8fd4\u3059\n\/\/ 5. JS\u304c\u30e1\u30e2\u30ea\u304b\u3089UTF-8\u30c7\u30b3\u30fc\u30c9\u3057\u3066string\u306b\u5909\u63db\n\/\/ 6. Wasm\u306e\u30e1\u30e2\u30ea\u3092\u89e3\u653e<\/code><\/pre>\n\n\n\n
    \u65b9\u6cd5B\uff1a\u624b\u52d5\u3067TextEncoder\u3092\u4f7f\u3046\uff08wasm-bindgen\u306a\u3057\u306e\u751f\u306eWasm\uff09<\/h3>\n\n\n\n
    >\/\/ WebAssembly.instantiate \u3067Wasm\u3092\u76f4\u63a5\u8aad\u307f\u8fbc\u3080\u5834\u5408\nconst wasmModule = await WebAssembly.instantiateStreaming(\n  fetch('.\/module.wasm'),\n  {\n    env: {\n      abort: () => console.error('Wasm abort called'),\n    }\n  }\n)\nconst { instance } = wasmModule\nconst wasmMemory = new Uint8Array(instance.exports.memory.buffer)\n\n\/\/ ===== JS\u304b\u3089Wasm\u3078\u6587\u5b57\u5217\u3092\u6e21\u3059 =====\nfunction writeStringToWasm(str, ptr) {\n  const encoder = new TextEncoder()\n  const bytes = encoder.encode(str)  \/\/ UTF-8\u30a8\u30f3\u30b3\u30fc\u30c9\n  wasmMemory.set(bytes, ptr)\n  wasmMemory[ptr + bytes.length] = 0  \/\/ null\u7d42\u7aef\uff08C\u30b9\u30bf\u30a4\u30eb\u6587\u5b57\u5217\uff09\n  return bytes.length\n}\n\n\/\/ ===== Wasm\u306e\u30e1\u30e2\u30ea\u304b\u3089\u6587\u5b57\u5217\u3092\u8aad\u307f\u53d6\u308b =====\nfunction readStringFromWasm(ptr) {\n  \/\/ null\u7d42\u7aef\u307e\u3067\u8aad\u307f\u9032\u3081\u308b\n  let end = ptr\n  while (wasmMemory[end] !== 0) end++\n  const slice = wasmMemory.slice(ptr, end)\n  return new TextDecoder('utf-8').decode(slice)\n}\n\n\/\/ \u4f7f\u3044\u65b9\u4f8b\nconst inputPtr = instance.exports.alloc(100)  \/\/ 100\u30d0\u30a4\u30c8\u78ba\u4fdd\nconst byteLen = writeStringToWasm('Hello, Wasm!', inputPtr)\n\nconst outputPtr = instance.exports.process_string(inputPtr, byteLen)\nconst result = readStringFromWasm(outputPtr)\nconsole.log(result)\n\ninstance.exports.dealloc(inputPtr, 100)  \/\/ \u30e1\u30e2\u30ea\u89e3\u653e\uff08\u91cd\u8981\uff01\uff09<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30d0\u30a4\u30ca\u30ea\u30c7\u30fc\u30bf\uff08ArrayBuffer\u30fbTypedArray\uff09\u306e\u53d7\u3051\u6e21\u3057<\/h2>\n\n\n\n
    >\/\/ Rust: Vec \/ &[u8] \u3092\u53d7\u3051\u53d6\u3063\u3066\u30d0\u30a4\u30c8\u64cd\u4f5c\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn process_bytes(data: &[u8]) -> Vec {\n    \/\/ \u30d0\u30a4\u30c8\u5217\u3092\u9006\u9806\u306b\u3059\u308b\u4f8b\n    data.iter().rev().cloned().collect()\n}\n\n\/\/ \u753b\u50cf\u51e6\u7406\uff08\u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\u5909\u63db\uff09\n#[wasm_bindgen]\npub fn grayscale(rgba_data: &[u8]) -> Vec {\n    let mut output = rgba_data.to_vec()\n\n    \/\/ RGBA\u5f62\u5f0f: 4\u30d0\u30a4\u30c8\u3054\u3068\u306bRGBA\u304c\u4e26\u3076\n    for chunk in output.chunks_mut(4) {\n        let r = chunk[0] as f64\n        let g = chunk[1] as f64\n        let b = chunk[2] as f64\n        \/\/ \u8f1d\u5ea6\u306e\u91cd\u307f\u4ed8\u3051\u5e73\u5747\uff08\u6a19\u6e96\u7684\u306a\u5909\u63db\u5f0f\uff09\n        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8\n        chunk[0] = gray\n        chunk[1] = gray\n        chunk[2] = gray\n        \/\/ chunk[3]\u306f\u03b1\u5024\u306a\u306e\u3067\u305d\u306e\u307e\u307e\n    }\n\n    output\n}<\/code><\/pre>\n\n\n\n
    >\/\/ JavaScript \u5074 - Uint8Array \u3067\u53d7\u3051\u6e21\u3057\nimport init, { process_bytes, grayscale } from '.\/pkg\/my_wasm.js'\nawait init()\n\n\/\/ \u30d0\u30a4\u30c8\u914d\u5217\u306e\u51e6\u7406\nconst input = new Uint8Array([1, 2, 3, 4, 5])\nconst reversed = process_bytes(input)\nconsole.log(Array.from(reversed))  \/\/ \u2192 [5, 4, 3, 2, 1]\n\n\/\/ Canvas \u306e ImageData \u3092Wasm\u3067\u51e6\u7406\nconst canvas = document.getElementById('canvas')\nconst ctx = canvas.getContext('2d')\n\n\/\/ \u753b\u50cf\u3092 Canvas \u306b\u63cf\u753b\nconst img = document.getElementById('source-image')\nctx.drawImage(img, 0, 0)\n\n\/\/ ImageData \u3092\u53d6\u5f97\u3057\u3066Wasm\u306b\u6e21\u3059\nconst imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)\n\n\/\/ Uint8Array \u3068\u3057\u3066 wasm-bindgen \u306b\u6e21\u3059\nconst processed = grayscale(imageData.data)\n\n\/\/ \u51e6\u7406\u7d50\u679c\u3092 Canvas \u306b\u623b\u3059\nconst outputImageData = new ImageData(processed, canvas.width, canvas.height)\nctx.putImageData(outputImageData, 0, 0)\n\n\/\/ \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6bd4\u8f03\nconst start = performance.now()\n\/\/ Wasm\u3067\u51e6\u7406\uff08\u5178\u578b\u7684\u306b3\u301c10\u500d\u9ad8\u901f\uff09\nconst wasmResult = grayscale(imageData.data)\nconsole.log(`Wasm: ${performance.now() - start}ms`)<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u69cb\u9020\u5316\u30c7\u30fc\u30bf\u306e\u53d7\u3051\u6e21\u3057\uff5cserde-wasm-bindgen vs JSON<\/h2>\n\n\n\n
    >\/\/ Cargo.toml \u306e\u4f9d\u5b58\u95a2\u4fc2\n[dependencies]\nwasm-bindgen = \"0.2\"\nserde = { version = \"1.0\", features = [\"derive\"] }\nserde_json = \"1.0\"\nserde-wasm-bindgen = \"0.6\"  # \u9ad8\u901f\u306a\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba<\/code><\/pre>\n\n\n\n
    \u65b9\u6cd51\uff1aJSON\u7d4c\u7531\uff08\u30b7\u30f3\u30d7\u30eb\u30fb\u5e83\u304f\u4f7f\u308f\u308c\u308b\uff09<\/h3>\n\n\n\n
    >\/\/ Rust - JSON\u6587\u5b57\u5217\u3068\u3057\u3066\u53d7\u3051\u6e21\u3057\nuse wasm_bindgen::prelude::*;\nuse serde::{Deserialize, Serialize};\n\n#[derive(Serialize, Deserialize)]\npub struct User {\n    pub id: u32,\n    pub name: String,\n    pub email: String,\n    pub scores: Vec,\n}\n\n#[derive(Serialize, Deserialize)]\npub struct UserStats {\n    pub name: String,\n    pub average_score: f64,\n    pub max_score: f64,\n    pub grade: String,\n}\n\n#[wasm_bindgen]\npub fn analyze_user(json: &str) -> String {\n    let user: User = match serde_json::from_str(json) {\n        Ok(u) => u,\n        Err(e) => return format!(\"{{\\\"error\\\": \\\"{}\\\"}}\", e),\n    };\n\n    let avg = if user.scores.is_empty() {\n        0.0\n    } else {\n        user.scores.iter().sum::() \/ user.scores.len() as f64\n    };\n\n    let max = user.scores.iter().cloned().fold(f64::NEG_INFINITY, f64::max);\n\n    let grade = match avg as u32 {\n        90..=100 => \"S\",\n        80..=89  => \"A\",\n        70..=79  => \"B\",\n        60..=69  => \"C\",\n        _        => \"D\",\n    };\n\n    let stats = UserStats {\n        name: user.name,\n        average_score: avg,\n        max_score: max,\n        grade: grade.to_string(),\n    };\n\n    serde_json::to_string(&stats).unwrap()\n}<\/code><\/pre>\n\n\n\n
    >\/\/ JavaScript \u5074 - JSON\u7d4c\u7531\nimport init, { analyze_user } from '.\/pkg\/my_wasm.js'\nawait init()\n\nconst user = {\n  id: 1,\n  name: '\u5c71\u7530\u592a\u90ce',\n  email: 'yamada@example.com',\n  scores: [85, 92, 78, 95, 88],\n}\n\nconst resultJson = analyze_user(JSON.stringify(user))\nconst stats = JSON.parse(resultJson)\nconsole.log(stats)\n\/\/ \u2192 { name: \"\u5c71\u7530\u592a\u90ce\", average_score: 87.6, max_score: 95, grade: \"A\" }<\/code><\/pre>\n\n\n\n
    \u65b9\u6cd52\uff1aserde-wasm-bindgen\uff08\u9ad8\u901f\u30fb\u578b\u5b89\u5168\uff09<\/h3>\n\n\n\n
    >\/\/ Rust - serde-wasm-bindgen\u4f7f\u7528\uff08JSON\u5909\u63db\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u306a\u3057\uff09\nuse wasm_bindgen::prelude::*;\nuse serde::{Deserialize, Serialize};\n\n#[derive(Serialize, Deserialize)]\npub struct AnalysisResult {\n    pub total: f64,\n    pub mean: f64,\n    pub std_dev: f64,\n    pub percentile_90: f64,\n}\n\n#[wasm_bindgen]\npub fn analyze_data(data: JsValue) -> Result {\n    \/\/ JsValue \u2192 Rust\u578b\u306b\u5909\u63db\uff08serde-wasm-bindgen\uff09\n    let numbers: Vec = serde_wasm_bindgen::from_value(data)\n        .map_err(|e| JsValue::from_str(&e.to_string()))?;\n\n    let n = numbers.len() as f64;\n    let total: f64 = numbers.iter().sum();\n    let mean = total \/ n;\n\n    let variance = numbers.iter()\n        .map(|x| (x - mean).powi(2))\n        .sum::() \/ n;\n    let std_dev = variance.sqrt();\n\n    let mut sorted = numbers.clone();\n    sorted.sort_by(|a, b| a.partial_cmp(b).unwrap());\n    let p90_idx = (n * 0.9) as usize;\n    let percentile_90 = sorted[p90_idx.min(sorted.len() - 1)];\n\n    let result = AnalysisResult { total, mean, std_dev, percentile_90 };\n\n    \/\/ Rust\u578b \u2192 JsValue \u306b\u5909\u63db\uff08serde-wasm-bindgen\uff09\n    serde_wasm_bindgen::to_value(&result)\n        .map_err(|e| JsValue::from_str(&e.to_string()))\n}\n\n\/\/ JavaScript \u5074\n\/\/ const data = [1, 5, 3, 8, 2, 9, 4, 7, 6]\n\/\/ const result = analyze_data(data)\n\/\/ \u2192 { total: 45, mean: 5, std_dev: ..., percentile_90: ... }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    SharedArrayBuffer\u3067\u30bc\u30ed\u30b3\u30d4\u30fc\u5171\u6709<\/h2>\n\n\n\n
    >\/\/ SharedArrayBuffer \u3092\u4f7f\u3063\u305f\u30bc\u30ed\u30b3\u30d4\u30fc\u5171\u6709\n\/\/ \u6ce8\u610f: COOP\/COEP \u30d8\u30c3\u30c0\u30fc\u304c\u5fc5\u8981\uff08cross-origin isolation\uff09\n\n\/\/ JavaScript\u3068Wasm\u304cSharedArrayBuffer\u3092\u5171\u6709\u3057\u3066\u30b3\u30d4\u30fc\u306a\u3057\u3067\u30a2\u30af\u30bb\u30b9\n\n\/\/ \u307e\u305a SharedArrayBuffer \u5bfe\u5fdc\u306e\u30e1\u30e2\u30ea\u3067Wasm\u3092\u521d\u671f\u5316\nconst memory = new WebAssembly.Memory({\n  initial: 10,   \/\/ 640KB\n  maximum: 100,  \/\/ 6.4MB\n  shared: true,  \/\/ SharedArrayBuffer \u3092\u4f7f\u7528\n})\n\nconst wasmModule = await WebAssembly.instantiateStreaming(\n  fetch('.\/wasm_module.wasm'),\n  { env: { memory } }\n)\n\nconst { instance } = wasmModule\n\n\/\/ \u5171\u6709\u30e1\u30e2\u30ea\uff08Int32Array\uff09\u306e\u4f5c\u6210\nconst sharedArray = new Int32Array(memory.buffer)\n\n\/\/ \u5927\u91cf\u30c7\u30fc\u30bf\u3092\u30bc\u30ed\u30b3\u30d4\u30fc\u3067Wasm\u306b\u6e21\u3059\nconst dataOffset = 0\nconst dataLength = 1000000  \/\/ 100\u4e07\u8981\u7d20\n\n\/\/ \u30c7\u30fc\u30bf\u3092\u66f8\u304d\u8fbc\u3080\uff08\u30b3\u30d4\u30fc\u306a\u3057\u3001\u76f4\u63a5\u66f8\u304d\u8fbc\u307f\uff09\nfor (let i = 0; i < dataLength; i++) {\n  sharedArray[dataOffset + i] = Math.random() * 1000 | 0\n}\n\n\/\/ Wasm\u3067\u51e6\u7406\uff08\u30c7\u30fc\u30bf\u306e\u30b3\u30d4\u30fc\u306f\u767a\u751f\u3057\u306a\u3044\uff09\nconst sum = instance.exports.sum_array(dataOffset, dataLength)\nconsole.log('\u5408\u8a08:', sum)\n\n\/\/ Web Worker \u3068\u306e\u9023\u643a\u3067\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u3057\u306a\u3044\nconst worker = new Worker('.\/wasm_worker.js')\nworker.postMessage({ memory, dataOffset, dataLength })\nworker.onmessage = (e) => {\n  console.log('\u51e6\u7406\u5b8c\u4e86:', e.data.result)\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    JavaScript\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092Wasm\u306b\u6e21\u3059<\/h2>\n\n\n\n
    >\/\/ Rust + wasm-bindgen: JS\u306e\u95a2\u6570\u3092\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3068\u3057\u3066\u53d7\u3051\u53d6\u308b\n\nuse wasm_bindgen::prelude::*;\nuse js_sys::Function;\n\n\/\/ JS\u95a2\u6570\u3092\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3068\u3057\u3066\u53d7\u3051\u53d6\u308b\n#[wasm_bindgen]\npub fn process_with_callback(\n    data: &[i32],\n    callback: &Function,  \/\/ JS\u306e\u95a2\u6570\n) {\n    for (i, &value) in data.iter().enumerate() {\n        let this = JsValue::null()\n        let result = JsValue::from(value * 2)\n        let index = JsValue::from(i as u32)\n        \/\/ JS\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u547c\u3073\u51fa\u3059\n        callback.call2(&this, &result, &index).unwrap()\n    }\n}\n\n\/\/ \u9032\u6357\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3064\u304d\u306e\u91cd\u3044\u51e6\u7406\n#[wasm_bindgen]\npub fn heavy_computation(\n    n: u32,\n    on_progress: Option,  \/\/ \u30aa\u30d7\u30b7\u30e7\u30ca\u30eb\u306a\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\n) -> f64 {\n    let mut result = 0.0\n    for i in 0..n {\n        \/\/ \u91cd\u3044\u8a08\u7b97...\n        result += (i as f64).sqrt()\n\n        \/\/ 100\u56de\u306b1\u56de\u30d7\u30ed\u30b0\u30ec\u30b9\u5831\u544a\n        if i % (n \/ 100) == 0 {\n            if let Some(ref cb) = on_progress {\n                let progress = JsValue::from((i as f64 \/ n as f64) * 100.0)\n                let _ = cb.call1(&JsValue::null(), &progress)\n            }\n        }\n    }\n    result\n}<\/code><\/pre>\n\n\n\n
    >\/\/ JavaScript \u5074 - \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u6e21\u3059\nimport init, { process_with_callback, heavy_computation } from '.\/pkg\/my_wasm.js'\nawait init()\n\n\/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u6e21\u3059\nconst results = []\nprocess_with_callback(\n  new Int32Array([1, 2, 3, 4, 5]),\n  (doubled, index) => {\n    results.push({ index, doubled })\n    console.log(`index=${index}: ${doubled}`)\n  }\n)\nconsole.log(results)\n\/\/ \u2192 [{ index: 0, doubled: 2 }, { index: 1, doubled: 4 }, ...]\n\n\/\/ \u9032\u6357\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u4ed8\u304d\u306e\u91cd\u3044\u8a08\u7b97\nconst progressBar = document.getElementById('progress')\nconst result = heavy_computation(1_000_000, (progress) => {\n  progressBar.style.width = `${progress}%`\n  progressBar.textContent = `${progress.toFixed(0)}%`\n})\nconsole.log('\u8a08\u7b97\u7d50\u679c:', result)<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    C\/C++\uff08Emscripten\uff09\u3067\u306e\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057<\/h2>\n\n\n\n
    >\/\/ C++ \u306e\u30b3\u30fc\u30c9\u3092 Emscripten \u3067Wasm\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\n\n\/\/ module.cpp\n#include \n#include \n#include \n#include \n\n\/\/ \u6587\u5b57\u5217\u3092\u53d7\u3051\u53d6\u308b\u95a2\u6570\nstd::string greet(const std::string& name) {\n    return \"Hello, \" + name + \"!\";\n}\n\n\/\/ \u30d9\u30af\u30bf\u30fc\u3092\u53d7\u3051\u53d6\u308b\u95a2\u6570\nfloat calculate_average(const std::vector& values) {\n    if (values.empty()) return 0.0f;\n    float sum = 0;\n    for (float v : values) sum += v;\n    return sum \/ values.size();\n}\n\n\/\/ embind \u3067JS\u306b\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u751f\u6210\nEMSCRIPTEN_BINDINGS(my_module) {\n    emscripten::function(\"greet\", &greet);\n    emscripten::function(\"calculate_average\", &calculate_average);\n    emscripten::register_vector(\"FloatVector\");\n}\n\n\/\/ \u30b3\u30f3\u30d1\u30a4\u30eb\u30b3\u30de\u30f3\u30c9\n\/\/ emcc module.cpp -o module.js \\\n\/\/   -lembind \\\n\/\/   -s WASM=1 \\\n\/\/   -s EXPORTED_RUNTIME_METHODS='[\"ccall\",\"cwrap\"]' \\\n\/\/   -s ALLOW_MEMORY_GROWTH=1<\/code><\/pre>\n\n\n\n
    >\/\/ Emscripten \u3067\u751f\u6210\u3055\u308c\u305fJS\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u3046\nimport Module from '.\/module.js'\n\nconst instance = await Module()\n\n\/\/ \u6587\u5b57\u5217\u3092\u6e21\u3059\uff08embind \u304c\u81ea\u52d5\u5909\u63db\uff09\nconst greeting = instance.greet('World')\nconsole.log(greeting)  \/\/ \u2192 \"Hello, World!\"\n\n\/\/ FloatVector\uff08C++\u306evector\uff09\u3092\u4f7f\u3046\nconst vec = new instance.FloatVector()\nvec.push_back(1.5)\nvec.push_back(2.5)\nvec.push_back(3.5)\n\nconst avg = instance.calculate_average(vec)\nconsole.log(avg)  \/\/ \u2192 2.5\n\n\/\/ \u30e1\u30e2\u30ea\u89e3\u653e\uff08\u91cd\u8981\uff01\uff09\nvec.delete()\n\n\/\/ ccall\/cwrap \u3092\u4f7f\u3046\u4f4e\u30ec\u30d9\u30eb\u306a\u65b9\u6cd5\nconst add = instance.cwrap('add', 'number', ['number', 'number'])\nconsole.log(add(3, 4))  \/\/ \u2192 7<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30e1\u30e2\u30ea\u7ba1\u7406\u3068\u30ea\u30fc\u30af\u9632\u6b62<\/h2>\n\n\n\n
    >\/\/ Rust + wasm-bindgen: \u6240\u6709\u6a29\u3068\u30e1\u30e2\u30ea\u7ba1\u7406\n\n\/\/ wasm-bindgen\u3092\u4f7f\u3046\u3068 Rust \u306e\u6240\u6709\u6a29\u30b7\u30b9\u30c6\u30e0\u306b\u3088\u308a\n\/\/ \u30e1\u30e2\u30ea\u7ba1\u7406\u306f\u81ea\u52d5\u5316\u3055\u308c\u308b\uff08\u30ac\u30d9\u30fc\u30b8\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u4e0d\u8981\uff09\n\/\/ \u2192 Vec\u306fWasm\u5185\u3067\u751f\u6210\u30fb\u7834\u68c4\u3055\u308c\u308b\uff08\u81ea\u52d5\uff09\n\n\/\/ \u305f\u3060\u3057\u3001Rust\u3067#[wasm_bindgen]\u3092\u4ed8\u3051\u305fstruct\u306f\u6ce8\u610f\u304c\u5fc5\u8981\n#[wasm_bindgen]\npub struct DataProcessor {\n    data: Vec,\n    result: Option,\n}\n\n#[wasm_bindgen]\nimpl DataProcessor {\n    \/\/ \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\n    #[wasm_bindgen(constructor)]\n    pub fn new() -> Self {\n        DataProcessor { data: Vec::new(), result: None }\n    }\n\n    pub fn add_data(&mut self, value: f64) {\n        self.data.push(value)\n    }\n\n    pub fn compute(&mut self) -> f64 {\n        let mean = self.data.iter().sum::() \/ self.data.len() as f64;\n        self.result = Some(mean);\n        mean\n    }\n\n    \/\/ \u660e\u793a\u7684\u306a\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\uff08free()\u30e1\u30bd\u30c3\u30c9\uff09\n    pub fn clear(&mut self) {\n        self.data.clear();\n        self.result = None;\n    }\n}\n\n\/\/ JavaScript \u5074 - Wasm\u306eStruct\u3092\u4f7f\u3046\u5834\u5408\u306ffree()\u3092\u547c\u3076\u5fc5\u8981\u304c\u3042\u308b\nimport init, { DataProcessor } from '.\/pkg\/my_wasm.js'\nawait init()\n\nconst processor = new DataProcessor()\n\ntry {\n  processor.add_data(1.5)\n  processor.add_data(2.5)\n  processor.add_data(3.5)\n  const mean = processor.compute()\n  console.log('\u5e73\u5747:', mean)  \/\/ \u2192 2.5\n} finally {\n  \/\/ Wasm\u306e\u30e1\u30e2\u30ea\u3092\u89e3\u653e\uff08\u91cd\u8981\uff01\uff09\n  \/\/ wasm-bindgen\u304c\u751f\u6210\u3059\u308bstruct\u306ffree()\u304c\u5fc5\u8981\n  processor.free()\n}\n\n\/\/ ===== \u4e00\u822c\u7684\u306a\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u9632\u6b62\u30d1\u30bf\u30fc\u30f3 =====\n\/\/ 1. wasm-bindgen\u306estruct\u306f\u5fc5\u305a .free() \u3092\u547c\u3076\n\/\/ 2. Emscripten\u306evector\u306f\u5fc5\u305a .delete() \u3092\u547c\u3076\n\/\/ 3. \u624b\u52d5\u30e1\u30e2\u30ea\u7ba1\u7406\u306e\u5834\u5408\u306f alloc\/dealloc \u3092\u5bfe\u3067\u4f7f\u3046\n\/\/ 4. \u91cd\u3044\u51e6\u7406\u306fWeb Worker\u3067\u5b9f\u884c\uff08\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306e\u30e1\u30e2\u30ea\u7bc0\u7d04\uff09<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    TypeScript\u578b\u5b9a\u7fa9\u306e\u81ea\u52d5\u751f\u6210<\/h2>\n\n\n\n
    >\/\/ wasm-bindgen\u306fTypeScript\u306e\u578b\u5b9a\u7fa9(.d.ts)\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\n\n\/\/ wasm-pack \u30d3\u30eb\u30c9\u5f8c\u306b\u751f\u6210\u3055\u308c\u308b my_wasm.d.ts\uff08\u4f8b\uff09\n\/* tslint:disable *\/\n\/* eslint-disable *\/\n\n\/**\n * WASM\u30e2\u30b8\u30e5\u30fc\u30eb\u521d\u671f\u5316\n * @param {RequestInfo | URL | BufferSource | WebAssembly.Module} input\n *\/\nexport default function init(input?: RequestInfo | URL | BufferSource | WebAssembly.Module): Promise\n\nexport interface InitOutput {\n  readonly memory: WebAssembly.Memory\n  readonly add: (a: number, b: number) => number\n  readonly square: (a: number) => number\n  readonly greet: (a: number, b: number) => [number, number]\n  readonly process_bytes: (a: number, b: number) => [number, number, number]\n  readonly analyze_user: (a: number, b: number) => [number, number]\n  readonly __wbg_dataprocessor_free: (a: number, b: number) => void\n  readonly dataprocessor_new: () => number\n  readonly dataprocessor_add_data: (a: number, b: number) => void\n  readonly dataprocessor_compute: (a: number) => number\n  \/\/ ...\u305d\u306e\u4ed6\u306e\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\n}\n\n\/\/ \u578b\u5b89\u5168\u306a\u30a4\u30f3\u30dd\u30fc\u30c8\u3068\u4f7f\u7528\nimport init, { add, square, greet, DataProcessor } from '.\/pkg\/my_wasm'\n\n\/\/ \u578b\u88dc\u5b8c\u304c\u52b9\u304f\uff01\nconst result: number = add(3, 4)\nconst msg: string = greet('World')\n\nconst processor = new DataProcessor()\nprocessor.add_data(1.5)  \/\/ TypeScript\u304c\u5f15\u6570\u306e\u578b\u3092\u30c1\u30a7\u30c3\u30af\nconst mean: number = processor.compute()\nprocessor.free()<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a08\u6e2c\u3068\u6700\u9069\u5316\u306e\u30d2\u30f3\u30c8<\/h2>\n\n\n\n
    >\/\/ \u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3092\u8a08\u6e2c\n\n\/\/ \u5404\u65b9\u6cd5\u306e\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u6bd4\u8f03\nconst N = 1000000  \/\/ 100\u4e07\u8981\u7d20\n\n\/\/ ===== \u65b9\u6cd51: \u30d7\u30ea\u30df\u30c6\u30a3\u30d6\uff08\u6700\u901f\uff09=====\nconst start1 = performance.now()\nfor (let i = 0; i < 1000; i++) {\n  wasmAdd(i, i + 1)  \/\/ \u6570\u5024\u306e\u307f: \u307b\u307c\u30bc\u30ed\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\n}\nconsole.log(`\u30d7\u30ea\u30df\u30c6\u30a3\u30d6: ${performance.now() - start1}ms`)\n\n\/\/ ===== \u65b9\u6cd52: TypedArray\uff08\u307b\u307c\u7121\u30b3\u30b9\u30c8\uff09=====\nconst data = new Float64Array(N)\ndata.fill(1.5)\n\nconst start2 = performance.now()\nconst result = wasmProcessArray(data)  \/\/ Uint8Array\u3078\u306e\u53c2\u7167\u6e21\u3057: \u9ad8\u901f\nconsole.log(`TypedArray: ${performance.now() - start2}ms`)\n\n\/\/ ===== \u65b9\u6cd53: JSON\u5909\u63db\uff08\u6700\u3082\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3042\u308a\uff09=====\nconst obj = { values: Array.from({ length: 1000 }, (_, i) => i) }\n\nconst start3 = performance.now()\nfor (let i = 0; i < 100; i++) {\n  const json = JSON.stringify(obj)  \/\/ \u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\n  wasmProcessJson(json)\n  JSON.parse(wasmGetResult())      \/\/ \u30c7\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\n}\nconsole.log(`JSON\u7d4c\u7531: ${performance.now() - start3}ms`)\n\n\/\/ \u6700\u9069\u5316\u306e\u30d2\u30f3\u30c8:\n\/\/ 1. \u5927\u91cf\u30c7\u30fc\u30bf\u306f TypedArray (Uint8Array\/Float64Array) \u3067\u6e21\u3059\n\/\/ 2. \u983b\u7e41\u306b\u547c\u3073\u51fa\u3059\u95a2\u6570\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092Wasm\u5074\u3067\u4fdd\u6301\uff08DataProcessor \u30d1\u30bf\u30fc\u30f3\uff09\n\/\/ 3. SharedArrayBuffer \u3067\u30b3\u30d4\u30fc\u3092\u5b8c\u5168\u306b\u6392\u9664\n\/\/ 4. \u5c0f\u3055\u306a\u30c7\u30fc\u30bf\u306f JSON \u3067\u3082\u554f\u984c\u306a\u3057\uff081KB\u4ee5\u4e0b\uff09<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u3088\u304f\u3042\u308b\u8cea\u554f<\/h2>\n\n\n\n
    Wasm\u304b\u3089DOM\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
    \u76f4\u63a5\u306f\u3067\u304d\u307e\u305b\u3093\u3002Wasm\u306fDOM API\u3092\u76f4\u63a5\u547c\u3073\u51fa\u3059\u6a5f\u80fd\u3092\u6301\u3063\u3066\u3044\u307e\u305b\u3093\u3002wasm-bindgen\u3092\u4f7f\u3046\u3068\u3001JavaScript\u306eDOM\u64cd\u4f5c\u95a2\u6570\u3092Wasm\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001Rust\u306e\u30b3\u30fc\u30c9\u304b\u3089indirect\u7684\u306bDOM\u3092\u64cd\u4f5c\u3067\u304d\u307e\u3059<\/strong>\u3002web_sys<\/code>\u30af\u30ec\u30fc\u30c8\u3092\u4f7f\u3046\u3068document.getElementById()<\/code>\u3084element.set_inner_html()<\/code>\u306a\u3069\u306eDOM\u64cd\u4f5c\u3092Rust\u304b\u3089\u547c\u3073\u51fa\u305b\u307e\u3059\u3002\u305f\u3060\u3057\u983b\u7e41\u306aDOM\u64cd\u4f5c\u306fJS\u3068\u306e\u5883\u754c\u30b3\u30b9\u30c8\u304c\u304b\u304b\u308b\u305f\u3081\u3001\u8a08\u7b97\u51e6\u7406\u306fWasm\u30fbUI\u66f4\u65b0\u306fJS\u3068\u3044\u3046\u5206\u62c5\u304c\u52b9\u7387\u7684\u3067\u3059\u3002<\/p>\n\n\n\n
    wasm-pack \u3068 wasm-bindgen \u306e\u9055\u3044\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
    wasm-bindgen<\/strong>\u306fRust\u306e\u30b3\u30fc\u30c9\u3068JavaScript\u9593\u306e\u578b\u5909\u63db\u30fb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u751f\u6210\u3092\u884c\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002wasm-pack<\/strong>\u306fwasm-bindgen\u3092\u6d3b\u7528\u3057\u3066Wasm\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u306e\u30d3\u30eb\u30c9\u30fb\u30c6\u30b9\u30c8\u30fb\u30d1\u30c3\u30b1\u30fc\u30b8\u30f3\u30b0\uff08npm\u516c\u958b\uff09\u3092\u884c\u3046CLI\u30c4\u30fc\u30eb\u3067\u3059\u3002\u5b9f\u969b\u306e\u958b\u767a\u3067\u306fwasm-pack build<\/code>\u30b3\u30de\u30f3\u30c9\u3067\u30d3\u30eb\u30c9\u3059\u308b\u3068\u3001wasm-bindgen\u306e\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u751f\u6210\u30fbTypeScript\u578b\u5b9a\u7fa9\u306e\u51fa\u529b\u30fbnpm\u7528\u306epackage.json\u751f\u6210\u307e\u3067\u4e00\u62ec\u3067\u884c\u308f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
    Wasm\u3068JS\u306e\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\u306f\u3069\u306e\u304f\u3089\u3044\u9045\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
    \u6570\u5024\u306e\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u306f\u307b\u307c\u30bc\u30ed\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3067\u3059\u3002\u6587\u5b57\u5217\u306fUTF-8\u30a8\u30f3\u30b3\u30fc\u30c9\u30fb\u30c7\u30b3\u30fc\u30c9\u3068\u30e1\u30e2\u30ea\u30b3\u30d4\u30fc\u304c\u767a\u751f\u3059\u308b\u305f\u3081\u3001\u77ed\u3044\u6587\u5b57\u5217\uff08\u6570\u5341\u30d0\u30a4\u30c8\uff09\u3067\u6570\u30de\u30a4\u30af\u30ed\u79d2\u7a0b\u5ea6\u306e\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u304c\u3042\u308a\u307e\u3059\u3002\u5927\u304d\u306aTypedArray\uff08\u6570MB\uff09\u306f\u53c2\u7167\u6e21\u3057\u3067\u9ad8\u901f\u3067\u3059\u304c\u3001wasm-bindgen\u3092\u901a\u3058\u308b\u3068\u5185\u90e8\u3067\u30b3\u30d4\u30fc\u304c\u767a\u751f\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u6700\u91cd\u8981\u306a\u5834\u5408\u306fSharedArrayBuffer\u3092\u4f7f\u3063\u305f\u30bc\u30ed\u30b3\u30d4\u30fc\u5171\u6709\u304c\u6700\u3082\u52b9\u7387\u7684<\/strong>\u3067\u3059\u3002<\/p>\n\n\n\n
    SharedArrayBuffer\u3092\u4f7f\u3046\u305f\u3081\u306b\u5fc5\u8981\u306aHTTP\u30d8\u30c3\u30c0\u30fc\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
    SharedArrayBuffer\u3092\u4f7f\u7528\u3059\u308b\u306b\u306fCross-Origin Isolation\uff08\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\uff09\u304c\u5fc5\u8981\u3067\u3059\u3002\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u4ee5\u4e0b\u306eHTTP\u30d8\u30c3\u30c0\u30fc\u3092\u9001\u4fe1\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n