{"id":13185,"date":"2026-03-17T06:23:28","date_gmt":"2026-03-17T06:23:28","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=13185"},"modified":"2026-07-01T15:28:33","modified_gmt":"2026-07-01T15:28:33","slug":"sharedarraybuffer-coop-coep","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/sharedarraybuffer-coop-coep\/","title":{"rendered":"SharedArrayBuffer\u3068\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\uff08COOP\/COEP\uff09\u306e\u5b9f\u88c5\u65b9\u6cd5\u3010\u5b8c\u5168\u30ac\u30a4\u30c9\u3011\uff5cWeb Workers\u4e26\u5217\u51e6\u7406\u30fbAtomics API\u3092\u5fb9\u5e95\u89e3\u8aac"},"content":{"rendered":"\n
\n\n

\u3053\u306e\u8a18\u4e8b\u3067\u308f\u304b\u308b\u3053\u3068<\/h3>\n\n\n
    \n
  • SharedArrayBuffer\u3068\u306f\u4f55\u304b\u30fb\u901a\u5e38\u306epostMessage\u3068\u306e\u9055\u3044<\/li>\n
  • \u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\uff08COOP\/COEP\uff09\u304c\u5fc5\u8981\u306a\u7406\u7531\u3068Spectre\u8106\u5f31\u6027\u3068\u306e\u95a2\u4fc2<\/li>\n
  • Next.js\u30fbNginx\u30fbVercel\u30fbApache\u30fbCaddy\u3067\u306eCOOP\/COEP\u30d8\u30c3\u30c0\u30fc\u8a2d\u5b9a\u65b9\u6cd5<\/li>\n
  • Atomics API\u3092\u4f7f\u3063\u305f\u4e26\u5217\u51e6\u7406\u3068Mutex\u30d1\u30bf\u30fc\u30f3\u306e\u5b9f\u88c5<\/li>\n
  • \u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u306e\u4e92\u63db\u6027\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/li>\n<\/ul>\n\n<\/div><\/div>\n\n\n
    \"\"\u751f\u5f92<\/span><\/div>
    \n

    Web Workers\u3067SharedArrayBuffer\u3092\u4f7f\u304a\u3046\u3068\u3057\u305f\u3089\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u300cSharedArrayBuffer is not defined\u300d\u3063\u3066\u2026\u2026<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n

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

    Spectre\u8106\u5f31\u6027\u5bfe\u7b56\u3067SharedArrayBuffer\u306f\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u3055\u308c\u305f\u74b0\u5883\u3067\u3057\u304b\u4f7f\u3048\u306a\u304f\u306a\u3063\u305f\u3093\u3058\u3083\u3002COOP\uff08Cross-Origin-Opener-Policy\uff09\u3068COEP\uff08Cross-Origin-Embedder-Policy\uff09\u3068\u3044\u30462\u3064\u306eHTTP\u30d8\u30c3\u30c0\u30fc\u3092\u8a2d\u5b9a\u3059\u308c\u3070\u89e3\u6c7a\u3067\u304d\u308b\u305e\u3002\u30b5\u30fc\u30d0\u30fc\u306e\u8a2d\u5b9a\u304c\u5fc5\u8981\u3058\u3083\u304c\u624b\u9806\u3092\u899a\u3048\u308c\u3070\u7c21\u5358\u306a\u3093\u3058\u3083\uff01<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n

    SharedArrayBuffer\u306f\u8907\u6570\u306eWeb Workers\u9593\u3067\u30e1\u30e2\u30ea\u3092\u5171\u6709\u3057\u3001\u771f\u306e\u4e26\u5217\u51e6\u7406\u3092\u5b9f\u73fe\u3059\u308b<\/strong>JavaScript API\u3067\u3059\u3002\u3057\u304b\u30572018\u5e74\u306eSpectre\u8106\u5f31\u6027\u767a\u898b\u3092\u53d7\u3051\u3066\u30c7\u30d5\u30a9\u30eb\u30c8\u7121\u52b9\u5316\u3055\u308c\u3001\u73fe\u5728\u306f\u300c\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u300d\u74b0\u5883\u3067\u306e\u307f\u4f7f\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n

    \u672c\u8a18\u4e8b\u3067\u306f\u3001SharedArrayBuffer\u306e\u6982\u8981\u30fb\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u3068\u306f\u4f55\u304b\u30fbCOOP\/COEP\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a\uff08Next.js\u30fbNginx\u30fbVercel\u30fbApache\u30fbCaddy\uff09\u30fbAtomics API\u306b\u3088\u308b\u7af6\u5408\u56de\u907f\u30fbMutex\u30d1\u30bf\u30fc\u30f3\u30fb\u5b9f\u8df5\u7684\u306a\u4e26\u5217\u51e6\u7406\u306e\u5b9f\u88c5\u30fb\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u306e\u4e92\u63db\u6027\u554f\u984c<\/span><\/strong>\u3092\u5b8c\u5168\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \n\n\n\n

    SharedArrayBuffer\u3068\u306f\uff5c\u901a\u5e38\u306epostMessage\u3068\u4f55\u304c\u9055\u3046\u306e\u304b<\/h2>\n\n\n\n

    SharedArrayBuffer\u306fES2017\u3067\u8ffd\u52a0\u3055\u308c\u305fJavaScript API\u3067\u3001\u8907\u6570\u306eWorker\u304c\u540c\u4e00\u306e\u30e1\u30e2\u30ea\u9818\u57df\u3092\u5171\u6709\u3057\u3066\u8aad\u307f\u66f8\u304d\u3067\u304d\u308b\u4ed5\u7d44\u307f<\/strong>\u3067\u3059\u3002\u901a\u5e38\u306epostMessage\u304c\u30c7\u30fc\u30bf\u306e\u30b3\u30d4\u30fc\u3092\u4f5c\u6210\u3057\u3066\u8ee2\u9001\u3059\u308b\u306e\u306b\u5bfe\u3057\u3001SharedArrayBuffer\u306f\u30e1\u30e2\u30ea\u306e\u53c2\u7167\u3092\u5171\u6709\u3059\u308b\u305f\u3081\u3001\u30b3\u30d4\u30fc\u30b3\u30b9\u30c8\u304c\u30bc\u30ed\u3067\u3059\u3002<\/p>\n\n\n\n

    \u65b9\u5f0f<\/th>\u4ed5\u7d44\u307f<\/th>\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf<\/th>\u53cc\u65b9\u5411\u66f4\u65b0<\/th>\u9069\u3057\u305f\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9<\/th><\/tr><\/thead>
    postMessage\uff08\u30b3\u30d4\u30fc\uff09<\/strong><\/td>\u69cb\u9020\u5316\u30af\u30ed\u30fc\u30f3\u3067\u30c7\u30fc\u30bf\u3092\u30b3\u30d4\u30fc\u3057\u3066\u9001\u4fe1<\/td>2\u500d\uff08\u30b3\u30d4\u30fc\u5206\uff09<\/td>\u53ef\u80fd\uff08\u6bce\u56de\u30b3\u30d4\u30fc\uff09<\/td>\u5c0f\u301c\u4e2d\u898f\u6a21\u30c7\u30fc\u30bf\u306e\u4e00\u6642\u7684\u306a\u53d7\u3051\u6e21\u3057<\/td><\/tr>
    Transferable\uff08\u6240\u6709\u6a29\u79fb\u8ee2\uff09<\/strong><\/td>ArrayBuffer\u306e\u6240\u6709\u6a29\u3092\u79fb\u8ee2\uff08\u30b3\u30d4\u30fc\u306a\u3057\uff09<\/td>\u5909\u308f\u3089\u305a<\/td>\u4e0d\u53ef\uff08\u5143\u30b9\u30ec\u30c3\u30c9\u3067\u4f7f\u3048\u306a\u304f\u306a\u308b\uff09<\/td>\u5927\u91cf\u30c7\u30fc\u30bf\u3092\u4e00\u65b9\u5411\u306b\u6e21\u3059<\/td><\/tr>
    SharedArrayBuffer\uff08\u5171\u6709\u30e1\u30e2\u30ea\uff09<\/strong><\/td>\u8907\u6570\u306eWorker\u304c\u540c\u3058\u30e1\u30e2\u30ea\u7a7a\u9593\u3092\u53c2\u7167<\/td>\u5909\u308f\u3089\u305a<\/td>\u53ef\u80fd\uff08\u30b3\u30d4\u30fc\u306a\u3057\uff09<\/td>Worker\u304c\u540c\u3058\u30d0\u30c3\u30d5\u30a1\u3092\u4e26\u5217\u8aad\u307f\u66f8\u304d\u3059\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    >\u3010SharedArrayBuffer\u304c\u7279\u306b\u6709\u52b9\u306a\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u3011\n\n\u2705 \u5927\u91cf\u30c7\u30fc\u30bf\u306eWorker\u9593\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u5171\u6709\n\u2705 \u8907\u6570Worker\u3067\u5206\u62c5\u3057\u30661\u3064\u306e\u30d0\u30c3\u30d5\u30a1\u3092\u4e26\u5217\u51e6\u7406\n\u2705 WebAssembly\u306e\u4e26\u5217\u51e6\u7406\uff08Emscripten\u306e-s USE_PTHREADS=1\uff09\n\u2705 \u983b\u7e41\u306a\u53cc\u65b9\u5411\u306e\u30c7\u30fc\u30bf\u66f4\u65b0\uff08\u30b2\u30fc\u30e0\u306e\u72b6\u614b\u540c\u671f\u306a\u3069\uff09<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u3068\u306f\uff5c\u306a\u305cCOOP\/COEP\u304c\u5fc5\u8981\u304b<\/h2>\n\n\n\n
    2018\u5e741\u6708\u3001Spectre\u8106\u5f31\u6027<\/strong>\uff08CVE-2018-3640\u7b49\uff09\u304c\u516c\u958b\u3055\u308c\u307e\u3057\u305f\u3002SharedArrayBuffer\u3092\u4f7f\u3046\u3068JavaScript\u3067\u9ad8\u7cbe\u5ea6\u306a\u30bf\u30a4\u30de\u30fc\u3092\u4f5c\u6210\u3067\u304d\u3001CPU\u306e\u30b5\u30a4\u30c9\u30c1\u30e3\u30cd\u30eb\u653b\u6483\u306b\u3088\u308a\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u306e\u30c7\u30fc\u30bf\uff08\u30d1\u30b9\u30ef\u30fc\u30c9\u30fbCookie\u306a\u3069\uff09\u3092\u8aad\u307f\u53d6\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    \u3053\u306e\u8106\u5f31\u6027\u3078\u306e\u5bfe\u7b56\u3068\u3057\u3066\u3001Chrome\u306fSharedArrayBuffer\u3092\u5b8c\u5168\u306b\u7121\u52b9\u5316\u3057\u307e\u3057\u305f\uff082018\u301c2021\u5e74\uff09\u30022021\u5e74\u4ee5\u964d\u3001\u300c\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u300d\u3068\u3044\u3046\u65b0\u3057\u3044\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30e2\u30c7\u30eb\u304c\u5c0e\u5165\u3055\u308c\u3001\u3053\u308c\u3092\u6709\u52b9\u306b\u3057\u305f\u74b0\u5883\u3067\u306e\u307fSharedArrayBuffer\u304c\u518d\u3073\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n
    \n
    \"\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\uff08COOP\/COEP\uff09\u306e\u4ed5\u7d44\u307f\u3092\u793a\u3059\u56f3\"<\/figure>\n<\/div>\n\n\n
    >\u3010\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u3092\u6709\u52b9\u306b\u3059\u308b\u305f\u3081\u306e2\u3064\u306e\u30d8\u30c3\u30c0\u30fc\u3011\n\n1. COOP (Cross-Origin-Opener-Policy)\n   \u5024: \"same-origin\"\n   \u52b9\u679c: \u4ed6\u30aa\u30ea\u30b8\u30f3\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30a6\u30a3\u30f3\u30c9\u30a6\u3068\u306e\u30d6\u30e9\u30a6\u30b8\u30f3\u30b0\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30b0\u30eb\u30fc\u30d7\u3092\u5206\u96e2\n   \u2192 window.opener \u3067\u5225\u30aa\u30ea\u30b8\u30f3\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u306a\u304f\u306a\u308b\n   \u2192 SNS\u30ed\u30b0\u30a4\u30f3\uff08OAuth\uff09\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306b\u306f\u6ce8\u610f\u304c\u5fc5\u8981\n\n2. COEP (Cross-Origin-Embedder-Policy)\n   \u5024: \"require-corp\"\uff08\u307e\u305f\u306f\u65b0\u3057\u3044 \"credentialless\"\uff09\n   \u52b9\u679c: \u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u30ea\u30bd\u30fc\u30b9\u306e\u8aad\u307f\u8fbc\u307f\u306b CORP \u30d8\u30c3\u30c0\u30fc\u307e\u305f\u306f CORS \u3092\u8981\u6c42\n   \u2192 \u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u753b\u50cf\u3084\u52d5\u753b\u306f cors \u307e\u305f\u306f credentialless \u5c5e\u6027\u304c\u5fc5\u8981\u306b\u306a\u308b\n   \u2192 \u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u306f\u8aad\u307f\u8fbc\u3081\u306a\u304f\u306a\u308b\n\n\u6709\u52b9\u5316\u306e\u78ba\u8a8d\uff1a\nconsole.log(crossOriginIsolated)  \/\/ \u2192 true \u306a\u3089\u6709\u52b9\n\/\/ \u2192 performance.now() \u306e\u7cbe\u5ea6\u3082\u4e0a\u304c\u308b\uff08Spectre\u306e\u653b\u6483\u9762\u3092\u72ed\u3081\u308b\u305f\u3081\u5236\u9650\u3055\u308c\u3066\u3044\u305f\u3082\u306e\u304c\u89e3\u9664\uff09\n\n\u91cd\u8981\uff1a\u3053\u306e2\u3064\u306e\u30d8\u30c3\u30c0\u30fc\u3092\u4e21\u65b9\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067 crossOriginIsolated = true \u306b\u306a\u308b<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u5404\u30b5\u30fc\u30d0\u30fc\u30fb\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u306eCOOP\/COEP\u8a2d\u5b9a\u65b9\u6cd5<\/h2>\n\n\n\n
    Next.js\uff08next.config.ts\uff09<\/h3>\n\n\n\n
    >\/\/ next.config.ts\n\nimport type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  async headers() {\n    return [\n      {\n        \/\/ \u5168\u30da\u30fc\u30b8\u306b\u30d8\u30c3\u30c0\u30fc\u3092\u9069\u7528\n        source: '\/(.*)',\n        headers: [\n          {\n            key: 'Cross-Origin-Opener-Policy',\n            value: 'same-origin',\n          },\n          {\n            key: 'Cross-Origin-Embedder-Policy',\n            \/\/ credentialless \u306f Google Fonts\u7b49\u306e\u4e00\u90e8\u306e\u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u3068\u4e92\u63db\u6027\u304c\u3042\u308b\n            \/\/ require-corp \u306f\u6700\u3082\u53b3\u683c\uff08\u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u306bCORP\u30d8\u30c3\u30c0\u30fc\u304c\u5fc5\u8981\uff09\n            value: 'credentialless',\n          },\n        ],\n      },\n    ]\n  },\n}\n\nexport default nextConfig<\/code><\/pre>\n\n\n\n
    Nginx<\/h3>\n\n\n\n
    ># \/etc\/nginx\/conf.d\/default.conf\n\nserver {\n    listen 443 ssl http2;\n    server_name example.com;\n\n    ssl_certificate \/etc\/letsencrypt\/live\/example.com\/fullchain.pem;\n    ssl_certificate_key \/etc\/letsencrypt\/live\/example.com\/privkey.pem;\n\n    # COOP\/COEP \u30d8\u30c3\u30c0\u30fc\u3092\u8ffd\u52a0\n    add_header Cross-Origin-Opener-Policy \"same-origin\" always;\n    add_header Cross-Origin-Embedder-Policy \"credentialless\" always;\n\n    # WebAssembly \u30d5\u30a1\u30a4\u30eb\u306eMIME\u30bf\u30a4\u30d7\u8a2d\u5b9a\uff08Wasm\u3092\u4f7f\u3046\u5834\u5408\u306b\u5fc5\u8981\uff09\n    types {\n        application\/wasm wasm;\n    }\n\n    # \u30b9\u30bf\u30c6\u30a3\u30c3\u30af\u30d5\u30a1\u30a4\u30eb\u914d\u4fe1\n    root \/var\/www\/html;\n    index index.html;\n\n    location \/ {\n        try_files $uri $uri\/ \/index.html;\n    }\n\n    # API\u30ea\u30d0\u30fc\u30b9\u30d7\u30ed\u30ad\u30b7\uff08\u30aa\u30ea\u30b8\u30f3\u30b5\u30fc\u30d0\u30fc\u3078\u306e\u8ee2\u9001\uff09\n    location \/api\/ {\n        proxy_pass http:\/\/backend:3000\/;\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n    }\n}<\/code><\/pre>\n\n\n\n
    Vercel\uff08vercel.json\uff09<\/h3>\n\n\n\n
    >{\n  \"headers\": [\n    {\n      \"source\": \"\/(.*)\",\n      \"headers\": [\n        { \"key\": \"Cross-Origin-Opener-Policy\", \"value\": \"same-origin\" },\n        { \"key\": \"Cross-Origin-Embedder-Policy\", \"value\": \"credentialless\" }\n      ]\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
    Apache\uff08.htaccess\uff09<\/h3>\n\n\n\n
    ># .htaccess\n\n\n    Header always set Cross-Origin-Opener-Policy \"same-origin\"\n    Header always set Cross-Origin-Embedder-Policy \"credentialless\"\n<\/IfModule>\n\n# MIME \u30bf\u30a4\u30d7\u306e\u8a2d\u5b9a\uff08.wasm \u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u3046\u5834\u5408\uff09\n\n    AddType application\/wasm .wasm\n<\/IfModule><\/code><\/pre>\n\n\n\n
    Caddy\uff08Caddyfile\uff09<\/h3>\n\n\n\n
    ># Caddyfile\n\nexample.com {\n    header Cross-Origin-Opener-Policy \"same-origin\"\n    header Cross-Origin-Embedder-Policy \"credentialless\"\n\n    file_server\n    try_files {path} \/index.html\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    SharedArrayBuffer\u306e\u5b9f\u88c5\u30b3\u30fc\u30c9\uff5cAtomics\u306b\u3088\u308b\u4e26\u5217\u51e6\u7406<\/h2>\n\n\n\n
    \u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h3>\n\n\n\n
    >\/\/ main.js - \u5171\u6709\u30d0\u30c3\u30d5\u30a1\u3092Worker\u306b\u6e21\u3059\n\n\/\/ COOP\/COEP \u304c\u6709\u52b9\u304b\u30c1\u30a7\u30c3\u30af\nif (!crossOriginIsolated) {\n  throw new Error(\n    '\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u304c\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u307e\u305b\u3093\u3002\\n' +\n    '\u6b21\u306eHTTP\u30d8\u30c3\u30c0\u30fc\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\uff1a\\n' +\n    '  Cross-Origin-Opener-Policy: same-origin\\n' +\n    '  Cross-Origin-Embedder-Policy: credentialless (\u307e\u305f\u306f require-corp)'\n  )\n}\n\n\/\/ 4 * Int32Array.BYTES_PER_ELEMENT = 16\u30d0\u30a4\u30c8\u306e\u5171\u6709\u30d0\u30c3\u30d5\u30a1\u3092\u4f5c\u6210\nconst sharedBuffer = new SharedArrayBuffer(4 * Int32Array.BYTES_PER_ELEMENT)\nconst sharedArray = new Int32Array(sharedBuffer)\n\n\/\/ \u521d\u671f\u5024\u3092\u8a2d\u5b9a\nsharedArray[0] = 0  \/\/ \u30ab\u30a6\u30f3\u30bf\u30fc\nsharedArray[1] = 0  \/\/ \u30d5\u30e9\u30b0\nsharedArray[2] = 0  \/\/ \u30b9\u30c6\u30fc\u30bf\u30b9\n\nconst worker = new Worker('.\/worker.js', { type: 'module' })\n\n\/\/ Worker\u3068\u5171\u6709\u30d0\u30c3\u30d5\u30a1\u3092\u5171\u6709\uff08\u30b3\u30d4\u30fc\u3067\u306f\u306a\u304f\u53c2\u7167\uff09\nworker.postMessage({ sharedBuffer })\n\n\/\/ Worker\u304b\u3089\u306e\u5b8c\u4e86\u901a\u77e5\u3092\u53d7\u3051\u53d6\u308b\nworker.addEventListener('message', (event) => {\n  console.log('Worker\u5b8c\u4e86:', event.data)\n  console.log('\u5171\u6709\u30d0\u30c3\u30d5\u30a1\u306e\u6700\u7d42\u5024:', sharedArray[0])\n  \/\/ \u2192 Worker\u304c\u66f8\u304d\u8fbc\u3093\u3060\u5024\u304c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u898b\u3048\u308b\n})<\/code><\/pre>\n\n\n\n
    >\/\/ worker.js - \u5171\u6709\u30d0\u30c3\u30d5\u30a1\u306b\u66f8\u304d\u8fbc\u3080\n\naddEventListener('message', (event) => {\n  const { sharedBuffer } = event.data\n  const sharedArray = new Int32Array(sharedBuffer)\n\n  \/\/ Atomics.add \u3067\u539f\u5b50\u7684\u306b\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\uff08\u7af6\u5408\u3092\u9632\u3050\uff09\n  for (let i = 0; i < 10000; i++) {\n    Atomics.add(sharedArray, 0, 1)  \/\/ \u30a4\u30f3\u30c7\u30c3\u30af\u30b90\u306e\u5024\u3092+1\uff08\u539f\u5b50\u7684\u64cd\u4f5c\uff09\n  }\n\n  console.log('Worker\u5b8c\u4e86\u300210000\u56de\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\u3057\u307e\u3057\u305f')\n  postMessage({ done: true, finalValue: Atomics.load(sharedArray, 0) })\n})<\/code><\/pre>\n\n\n\n
    Atomics API\u306e\u4e3b\u8981\u30e1\u30bd\u30c3\u30c9\u4e00\u89a7<\/h3>\n\n\n\n
    \u30e1\u30bd\u30c3\u30c9<\/th>\u8aac\u660e<\/th>\u623b\u308a\u5024<\/th><\/tr><\/thead>
    Atomics.load(array, idx)<\/code><\/td>\u6307\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306e\u5024\u3092\u539f\u5b50\u7684\u306b\u8aad\u307f\u53d6\u308b<\/td>\u8aad\u307f\u53d6\u308a\u524d\u306e\u5024<\/td><\/tr>
    Atomics.store(array, idx, val)<\/code><\/td>\u6307\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306b\u5024\u3092\u539f\u5b50\u7684\u306b\u66f8\u304d\u8fbc\u3080<\/td>\u66f8\u304d\u8fbc\u3093\u3060\u5024<\/td><\/tr>
    Atomics.add(array, idx, val)<\/code><\/td>\u6307\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306b\u5024\u3092\u52a0\u7b97\u3059\u308b<\/td>\u52a0\u7b97\u524d\u306e\u5024<\/td><\/tr>
    Atomics.sub(array, idx, val)<\/code><\/td>\u6307\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u304b\u3089\u5024\u3092\u6e1b\u7b97\u3059\u308b<\/td>\u6e1b\u7b97\u524d\u306e\u5024<\/td><\/tr>
    Atomics.compareExchange(array, idx, expected, replacement)<\/code><\/td>\u671f\u5f85\u5024\u3068\u4e00\u81f4\u3059\u308b\u5834\u5408\u306e\u307f\u7f6e\u63db\u3059\u308b\uff08CAS\u64cd\u4f5c\uff09<\/td>\u7f6e\u63db\u524d\u306e\u5024<\/td><\/tr>
    Atomics.wait(array, idx, val, timeout)<\/code><\/td>\u6307\u5b9a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306e\u5024\u304c\u5909\u308f\u308b\u307e\u3067\u5f85\u6a5f\uff08Worker\u306e\u307fOK\uff09<\/td>'ok'\/'not-equal'\/'timed-out'<\/td><\/tr>
    Atomics.notify(array, idx, count)<\/code><\/td>wait\u3067\u5f85\u6a5f\u3057\u3066\u3044\u308bWorker\u306b\u901a\u77e5\u3059\u308b<\/td>\u901a\u77e5\u3057\u305fWorker\u6570<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u4e26\u5217\u51e6\u7406\u306e\u5b9f\u8df5\u4f8b\uff1a\u5927\u304d\u306a\u914d\u5217\u3092\u8907\u6570Worker\u3067\u4e26\u5217\u51e6\u7406<\/h3>\n\n\n\n
    >\/\/ parallel-main.js - 4\u3064\u306eWorker\u3067\u914d\u5217\u3092\u4e26\u5217\u51e6\u7406\n\nconst SIZE = 1_000_000  \/\/ 100\u4e07\u8981\u7d20\nconst sharedBuffer = new SharedArrayBuffer(SIZE * Float64Array.BYTES_PER_ELEMENT)\nconst sharedData = new Float64Array(sharedBuffer)\n\n\/\/ \u30c7\u30fc\u30bf\u306e\u521d\u671f\u5316\uff08\u4e71\u6570\u3067\u57cb\u3081\u308b\uff09\nfor (let i = 0; i < SIZE; i++) sharedData[i] = Math.random()\n\n\/\/ \u5b8c\u4e86\u30ab\u30a6\u30f3\u30bf\u30fc\u7528\u306e\u5171\u6709\u30d0\u30c3\u30d5\u30a1\uff08\u5225\u306b\u7528\u610f\uff09\nconst counterBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT)\nconst counter = new Int32Array(counterBuffer)\n\n\/\/ 4\u3064\u306eWorker\u3092\u8d77\u52d5\u3057\u3066\u914d\u5217\u3092\u5206\u5272\u51e6\u7406\nconst NUM_WORKERS = 4\nconst chunkSize = SIZE \/ NUM_WORKERS\n\nconst workers = Array.from({ length: NUM_WORKERS }, (_, i) => {\n  const worker = new Worker('.\/parallel-worker.js', { type: 'module' })\n  worker.postMessage({\n    sharedBuffer,    \/\/ \u30c7\u30fc\u30bf\u30d0\u30c3\u30d5\u30a1\uff08\u5171\u6709\uff09\n    counterBuffer,   \/\/ \u5b8c\u4e86\u30ab\u30a6\u30f3\u30bf\u30fc\uff08\u5171\u6709\uff09\n    start: i * chunkSize,\n    end: (i + 1) * chunkSize,\n    workerId: i,\n    numWorkers: NUM_WORKERS,\n  })\n  return worker\n})\n\n\/\/ \u5168Worker\u5b8c\u4e86\u3092\u30dd\u30fc\u30ea\u30f3\u30b0\u3067\u691c\u77e5\nconst checkInterval = setInterval(() => {\n  const doneCount = Atomics.load(counter, 0)\n  if (doneCount === NUM_WORKERS) {\n    clearInterval(checkInterval)\n    console.log('\u5168Worker\u306e\u51e6\u7406\u5b8c\u4e86')\n    console.log('\u5148\u982d10\u4ef6:', Array.from(sharedData.slice(0, 10)))\n    workers.forEach(w => w.terminate())\n  }\n}, 10)<\/code><\/pre>\n\n\n\n
    >\/\/ parallel-worker.js - \u62c5\u5f53\u7bc4\u56f2\u306e\u30c7\u30fc\u30bf\u3092\u51e6\u7406\u3059\u308b\n\naddEventListener('message', (event) => {\n  const { sharedBuffer, counterBuffer, start, end, workerId } = event.data\n  const data = new Float64Array(sharedBuffer)\n  const counter = new Int32Array(counterBuffer)\n\n  \/\/ \u62c5\u5f53\u7bc4\u56f2\u306e\u30c7\u30fc\u30bf\u306b\u5909\u63db\u51e6\u7406\u3092\u9069\u7528\uff08\u4f8b\uff1a2\u4e57\uff09\n  for (let i = start; i < end; i++) {\n    data[i] = data[i] * data[i]\n  }\n\n  console.log(`Worker${workerId}: [${start}\u301c${end}] \u51e6\u7406\u5b8c\u4e86`)\n\n  \/\/ \u5b8c\u4e86\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\uff08\u539f\u5b50\u7684\u64cd\u4f5c\uff09\n  Atomics.add(counter, 0, 1)\n})<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Mutex\u30d1\u30bf\u30fc\u30f3\uff5c\u6392\u4ed6\u5236\u5fa1\u306e\u5b9f\u88c5<\/h2>\n\n\n\n
    \u8907\u6570\u306eWorker\u304c\u540c\u3058\u30e1\u30e2\u30ea\u9818\u57df\u306b\u66f8\u304d\u8fbc\u3080\u5834\u5408\u3001\u300c\u7af6\u5408\u72b6\u614b\uff08Race Condition\uff09\u300d\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002Atomics.compareExchange<\/code>\u3092\u4f7f\u3063\u305fMutex\uff08\u76f8\u4e92\u6392\u9664\u30ed\u30c3\u30af\uff09\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u4e00\u5ea6\u306b1\u3064\u306eWorker\u306e\u307f\u304c\u66f8\u304d\u8fbc\u3081\u308b\u3088\u3046\u306b\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
    >\/\/ mutex.js - SharedArrayBuffer\u3092\u4f7f\u3063\u305fMutex\u306e\u5b9f\u88c5\n\nconst UNLOCKED = 0\nconst LOCKED = 1\n\nexport class Mutex {\n  private lockBuffer: SharedArrayBuffer\n  private lockArray: Int32Array\n\n  constructor() {\n    this.lockBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT)\n    this.lockArray = new Int32Array(this.lockBuffer)\n  }\n\n  get sharedBuffer() {\n    return this.lockBuffer\n  }\n\n  \/\/ \u30ed\u30c3\u30af\u3092\u53d6\u5f97\uff08\u53d6\u5f97\u3067\u304d\u308b\u307e\u3067\u30b9\u30d4\u30f3\uff09\n  lock() {\n    while (true) {\n      \/\/ UNLOCKED \u2192 LOCKED \u306b\u539f\u5b50\u7684\u306b\u5909\u63db\u3067\u304d\u305f\u3089\u30ed\u30c3\u30af\u53d6\u5f97\u6210\u529f\n      const prev = Atomics.compareExchange(this.lockArray, 0, UNLOCKED, LOCKED)\n      if (prev === UNLOCKED) {\n        return  \/\/ \u30ed\u30c3\u30af\u53d6\u5f97\u6210\u529f\n      }\n      \/\/ \u30ed\u30c3\u30af\u53d6\u5f97\u5931\u6557\u306a\u3089\u5f85\u6a5f\u3057\u3066\u518d\u8a66\u884c\n      Atomics.wait(this.lockArray, 0, LOCKED, 10)  \/\/ \u6700\u592710ms\u5f85\u6a5f\n    }\n  }\n\n  \/\/ \u30ed\u30c3\u30af\u3092\u89e3\u653e\n  unlock() {\n    Atomics.store(this.lockArray, 0, UNLOCKED)\n    Atomics.notify(this.lockArray, 0, 1)  \/\/ \u5f85\u6a5f\u4e2d\u306eWorker1\u3064\u306b\u901a\u77e5\n  }\n\n  \/\/ \u30ed\u30c3\u30af\u3057\u3066\u51e6\u7406\u3092\u5b9f\u884c\u3057\u3001\u5b8c\u4e86\u5f8c\u306b\u30a2\u30f3\u30ed\u30c3\u30af\n  withLock(fn: () => T): T {\n    this.lock()\n    try {\n      return fn()\n    } finally {\n      this.unlock()\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    TypeScript\u3067\u306eSharedArrayBuffer\u6d3b\u7528<\/h2>\n\n\n\n
    >\/\/ shared-memory.ts - TypeScript\u3067\u306e\u578b\u4ed8\u304dSharedArrayBuffer\u6d3b\u7528\n\n\/\/ \u578b\u4ed8\u304dSharedArrayBuffer\u30d3\u30e5\u30fc\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\nexport function createSharedBuffer(\n  TypedArrayClass: new (buffer: SharedArrayBuffer) => T,\n  length: number\n): { buffer: SharedArrayBuffer; view: T } {\n  const bytesPerElement = TypedArrayClass.BYTES_PER_ELEMENT\n  const buffer = new SharedArrayBuffer(length * bytesPerElement)\n  const view = new TypedArrayClass(buffer)\n  return { buffer, view }\n}\n\ntype TypedArray = Int8Array | Uint8Array | Int16Array | Uint16Array |\n                 Int32Array | Uint32Array | Float32Array | Float64Array |\n                 BigInt64Array | BigUint64Array\n\n\/\/ \u4f7f\u7528\u4f8b\nconst { buffer: dataBuffer, view: dataView } =\n  createSharedBuffer(Float64Array, 1_000_000)\n\n\/\/ Worker\u306b\u9001\u4fe1\nworker.postMessage({ dataBuffer })\n\n\/\/ Atomics\u3092\u4f7f\u3063\u305f\u5b89\u5168\u306a\u8aad\u307f\u66f8\u304d\u30e9\u30c3\u30d1\u30fc\nexport function atomicUpdate(\n  array: Int32Array,\n  index: number,\n  updater: (current: number) => number\n): number {\n  while (true) {\n    const current = Atomics.load(array, index)\n    const next = updater(current)\n    const prev = Atomics.compareExchange(array, index, current, next)\n    if (prev === current) return next  \/\/ \u6210\u529f\n    \/\/ \u5225Worker\u304c\u5148\u306b\u66f4\u65b0\u3057\u305f\u5834\u5408\u306f\u518d\u8a66\u884c\uff08\u30b9\u30d4\u30f3\u30ed\u30c3\u30af\uff09\n  }\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u306e\u4e92\u63db\u6027\u554f\u984c<\/h2>\n\n\n\n
    COEP\uff08require-corp<\/code>\u307e\u305f\u306fcredentialless<\/code>\uff09\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u306e\u30ea\u30bd\u30fc\u30b9\uff08\u5916\u90e8CDN\u753b\u50cf\u30fbGoogle Fonts\u30fb\u57cb\u3081\u8fbc\u307f\u52d5\u753b\u306a\u3069\uff09\u306e\u8aad\u307f\u8fbc\u307f\u5236\u9650\u304c\u53b3\u3057\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
    >\u3010COEP\u8a2d\u5b9a\u5f8c\u306b\u5f71\u97ff\u3092\u53d7\u3051\u308b\u4e3b\u306a\u30ea\u30bd\u30fc\u30b9\u3068\u89e3\u6c7a\u7b56\u3011\n\n\u274c \u5f71\u97ff\u304c\u51fa\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u3082\u306e\uff1a\n\u2192 \u5916\u90e8CDN\uff08imgix\u30fbCloudinary\u7b49\uff09\u304b\u3089\u306e\u753b\u50cf\n   \u2192 crossorigin=\"anonymous\" \u5c5e\u6027\u3092\u8ffd\u52a0\u3059\u308c\u3070\u89e3\u6c7a\n\u2192 Google Fonts\n   \u2192 require-corp \u3067\u306f\u554f\u984c\u3042\u308a\u3001credentialless \u3067\u306f\u52d5\u4f5c\u3059\u308b\n\u2192 YouTube\u30fbVimeo \u57cb\u3081\u8fbc\u307f\n   \u2192 credentialless \u3067\u591a\u304f\u306f\u89e3\u6c7a\n\u2192 Stripe\u30fbIntercom\u7b49\u306e\u5916\u90e8SDK\u304c\u4f7f\u3046iframe\n   \u2192 sandbox=\"allow-same-origin\" \u304c\u5fc5\u8981\u306b\u306a\u308b\u5834\u5408\u304c\u3042\u308b\n\n\u2705 \u89e3\u6c7a\u7b56\uff1a\n1. COEP \u306e\u5024\u3092 \"require-corp\" \u2192 \"credentialless\" \u306b\u5909\u66f4\n   \u2192 \u591a\u304f\u306e\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3067\u554f\u984c\u304c\u89e3\u6d88\u3059\u308b\n\n2. \u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u306b crossorigin=\"anonymous\" \u3092\u8ffd\u52a0\n   \n\n3. \u30ea\u30bd\u30fc\u30b9\u306e\u30aa\u30fc\u30ca\u30fc\u306bCORP\u30d8\u30c3\u30c0\u30fc\u3092\u8a2d\u5b9a\u3057\u3066\u3082\u3089\u3046\n   Cross-Origin-Resource-Policy: cross-origin\n\n4. \u81ea\u793eCDN\u306b\u30ea\u30bd\u30fc\u30b9\u3092\u30b3\u30d4\u30fc\u3057\u3066\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u554f\u984c\u3092\u56de\u907f<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n\n\n\n
    Q1. COEP \u3092\u8a2d\u5b9a\u3057\u305f\u3089\u5916\u90e8\u306e\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u306a\u304f\u306a\u308a\u307e\u3057\u305f<\/h3>\n\n\n\n
    COEP \u306e require-corp<\/code> \u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u306e\u30ea\u30bd\u30fc\u30b9\u306f Cross-Origin-Resource-Policy: cross-origin<\/code> \u30d8\u30c3\u30c0\u30fc\u3092\u8fd4\u3059\u304b\u3001crossorigin=\"anonymous\"<\/code> \u5c5e\u6027\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002\u307e\u305a require-corp<\/code> \u304b\u3089 credentialless<\/code> \u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\uff08Chrome\u306f96+\u304b\u3089\u5bfe\u5fdc\uff09\u3002\u305d\u308c\u3067\u3082\u554f\u984c\u304c\u6b8b\u308b\u5834\u5408\u306f\u3001\u8a72\u5f53\u30ea\u30bd\u30fc\u30b9\u306eCORS\u30d8\u30c3\u30c0\u30fc\u5bfe\u5fdc\u72b6\u6cc1\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
    Q2. SharedArrayBuffer\u3068Transferable Objects\u306e\u4f7f\u3044\u5206\u3051\u306f\uff1f<\/h3>\n\n\n\n
    ArrayBuffer<\/code>\u3092Transferable\u3068\u3057\u3066\u6e21\u3059\u3068\u3001\u6240\u6709\u6a29\u304cWorker\u306b\u79fb\u52d5\u3057\u3066\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304b\u3089\u306f\u4f7f\u3048\u306a\u304f\u306a\u308a\u307e\u3059\u3002SharedArrayBuffer<\/strong>\u306f\u6240\u6709\u6a29\u79fb\u52d5\u306a\u3057\u3067\u4e21\u8005\u304c\u540c\u3058\u30e1\u30e2\u30ea\u3092\u53c2\u7167\u3057\u307e\u3059\u3002\u983b\u7e41\u306b\u53cc\u65b9\u5411\u3067\u66f4\u65b0\u3059\u308b\u30c7\u30fc\u30bf\u306b\u306fSharedArrayBuffer\u3001\u4e00\u65b9\u5411\u306b\u5927\u91cf\u30c7\u30fc\u30bf\u3092\u6e21\u3057\u3066\u7d50\u679c\u3092\u53d7\u3051\u53d6\u308b\u5834\u5408\u306b\u306fTransfer\uff08Transferable\uff09\u304c\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
    Q3. Atomics.wait\u306f\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3067\u3082\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
    \u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3067\u306fAtomics.wait<\/code>\u3092\u4f7f\u3048\u307e\u305b\u3093\u3002<\/strong>\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306fUI\u306e\u63cf\u753b\u3092\u30d6\u30ed\u30c3\u30af\u3057\u3066\u306f\u306a\u3089\u306a\u3044\u305f\u3081\u3067\u3059\u3002\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304b\u3089\u4ed6\u306eWorker\u306e\u51e6\u7406\u5b8c\u4e86\u3092\u5f85\u3064\u306b\u306f\u3001Atomics.waitAsync<\/code>\uff08Chrome 87+, Firefox 79+\uff09\u3092\u4f7f\u3046\u304b\u3001Worker\u5074\u304b\u3089postMessage<\/code>\u3067\u5b8c\u4e86\u3092\u901a\u77e5\u3059\u308b\u65b9\u6cd5\u304c\u9069\u5207\u3067\u3059\u3002<\/p>\n\n\n\n
    Q4. \u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883\uff08localhost\uff09\u3067SharedArrayBuffer\u306f\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
    \u306f\u3044\u3001localhost<\/code>\u306f\u30d6\u30e9\u30a6\u30b6\u304c\u30bb\u30ad\u30e5\u30a2\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3068\u3057\u3066\u6271\u3046\u305f\u3081\u3001COOP\/COEP\u30d8\u30c3\u30c0\u30fc\u306a\u3057\u3067SharedArrayBuffer\u3092\u4f7f\u3048\u307e\u3059\u3002\u305f\u3060\u3057\u672c\u756a\u30c7\u30d7\u30ed\u30a4\u6642\u306b\u306f\u30d8\u30c3\u30c0\u30fc\u304c\u5fc5\u8981\u306b\u306a\u308b\u305f\u3081\u3001\u958b\u767a\u6bb5\u968e\u304b\u3089\u30d8\u30c3\u30c0\u30fc\u3092\u8a2d\u5b9a\u3057\u305f\u72b6\u614b\u3067\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3092\u63a8\u5968\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    Q5. WebAssembly\u306e\u4e26\u5217\u51e6\u7406\u306bSharedArrayBuffer\u304c\u5fc5\u8981\u306a\u7406\u7531\u306f\uff1f<\/h3>\n\n\n\n
    WebAssembly\u306e\u30b9\u30ec\u30c3\u30c9\u30e2\u30c7\u30eb\uff08pthread<\/code>\uff09\u306fSharedArrayBuffer\u3092\u30d9\u30fc\u30b9\u306b\u3057\u3066\u3044\u307e\u3059\u3002Emscripten\u3067C\u306epthread\u30b3\u30fc\u30c9\u3092Wasm\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u5834\u5408\uff08-s USE_PTHREADS=1<\/code>\uff09\u3001Wasm Workers\u304c\u5171\u6709\u30e1\u30e2\u30ea\u3092\u4f7f\u3046\u305f\u3081SharedArrayBuffer\u3068COOP\/COEP\u304c\u5fc5\u9808\u3067\u3059\u3002ffmpeg.wasm\u3082\u3053\u306e\u4ed5\u7d44\u307f\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u307e\u3068\u3081<\/h2>\n\n\n\n