JavaScriptのArrayBuffer.isView()：型付き配列とDataViewを判定する

画像や通信データなどのバイナリを扱う処理では、受け取った値が普通の配列なのか、メモリー上のバイト列を参照するオブジェクトなのかを区別する必要があります。見た目が配列に似ていても、利用できる操作や長さの意味は同じではありません。

ArrayBuffer.isView()は、値が型付き配列またはDataViewかどうかを判定する静的メソッドです。この記事では、このAPIを入口の検証に使い、入力が参照するバイト範囲だけを扱う例まで説明します。

目的：バッファーとビューを区別する

バイナリ処理では、データを保存する領域と、その領域を読み書きするためのビューを分けて考えます。ArrayBufferは保存領域です。Uint8Arrayなどの型付き配列とDataViewは、その領域を参照するビューです。

ArrayBuffer.isView()が調べるのは後者です。そのため、Uint8ArrayやDataViewならtrueですが、ArrayBufferそのものならfalseになります。「バイナリに関係する値をすべて受け入れる」という判定ではありません。MDNのAPIリファレンス

普通の配列判定では代用できない

Array.isArray()は普通の配列を判定するためのAPIで、型付き配列にはfalseを返します。数値の並びを扱っていても、通常の配列とバッファーのビューは別の種類です。

たとえば、処理の契約を「型付き配列またはDataViewを受け取る」と決めたなら、その入口でArrayBuffer.isView()を使うと意図が明確になります。MDNの型付き配列ガイド

動作環境と対応バージョン

確認基準日は2026年10月8日です。MDNでは、このAPIを広く利用可能な機能として扱い、2015年7月からブラウザー間で利用できると説明しています。現在のChrome、Edge、Firefox、Safariで利用できます。古い組み込みブラウザーなどを対象にする場合は、実際の環境で機能の存在を確認してください。MDNの互換性情報

Node.jsでも使用できます。本記事の実行対象はNode.js 22系です。Node.js 22系の公式資料には、同じ判定を行う補助APIがArrayBuffer.isView()と等価であることが明記されています。ここではブラウザーと共通の書き方にするため、ArrayBuffer.isView()を直接呼びます。追加パッケージやインポートは不要です。Node.js 22系の公式資料

なお、この判定APIが存在することと、すべての新しい型付き配列が使えることは別です。サンプルはUint8Array、Uint16Array、DataViewだけを使います。

引数・戻り値と基本動作

構文はArrayBuffer.isView(value)です。ArrayBufferに対して呼び出し、インスタンスを作ってから呼ぶ必要はありません。

• 引数のvalueは判定対象です。オブジェクト、配列、文字列、nullなどを渡せます。

• 戻り値は真偽値です。型付き配列またはDataViewならtrue、それ以外ならfalseです。

• 引数を省略した場合もfalseです。

• 判定は同期処理です。Promiseを返さず、awaitも不要です。

次のコードは、普通の配列、ビュー、保存領域の違いを確認する最小例です。

(() => {
  console.log(ArrayBuffer.isView(new Uint8Array([10, 20])));
  console.log(ArrayBuffer.isView(new DataView(new ArrayBuffer(2))));
  console.log(ArrayBuffer.isView(new ArrayBuffer(2)));
  console.log(ArrayBuffer.isView([10, 20]));
  console.log(ArrayBuffer.isView(null));
  console.log(ArrayBuffer.isView());
})();

期待出力は次のとおりです。判定対象の分類は公式資料の例とも一致します。MDNの引数・戻り値と使用例

true
true
false
false
false
false

ブラウザーとNode.jsで実行する

ブラウザーでの実行方法

現在のブラウザーで開発者ツールを開き、Consoleを選びます。まずtypeof ArrayBuffer.isViewを入力し、"function"と表示されることを確認します。その後、試したいコードブロックを丸ごと貼り付けて実行してください。

サンプルはDOMやネットワーク通信を使わないため、ページに要素を追加したり、サーバーを用意したりする必要はありません。コードを即時実行関数で囲んでいるので、同じConsoleで繰り返し実行しても、トップレベルの変数名が衝突しにくい構成です。

Node.jsでの実行方法

Node.js 22系がインストールされた環境で、試したいJavaScriptのコードブロックをis-view-demo.cjsに保存します。ターミナルでそのファイルのあるフォルダーへ移動し、次を実行します。

node --version
node is-view-demo.cjs

最初のコマンドでバージョンがv22.から始まることを確認してください。各JavaScript例は単独で動くので、試すたびにファイルの内容を置き換えられます。本文の出力は仕様から確認した期待値であり、本記事作成時にコードを実行した結果ではありません。

実用例：入力が参照する範囲だけを取り出す

ここでは、受け取ったビューを1バイト単位で扱える形にそろえます。独自関数のasBytes()は引数としてビューを1つ受け取り、同じ範囲を参照するUint8Arrayを返します。ビュー以外を渡した場合は、説明付きのTypeErrorを投げます。

重要なのは、bufferだけでなく、開始位置のbyteOffsetと範囲の長さであるbyteLengthも引き継ぐことです。この3つは型付き配列とDataViewに共通する情報です。MDNのビューの説明

(() => {
  function asBytes(value) {
    if (!ArrayBuffer.isView(value)) {
      throw new TypeError("型付き配列またはDataViewを渡してください");
    }

    return new Uint8Array(
      value.buffer,
      value.byteOffset,
      value.byteLength
    );
  }

  const storage = new Uint8Array([99, 10, 20, 30, 88]);
  const selected = new DataView(storage.buffer, 1, 3);
  const bytes = asBytes(selected);

  console.log(`対象: ${Array.from(bytes).join(",")}`);
  console.log(`バイト数: ${bytes.byteLength}`);

  bytes[0] = 42;
  console.log(`元の領域: ${Array.from(storage).join(",")}`);

  try {
    asBytes([10, 20, 30]);
  } catch (error) {
    console.log(`${error.name}: ${error.message}`);
  }
})();

期待出力は次のとおりです。

対象: 10,20,30
バイト数: 3
元の領域: 99,42,20,30,88
TypeError: 型付き配列またはDataViewを渡してください

selectedの開始位置は1、長さは3バイトなので、両端の99と88は対象に入りません。また、bytesはコピーではなく同じ領域への新しいビューです。bytes[0]への代入が、storage[1]にも反映されます。

独立したデータが必要な場合

後続処理で入力元への影響を避けたいなら、ビューを作った後にコピーします。次の例も単独で実行できます。

(() => {
  const source = new Uint8Array([10, 20]);

  if (!ArrayBuffer.isView(source)) {
    throw new TypeError("ビューが必要です");
  }

  const view = new Uint8Array(
    source.buffer,
    source.byteOffset,
    source.byteLength
  );
  const copied = new Uint8Array(view);

  copied[0] = 42;
  console.log(`元: ${Array.from(source).join(",")}`);
  console.log(`コピー: ${Array.from(copied).join(",")}`);
})();

期待出力は元: 10,20とコピー: 42,20です。APIによる判定と、コピーするかどうかの判断は、それぞれ別の役割として設計します。

失敗例と判定の制約

ビューの範囲を無視する

実用例でnew Uint8Array(selected.buffer)とだけ書くと、選択した3バイトではなく、保存領域全体の5バイトを参照します。これは構文エラーにはならず、処理対象だけが静かに広がるため見落としやすい失敗です。部分データを扱う関数では、開始位置と長さを一緒に渡してください。

要素数とバイト数を混同する

型付き配列のlengthは要素数、byteLengthはバイト数です。たとえばnew Uint16Array(3)は3要素ですが、各要素が2バイトなので全体は6バイトです。さらに、DataViewには型付き配列と同じlengthがありません。ビューを共通処理する場合は、目的に合う単位を明示します。MDNのビューと要素サイズ

trueでも内容までは保証されない

ArrayBuffer.isView()は、ビューの種類を判定します。必要なデータ量、ファイル形式、数値の意味まで検証するわけではありません。空のUint8Arrayでもtrueです。空データを禁止するなら、判定後にbyteLengthも確認してください。

また、バッファーの転送で元の領域が利用できなくなった場合など、種類の判定だけでは後続操作の成功を保証できません。実用例のasBytes()も、ビューの生成で発生した例外を握りつぶさず、呼び出し側へ伝えます。

本記事の例には非同期処理がありません。外部からデータを受け取る実装へ組み込むときは、取得処理の失敗と、取得後の入力検証の失敗を呼び出し側で扱ってください。

活用事例と設計の改善案

このAPIは、バイナリ処理の共通関数で入力の契約を確認する場面に向いています。

• 画像処理で、受け取った型付き配列をバイト単位の処理へ渡す。

• 通信データの解析で、型付き配列とDataViewを共通の入口で受け取る。

• ライブラリーで、不適切な配列やオブジェクトを早い段階で拒否する。

Node.jsのBufferもこの判定ではtrueになります。ブラウザーにはNode.jsのBufferが標準搭載されていないため、共通コードは本記事のようにUint8Arrayを中心に書くと扱いやすくなります。Node.jsのビュー判定例

設計を改善するなら、関数の説明に「ビューのみ受け付ける」「参照を共有する」「長さはバイト単位で扱う」の3点を明記してください。判定コードだけでは伝わらない契約を残すことで、呼び出し側がコピーや追加検証の必要性を判断できます。

公式参考資料

• MDN：ArrayBuffer.isView()の構文・戻り値・使用例

• MDN：ArrayBuffer.isView()のブラウザー互換性

• MDN：型付き配列ガイド

• MDN：ビューの共通プロパティと要素サイズ

• Node.js 22系：ArrayBuffer.isView()と等価な判定の説明