JavaScriptの型付き配列（Typed Array）とは？バイナリデータ操作の基本を解説

JavaScriptの型付き配列は、配列のような振る舞いをするオブジェクトで、生のバイナリデータへ効率的にアクセスするための仕組みです。画像処理、音声処理、WebGLなど、パフォーマンスが求められる場面で活躍します。

通常の配列との違い

通常のArrayオブジェクトは要素の追加・削除によって動的にサイズが変化し、任意のJavaScriptの値を格納できます。JavaScriptエンジンはこうした配列に対しても最適化を行い、高速な動作を実現しています。

一方、型付き配列は扱えるデータの種類が固定されており、通常の配列とは明確に区別されます。
注意： 型付き配列に対して Array.isArray() を呼び出すと false が返されます。また、通常の配列で利用できるすべてのメソッドが型付き配列で使えるわけではない点にも留意してください。

バッファとビューという2つの概念

JavaScriptの型付き配列は、バッファとビューという2つの仕組みによって実装されています。

バッファ（ArrayBuffer）

バッファはデータのかたまりを表すオブジェクトです。バッファ自体にはフォーマットの概念がなく、中身のデータに直接アクセスする手段も提供していません。

ビュー（View）

バッファ内のメモリにアクセスするには、ビューを使用します。ビューは「データ型」「開始オフセット」「要素数」を指定することで、無形式のデータを型付き配列として解釈できるようにします。

サンプルコード

// 固定長16バイトのバッファを作成
let buffer = new ArrayBuffer(16);

// バッファを操作するには、まずビューを作成する必要があります。
// ここでは、バッファ内のデータを32ビット符号付き整数の配列として扱うビューを作成します。
let int32View = new Int32Array(buffer);

// 通常の配列と同じように各要素へアクセスできます
for (let i = 0; i < int32View.length; i++) {
    int32View[i] = i * 2;
}
console.log(int32View);

実行結果

Int32Array { [Iterator] 0: 0, 1: 2, 2: 4, 3: 6 }

この例では、16バイトのバッファが Int32Array ビューによって4つの32ビット整数として解釈され、インデックスを使った代入が通常の配列と同様の記法で行えることがわかります。