JavaScript/DataView

DataView

概要

DataView は、JavaScript における低レベルのバイナリデータ操作を行うためのオブジェクトです。ArrayBuffer 上のデータに対して、ビッグエンディアンやリトルエンディアンなどの異なるエンディアン形式を指定して、様々なデータ型の読み書きが可能です。これにより、バイナリデータを柔軟に扱うことができます。

ユースケース

DataView は、主に以下のような場面で利用されます。

バイナリデータの解析
ネットワーク通信やファイルの読み込みにおいて、バイナリデータを解析するために使用されます。特に、異なるエンディアン形式に対応する際に有用です。
カスタムデータフォーマットの操作
独自のバイナリフォーマットを使用するアプリケーションにおいて、データを適切にエンコード・デコードするために利用されます。
Web API のバイナリレスポンス処理
WebAssembly や WebSocket など、バイナリデータを直接処理する API と組み合わせて使用することができます。

イディオム

DataView を効率的に使用するための典型的なパターンを紹介します。

バイナリデータの読み書き

DataView を利用して、異なるデータ型を適切に読み書きする例です。

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);

// データを書き込む
view.setUint32(0, 0x12345678, false); // ビッグエンディアン
view.setUint32(4, 0x90abcdef, true);  // リトルエンディアン

// データを読み込む
console.log(view.getUint32(0, false).toString(16)); // "12345678"
console.log(view.getUint32(0, true).toString(16)); // "78563412"
console.log(view.getUint32(4, false).toString(16));  // "efcdab90"
console.log(view.getUint32(4, true).toString(16));  // "90abcdef"

エンディアンの考慮

異なるエンディアン形式に対応する際のパターンです。

function readInt32LE(view, offset) {
    return view.getInt32(offset, true);
}

function readInt32BE(view, offset) {
    return view.getInt32(offset, false);
}

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setInt32(0, 0x11223344, true);

console.log(readInt32LE(view, 0).toString(16)); // "11223344"
console.log(readInt32BE(view, 0).toString(16)); // "44332211"

バイナリデータのシリアライズ・デシリアライズ

DataView を使用してオブジェクトをバイナリ形式でエンコード・デコードする例。

function serialize(x, y, z) {
    const buffer = new ArrayBuffer(12);
    const view = new DataView(buffer);
    view.setFloat32(0, x, true);
    view.setFloat32(4, y, true);
    view.setFloat32(8, z, true);
    return buffer;
}

function deserialize(buffer) {
    const view = new DataView(buffer);
    return {
        x: view.getFloat32(0, true),
        y: view.getFloat32(4, true),
        z: view.getFloat32(8, true)
    };
}

const buffer = serialize(1.1, 2.2, 3.3);
const data = deserialize(buffer);
console.log(data); // { x: 1.1, y: 2.2, z: 3.3 }

コンストラクタ

DataView()

new DataView(buffer [, byteOffset [, length]])

引数
- buffer: 操作対象の ArrayBuffer オブジェクト
- byteOffset (オプション): データビューの開始位置（デフォルトは 0）
- length (オプション): データビューが操作するバッファの長さ（デフォルトは buffer.length）
戻り値: 新しい DataView オブジェクト

プロパティ

DataView には、データを操作するためのメソッド群があり、プロパティは提供されていませんが、指定されたバッファ内のデータを読み書きするために、各メソッドを利用することができます。

メソッド

DataView.prototype.getInt8()

dataView.getInt8(byteOffset)

引数
- byteOffset: 読み取る位置のバイトオフセット
戻り値: 8ビット符号付き整数（Int8）として解釈した値

DataView.prototype.getUint8()

dataView.getUint8(byteOffset)

引数
- byteOffset: 読み取る位置のバイトオフセット
戻り値: 8ビット符号なし整数（Uint8）として解釈した値

DataView.prototype.getInt16()

dataView.getInt16(byteOffset [, littleEndian])

引数
- byteOffset: 読み取る位置のバイトオフセット
- littleEndian (オプション): true の場合、リトルエンディアン形式で解釈（デフォルトは false）
戻り値: 16ビット符号付き整数（Int16）として解釈した値

DataView.prototype.getUint16()

dataView.getUint16(byteOffset [, littleEndian])

引数
- byteOffset: 読み取る位置のバイトオフセット
- littleEndian (オプション): true の場合、リトルエンディアン形式で解釈（デフォルトは false）
戻り値: 16ビット符号なし整数（Uint16）として解釈した値

DataView.prototype.getInt32()

dataView.getInt32(byteOffset [, littleEndian])

引数
- byteOffset: 読み取る位置のバイトオフセット
- littleEndian (オプション): true の場合、リトルエンディアン形式で解釈（デフォルトは false）
戻り値: 32ビット符号付き整数（Int32）として解釈した値

DataView.prototype.getUint32()

dataView.getUint32(byteOffset [, littleEndian])

引数
- byteOffset: 読み取る位置のバイトオフセット
- littleEndian (オプション): true の場合、リトルエンディアン形式で解釈（デフォルトは false）
戻り値: 32ビット符号なし整数（Uint32）として解釈した値

DataView.prototype.getFloat32()

dataView.getFloat32(byteOffset [, littleEndian])

引数
- byteOffset: 読み取る位置のバイトオフセット
- littleEndian (オプション): true の場合、リトルエンディアン形式で解釈（デフォルトは false）
戻り値: 32ビット浮動小数点数（Float32）として解釈した値

DataView.prototype.getFloat64()

dataView.getFloat64(byteOffset [, littleEndian])

引数
- byteOffset: 読み取る位置のバイトオフセット
- littleEndian (オプション): true の場合、リトルエンディアン形式で解釈（デフォルトは false）
戻り値: 64ビット浮動小数点数（Float64）として解釈した値

DataView.prototype.setInt8()

dataView.setInt8(byteOffset, value)

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（8ビット符号付き整数）
戻り値: なし

DataView.prototype.setUint8()

dataView.setUint8(byteOffset, value)

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（8ビット符号なし整数）
戻り値: なし

DataView.prototype.setInt16()

dataView.setInt16(byteOffset, value [, littleEndian])

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（16ビット符号付き整数）
- littleEndian (オプション): true の場合、リトルエンディアン形式で書き込む（デフォルトは false）
戻り値: なし

DataView.prototype.setUint16()

dataView.setUint16(byteOffset, value [, littleEndian])

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（16ビット符号なし整数）
- littleEndian (オプション): true の場合、リトルエンディアン形式で書き込む（デフォルトは false）
戻り値: なし

DataView.prototype.setInt32()

dataView.setInt32(byteOffset, value [, littleEndian])

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（32ビット符号付き整数）
- littleEndian (オプション): true の場合、リトルエンディアン形式で書き込む（デフォルトは false）
戻り値: なし

DataView.prototype.setUint32()

dataView.setUint32(byteOffset, value [, littleEndian])

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（32ビット符号なし整数）
- littleEndian (オプション): true の場合、リトルエンディアン形式で書き込む（デフォルトは false）
戻り値: なし

DataView.prototype.setFloat32()

dataView.setFloat32(byteOffset, value [, littleEndian])

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（32ビット浮動小数点数）
- littleEndian (オプション): true の場合、リトルエンディアン形式で書き込む（デフォルトは false）
戻り値: なし

DataView.prototype.setFloat64()

dataView.setFloat64(byteOffset, value [, littleEndian])

引数
- byteOffset: 書き込む位置のバイトオフセット
- value: 書き込む値（64ビット浮動小数点数）
- littleEndian (オプション): true の場合、リトルエンディアン形式で書き込む（デフォルトは false）
戻り値: なし

使用例

let buffer = new ArrayBuffer(16);
let view = new DataView(buffer);

view.setInt8(0, 42);
console.log(view.getInt8(0)); // 42

附録

静的プロパティ

DataView.length
DataView.name
DataView.prototype

静的アクセサ

静的メソッド