Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer を更新 (#1473)

- 2021/05/05 時点の英語版に同期
- #329 の修正

1 files changed, 75 insertions, 70 deletions

diff --git a/files/ja/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ja/web/javascript/reference/global_objects/sharedarraybuffer/index.html
index 2603ebfbd1..d1b478f388 100644
--- a/files/ja/web/javascript/reference/global_objects/sharedarraybuffer/index.html
+++ b/files/ja/web/javascript/reference/global_objects/sharedarraybuffer/index.html
@@ -2,68 +2,72 @@
 title: SharedArrayBuffer
 slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
 tags:
-  - Constructor
+  - Class
   - JavaScript
   - Shared Memory
   - SharedArrayBuffer
-  - TypesdArrays
+  - TypedArrays
+browser-compat: javascript.builtins.SharedArrayBuffer
 translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
 ---
 <div>{{JSRef}}</div>
 
-<p><strong><code>SharedArrayBuffer</code></strong> オブジェクトは、ジェネリックで固定長の生バイナリデータバッファーを表すために使用されます。{{jsxref("ArrayBuffer")}} オブジェクトと似ていますが、これらは共有メモリー上にビューを生成するために使用されます。<code>ArrayBuffer</code> と異なり、<code>SharedArrayBuffer</code> は分離できません。</p>
+<p><strong><code>SharedArrayBuffer</code></strong> オブジェクトは、固定長の生バイナリデータバッファーのジェネリックを表すために使用されます。{{jsxref("ArrayBuffer")}} オブジェクトと似ていますが、こちらは共有メモリー上にビューを生成するために使用されます。 <code>ArrayBuffer</code> と異なり、<code>SharedArrayBuffer</code> は分離できません。</p>
 
-<div class="note">
-<p><code>SharedArrayBuffer</code> はすべての主要なブラウザーで 2018 年 1 月 5 日に、<a href="https://meltdownattack.com/">Spectre</a> への対応として無効化されましたので注意してください。Chrome では、Spectre 型脆弱性から保護するためのサイト分離機能が有効にされたプラットフォームにおいて、<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=821270">v67 に再度有効化されています</a>。</p>
-</div>
+<h2 id="Description">解説</h2>
 
-<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}</div>
+<h3 id="Allocating_and_sharing_memory">メモリーの割り当てと共有</h3>
 
+<p>クラスター内のあるエージェントから別のエージェント (エージェントとは、ウェブページのメインプログラムまたはそのウェブワーカーのひとつ) へ、{{jsxref("SharedArrayBuffer")}} オブジェクトを使用してメモリーを共有するために、<code><a href="/ja/docs/Web/API/Worker/postMessage">postMessage</a></code> と<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">構造化クローン</a>を使用します。</p>
 
+<p>構造化クローンアルゴリズムは <code>SharedArrayBuffers</code> と、<code>SharedArrayBuffers</code> にマッピングされた <code>TypedArrays</code> を受け入れます。どちらの場合も <code>SharedArrayBuffer</code> オブジェクトは受信者に転送されて、受信側のエージェントで新たなプライベートの SharedArrayBuffer オブジェクトになります ({{jsxref("ArrayBuffer")}} と同じように)。しかし、2 つの <code>SharedArrayBuffer</code> オブジェクトから参照される共有データブロックは同一のデータブロックであり、あるエージェントによるブロックへの副作用は、結果的に他方のエージェントからも見えます。</p>
 
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">new SharedArrayBuffer(length)
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+worker.postMessage(sab);
 </pre>
 
-<h3 id="パラメーター">パラメーター</h3>
+<h3 id="Updating_and_synchronizing_shared_memory_with_atomic_operations">Atomic 操作による共有メモリーを更新や同期</h3>
 
-<dl>
- <dt><code>length</code></dt>
- <dd>array buffer を生成するバイト単位のサイズ。</dd>
-</dl>
+<p>共有メモリーは、ワーカー内でもメインスレッド内でも同時に生成や更新ができます。システム (CPU、 OS、ブラウザー) によっては、変更がすべてのコンテキストに通知されるまでに少々時間がかかります。同期するためには、{{jsxref("Atomics", "atomic", "", 1)}} 操作が必要です。</p>
 
-<h3 id="戻り値">戻り値</h3>
+<h3 id="APIs_which_use_SharedArrayBuffer_objects">SharedArrayBuffer オブジェクトを使用する API</h3>
 
-<p>指定したサイズの新しい <code>SharedArrayBuffer</code>。コンテンツは 0 に初期化されている。</p>
+<ul>
+ <li><a href="/ja/docs/Web/API/WebGLRenderingContext/bufferData" title="WebGL API WebGLRenderingContext.bufferData() メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。"><code>WebGLRenderingContext.bufferData()</code></a></li>
+ <li><a href="/ja/docs/Web/API/WebGLRenderingContext/bufferSubData" title="The WebGLRenderingContext.bufferSubData() method of the WebGL API updates a subset of a buffer object's data store."><code>WebGLRenderingContext.bufferSubData()</code></a></li>
+ <li><a href="/ja/docs/Web/API/WebGL2RenderingContext/getBufferSubData" title="The WebGL2RenderingContext.getBufferSubData() method of the WebGL 2 API reads data from a buffer binding point and writes them to an ArrayBuffer or SharedArrayBuffer."><code>WebGL2RenderingContext.getBufferSubData()</code></a></li>
+</ul>
 
-<h2 id="説明">説明</h2>
+<h3 id="Security_requirements">セキュリティの要件</h3>
 
-<h3 id="Allocating_and_sharing_memory" name="Allocating_and_sharing_memory">メモリーの割り当てと共有</h3>
+<p>共有メモリーと高解像度タイマーは、 <a href="https://ja.wikipedia.org/wiki/Spectre">Spectre</a> の対策として 2018 年の初めに事実上<a href="https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/">無効化されました</a>。 2020 年には、共有メモリを再び有効にするために、新しい安全なアプローチが標準化されました。いくつかのセキュリティ対策を施すことで、 <code><a href="/ja/docs/Web/API/Window/postMessage">postMessage()</a></code> が <code>SharedArrayBuffer</code> オブジェクトに対して例外を発生しなくなり、スレッド間の共有メモリが利用できるようになります。</p>
 
-<p>クラスター内のあるエージェントから別のエージェント (エージェントとは、ウェブページのメインプログラムまたはその web worker のひとつ) へ、{{jsxref("SharedArrayBuffer")}} オブジェクトを使用してメモリーを共有するために、<code><a href="/ja/docs/Web/API/Worker/postMessage">postMessage</a></code> と <a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured cloning</a> を使用します。</p>
+<p>基本的な要件として、文書が<a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a>にある必要があります。</p>
 
-<p>structured clone アルゴリズムは <code>SharedArrayBuffers</code> と、<code>SharedArrayBuffers</code> にマッピングされた <code>TypedArrays</code> を受け入れます。どちらの場合も <code>SharedArrayBuffer</code> オブジェクトは受信者に転送されて、受信側のエージェントで新たなプライベートの SharedArrayBuffer オブジェクトになります ({{jsxref("ArrayBuffer")}} と同じように)。しかし、2 つの <code>SharedArrayBuffer</code> オブジェクトから参照される共有データブロックは同一のデータブロックであり、あるエージェントによるブロックへの副作用は、結果的に他方のエージェントからも見えます。</p>
+<p>最上位の文書では、サイトにオリジン間の分離性を持たせるため、次の2つのヘッダーを設定する必要があります。</p>
 
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-worker.postMessage(sab);
-</pre>
+<ul>
+ <li><a href="/ja/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy"><code>Cross-Origin-Opener-Policy</code></a> で <code>same-origin</code> の値を指定すること (オリジンを攻撃者から守るため)</li>
+ <li><a href="/ja/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy"><code>Cross-Origin-Embedder-Policy</code></a> で <code>require-corp</code> の値を指定すること (被害者を自分のオリジンから守るため)</li>
+</ul>
 
-<h3 id="Atomic_操作で共有メモリを更新、同期する">Atomic 操作で共有メモリを更新、同期する</h3>
+<pre class="brush: plain">Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+</pre>
 
-<p>共有メモリーは、worker 内でもメインスレッド内でも同時に生成や更新ができます。システム（CPU や OS、ブラウザー）によっては、変更がすべてのコンテキストに通知されるまでに少々時間がかかります。同期するためには、{{jsxref("Atomics", "atomic", "", 1)}} 操作が必要です。</p>
+<p>オリジン間の分離が成功したかどうかは、ウィンドウとワーカーのコンテキストで利用できる <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated">crossOriginIsolated</a></code> プロパティを使って確認することができます。</p>
 
-<h3 id="SharedArrayBuffer_オブジェクトを受け付ける_API">SharedArrayBuffer オブジェクトを受け付ける API</h3>
+<pre class="brush: js">if (crossOriginIsolated) {
+  // Post SharedArrayBuffer
+} else {
+  // Do something else
+}</pre>
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bufferData()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
- <li>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</li>
-</ul>
+<p>また、ブラウザー (Firefox 79など) で展開され始めている<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes">共有メモリーの計画的な変更</a>も参照してください。</p>
 
-<h3 id="SharedArrayBuffer_の生成には_new_演算子が必要">SharedArrayBuffer の生成には new 演算子が必要</h3>
+<h3 id="Always_use_the_new_operator_to_create_a_SharedArrayBuffer">SharedArrayBuffer の生成には new 演算子が必要</h3>
 
-<p><code>SharedArrayBuffer</code> コンストラクターは、{{jsxref("Operators/new", "new")}} 演算子で呼び出される必要があります。<code>new</code> 演算子なしで関数として <code>SharedArrayBuffer</code> コンストラクターを呼び出すと、{{jsxref("TypeError")}} をスローします。</p>
+<p><code>SharedArrayBuffer</code> コンストラクターは、{{jsxref("Operators/new", "new")}} 演算子で呼び出す必要があります。<code>new</code> 演算子なしで関数として <code>SharedArrayBuffer</code> コンストラクターを呼び出すと、{{jsxref("TypeError")}} が発生します。</p>
 
 <pre class="brush: js example-bad">var sab = SharedArrayBuffer(1024);
 // TypeError: calling a builtin SharedArrayBuffer constructor
@@ -71,62 +75,63 @@ worker.postMessage(sab);
 
 <pre class="brush: js example-good">var sab = new SharedArrayBuffer(1024);</pre>
 
-<h2 id="プロパティ">プロパティ</h2>
+<h2 id="Constructor">コンストラクター</h2>
 
 <dl>
- <dt><code>SharedArrayBuffer.length</code></dt>
- <dd><code>SharedArrayBuffer</code> コンストラクターの length プロパティの値は 1。</dd>
- <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt>
- <dd>すべての <code>SharedArrayBuffer</code> オブジェクトにプロパティ追加を許可する。</dd>
+ <dt><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/SharedArrayBuffer"><code>SharedArrayBuffer()</code></a></dt>
+ <dd>新しい <code>SharedArrayBuffer</code> オブジェクトを生成します。</dd>
 </dl>
 
-<h2 id="SharedArrayBuffer_プロトタイプオブジェクト"><code>SharedArrayBuffer</code> プロトタイプオブジェクト</h2>
+<h2 id="Instance_properties">インスタンスプロパティ</h2>
+
+<dl>
+ <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}}</dt>
+ <dd>配列の大きさをバイト数で表します。これは配列が構築されたときに確立され、変更することはできません。<strong>読み取り専用です。</strong></dd>
+</dl>
+
+<h2 id="Instance_methods">インスタンスメソッド</h2>
+
+<dl>
+ <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt>
+ <dd>新しい <code>SharedArrayBuffer</code> を作成し、その中身をこの <code>SharedArrayBuffer</code> の <code>begin</code> の位置から <code>end</code> の位置の一つ手前までのバイトをコピーして返します。 <code>begin</code> または <code>end</code> が負の数の場合は、配列の先頭からではなく末尾からの位置で参照します。</dd>
+</dl>
 
-<p>すべての <code>SharedArrayBuffer</code> インスタンスは {{jsxref("SharedArrayBuffer.prototype")}} を継承しています。</p>
+<h2 id="Examples">例</h2>
 
-<h3 id="プロパティ_2">プロパティ</h3>
+<h3 id="Creating_a_new_SharedArrayBuffer">新しい SharedArrayBuffer の生成</h3>
 
-<p>{{page('ja/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','プロパティ')}}</p>
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);</pre>
 
-<h3 id="メソッド">メソッド</h3>
+<h3 id="Slicing_the_SharedArrayBuffer">SharedArrayBuffer の分割</h3>
 
-<p>{{page('ja/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','メソッド')}}</p>
+<pre class="brush: js">sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
+sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
+sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
+sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 }</pre>
 
-<h2 id="仕様">仕様</h2>
+<h3 id="Using_it_in_a_WebGL_buffer">WebGL バッファー内での使用</h3>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ES2017 で初期定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+<pre class="brush: js">const canvas = document.querySelector('canvas');
+const gl = canvas.getContext('webgl');
+const buffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.bufferData(gl.ARRAY_BUFFER, sab, gl.STATIC_DRAW);</pre>
 
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+<h2 id="Specifications">仕様書</h2>
 
+{{Specifications}}
 
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("javascript.builtins.SharedArrayBuffer")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="関連項目">関連項目</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>{{jsxref("Atomics")}}</li>
  <li>{{jsxref("ArrayBuffer")}}</li>
- <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
- <li><a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Workers_API">Web Worker</a></li>
  <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– 同期と作業分配抽象化を提供するシンプルなライブラリー</li>
  <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">共有メモリー – 簡潔なチュートリアル</a></li>
  <li>