JavaScript/SharedArrayBuffer

SharedArrayBuffer

概要

SharedArrayBuffer は、複数の JavaScript スレッド間で共有できるメモリ領域を提供するオブジェクトです。このバッファは、スレッド間で効率的にデータを共有できるようにするために使用され、主に Web Workers や並列処理が必要なシナリオで利用されます。SharedArrayBuffer は、通常の ArrayBuffer と似ていますが、異なるスレッド間で安全にメモリを共有できる点が特徴です。

SharedArrayBuffer は、メモリのバッファ領域を直接操作できるため、高速で効率的なメモリ操作を提供しますが、セキュリティ上の理由から一部のブラウザでは制限されています。

コンストラクタ

new SharedArrayBuffer(length)

引数
- length: 新しい SharedArrayBuffer の長さ（バイト単位）
戻り値: 指定された長さの新しい SharedArrayBuffer オブジェクト

使用例

// SharedArrayBuffer の作成
const buffer = new SharedArrayBuffer(16);  // 16 バイトのメモリ領域を確保

// SharedArrayBuffer を使って Int32Array を作成
const int32View = new Int32Array(buffer);

// 配列に値を設定
int32View[0] = 42;
int32View[1] = 84;

console.log(int32View[0]); // 42
console.log(int32View[1]); // 84

セキュリティと制限

SharedArrayBuffer は、ブラウザのセキュリティ制限により、特にクロスオリジンリソース共有（CORS）やコンテンツセキュリティポリシー（CSP）の設定に依存します。特に、Spectre や Meltdown のような脆弱性に対処するために、SharedArrayBuffer の使用には HTTPS が必須となっています。また、Cross-Origin-Opener-Policy (COOP) や Cross-Origin-Embedder-Policy (COEP) のヘッダーが適切に設定されていないと、SharedArrayBuffer の使用が制限される場合があります。

1. 1. 例: セキュリティのための設定

// HTTP ヘッダー設定例（サーバ側）
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

これらのヘッダーを使用すると、SharedArrayBuffer を安全に利用できるようになります。

Web Workers との連携

SharedArrayBuffer は、主に Web Workers やサービスワーカーで使用されます。これらのスレッド間でデータを共有するために、SharedArrayBuffer を使うと効率的にメモリを共有でき、並列処理を高速化することができます。

// メインスレッドで SharedArrayBuffer を作成
const buffer = new SharedArrayBuffer(1024);
const int32View = new Int32Array(buffer);

// Web Worker を作成
const worker = new Worker('worker.js');

// SharedArrayBuffer を Web Worker に送信
worker.postMessage(buffer);

worker.js 内では、受け取った SharedArrayBuffer を使ってデータを操作できます。

// worker.js 内
onmessage = function(event) {
  const buffer = event.data;
  const int32View = new Int32Array(buffer);
  int32View[0] = 100; // メモリを変更
  postMessage(int32View[0]); // メインスレッドに結果を送信
};

パフォーマンスと利点

SharedArrayBuffer の主な利点は、スレッド間で直接メモリを共有できるため、データのコピーを避けて効率的に通信できる点です。これにより、大量のデータを処理する並列処理や計算において、パフォーマンスが大幅に向上することがあります。

また、SharedArrayBuffer は、複数のスレッドで並行して処理を行う際に、メモリの一貫性を保つための同期機構も提供します。例えば、Atomics API を利用して、データの競合を防ぎ、スレッド間で安全にデータを操作できます。

Atomics API

SharedArrayBuffer は、Atomics API と組み合わせて使うことで、メモリの整合性を維持しながら複数スレッド間で同期を取ることができます。Atomics では、アトミック操作（例えば、加算や読み書き）が提供され、スレッド間でのデータの競合を防ぎます。

// Atomics を使った例
const buffer = new SharedArrayBuffer(4);
const int32View = new Int32Array(buffer);

// メインスレッドでの加算操作
Atomics.add(int32View, 0, 1);
console.log(Atomics.load(int32View, 0));  // 1

仕様

ECMAScript 2017 (ES8)
[仕様]（第 4 版）

ブラウザサポート

Chrome 69+
Firefox 65+
Safari 12.1+
Edge 79+