JavaScriptにおける`TypedArray`

この記事ではJavaScriptにおけるTypedArrayについて説明します。

TypedArrayの基本的な概念、各型、使い方、および具体的なユースケースについて詳しく解説します。

YouTube Video

JavaScriptにおけるTypedArray

JavaScriptのTypedArrayは、バッファされたバイナリデータを効率的に扱うためのオブジェクトです。TypedArrayは特定のデータ型に基づいて、メモリの割り当てや操作を行います。通常の配列と異なり、TypedArrayは任意のデータ型ではなく、固定サイズのバイナリデータのみを保持できる点が特徴です。

TypedArrayの基本構造

TypedArrayの主要な要素は、ArrayBufferとTypedArrayそのものです。

• ArrayBuffer: 固定サイズのバッファで、バイナリデータをメモリ上に確保します。このバッファはただのデータ領域であり、読み書きを直接行うことはできません。
• TypedArray: バッファに特定のデータ型を適用し、データにアクセスしたり操作したりするためのラッパーオブジェクトです。

基本的な使用例

以下は、ArrayBufferを作成し、それを元にTypedArrayを作成する例です。

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• この例では、ArrayBufferを作成し、そのバッファに基づいてUint8Arrayを作成しています。各要素は8ビットの符号なし整数として扱われ、指定した範囲でのみ値を格納できます。

TypedArrayの種類

TypedArrayには、データ型ごとに異なる種類があります。主なものは以下の通りです。

これらのTypedArrayは、いずれもメモリ効率に優れており、大量のデータを扱う場合に有効です。

TypedArrayの操作

TypedArrayは、通常の配列と同様にインデックスを用いてデータにアクセスできますが、いくつかの特別なメソッドも提供されています。

値の設定

TypedArrayには、setメソッドを使用して複数の値を一度に代入できます。

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• このコードは、Int16Array に set メソッドを使って複数の値を一度に代入し、各要素をコンソールに表示します。

サブ配列の取得

TypedArrayの一部をサブ配列として取得するには、subarrayメソッドを使用します。これは元のTypedArrayと同じバッファを参照します。

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• このコードは、Int16Array から指定範囲の要素を subarray で取得し、部分配列をコンソールに表示します。

バッファのコピー

TypedArrayのバッファを別のTypedArrayにコピーすることもできます。setメソッドを使って、指定の位置からコピーできます。

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• このコードは、Uint8Array の内容を別の配列に set メソッドでコピーし、コピー後の配列をコンソールに表示します。

DataViewの利用

TypedArrayが固定のデータ型でバッファを扱うのに対し、DataViewは任意のオフセットとデータ型で柔軟にバイナリデータを操作するためのインターフェースです。これにより、異なる型を同じバッファ内で混在させることが可能です。

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• このコードは、DataView を使って32ビット整数と32ビット浮動小数点という異なる型のデータを同じバッファ上に書き込み、結果を確認しています。

• DataViewは、TypedArrayに比べてデータアクセスの自由度が高く、バイナリ形式のファイルやネットワークプロトコルを扱う際に特に有用です。

TypedArrayのユースケース

TypedArrayは、主に大量のバイナリデータを効率的に扱う場合に使われます。具体的なユースケースとしては以下が挙げられます。

画像処理

TypedArrayは、画像データのピクセル情報を操作する際に使われます。Uint8Arrayを使用して各ピクセルのRGBA値を保持し、画像の編集や加工を行います。

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• このコードは、Uint8Array を使って幅100×高さ100の画像データをRGBA形式で作成し、すべてのピクセルを赤色に設定します。

WebAssemblyとの連携

TypedArrayは、JavaScriptとWebAssemblyとの間でバイナリデータをやり取りする際に用いられます。ArrayBufferを介してJavaScriptとWebAssemblyのメモリ空間を共有し、高速なデータ交換が可能です。

音声・動画データの処理

音声や動画の処理でも、TypedArrayは重要な役割を果たします。音声データの波形をFloat32Arrayで保持し、再生や加工を行うことができます。

結論

TypedArrayは、大量のバイナリデータを効率よく扱うための強力なツールです。画像処理、WebAssembly、音声・動画データの処理など、パフォーマンスが重要なアプリケーションで特に有用です。TypedArrayは通常の配列と似たAPIを持ちながらも、メモリ使用量やデータ型に関しては制約があるため、適切に使い分けることが求められます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video