概要

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

メソッド

使用例

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

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

関連オブジェクト

• JavaScript/BigInt64Array
• JavaScript/BigUint64Array
• JavaScript/Int8Array
• JavaScript/Float32Array
• JavaScript/ArrayBuffer

静的プロパティ

DataView.length

DataView.name

DataView.prototype

静的アクセサ

静的メソッド

継承関係

• Object ← DataView

DataViewのインスタンスプロパティ

DataView.prototype [ Symbol.toStringTag ]

DataViewのインスタンスアクセサ

get DataView.prototype.buffer

get DataView.prototype.byteLength

get DataView.prototype.byteOffset

DataViewのインスタンスメソッド

DataView.prototype.constructor()

DataView.prototype.getBigInt64()

DataView.prototype.getBigUint64()

DataView.prototype.getFloat32()

DataView.prototype.getFloat64()

DataView.prototype.getInt16()

DataView.prototype.getInt32()

DataView.prototype.getInt8()

DataView.prototype.getUint16()

DataView.prototype.getUint32()

DataView.prototype.getUint8()

DataView.prototype.setBigInt64()

DataView.prototype.setBigUint64()

DataView.prototype.setFloat32()

DataView.prototype.setFloat64()

DataView.prototype.setInt16()

DataView.prototype.setInt32()

DataView.prototype.setInt8()

DataView.prototype.setUint16()

DataView.prototype.setUint32()

DataView.prototype.setUint8()