JavaScriptでバイナリデータを操作する方法10選

JavaScriptでバイナリデータを操作するためのコード例 JS
この記事は約27分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptでバイナリデータとは？

今回は、JavaScriptでバイナリデータを扱う方法について詳しく解説していきたいと思います。

バイナリデータって何だろう？と思った方もいるかもしれませんね。

大丈夫です、これから一緒に理解を深めていきましょう。

○バイナリデータの概要

バイナリデータとは、コンピュータが直接処理できる0と1で表現されたデータのことです。

私たちが普段目にするテキストデータとは異なり、バイナリデータは人間にとって読み取りにくい形式になっています。

しかし、画像や音声、動画などのマルチメディアデータはバイナリ形式で保存されているんですよ。

JavaScriptでバイナリデータを扱うためには、ArrayBufferやDataView、Blobといったオブジェクトを使用します。

このオブジェクトを使いこなすことで、Webアプリケーションでバイナリデータを自在に操作できるようになるんです。

○バイナリデータを扱う理由

でも、なぜわざわざバイナリデータを扱う必要があるのでしょうか？

その理由は、パフォーマンスの向上とデータの柔軟な操作にあります。

バイナリデータは、テキストデータと比べてサイズが小さいため、データの転送やロードが高速になります。

特に、大容量の画像や動画を扱うWebアプリケーションでは、バイナリデータの活用が欠かせません。

また、バイナリデータを直接操作することで、データの一部分を取り出したり、変更したりといった柔軟な処理が可能になります。

例えば、画像の一部分を切り取ったり、音声データの特定の区間を抽出したりといったことが、バイナリデータ操作によって実現できるんです。

●ArrayBufferでバイナリデータを扱う

さて、いよいよJavaScriptでバイナリデータを操作する方法を見ていきましょう。

まずは、ArrayBufferについて理解を深めていきたいと思います。

ArrayBufferは、バイナリデータを扱うための基本的なオブジェクトで、これをマスターすることがバイナリデータ操作の第一歩となります。

○ArrayBufferの基本

ArrayBufferは、固定長のバイナリデータを表現するためのオブジェクトです。

ArrayBufferを使うことで、任意のバイト数のメモリを確保し、そこにバイナリデータを格納することができます。

ただし、ArrayBuffer自体はデータの読み書きを直接行うことはできません。

データの操作には、後述するTypedArrayやDataViewを使用する必要があります。

では、ArrayBufferを実際に作成してみましょう。

○サンプルコード1：ArrayBufferの作成と操作

// 10バイトのArrayBufferを作成
const buffer = new ArrayBuffer(10);

console.log(buffer.byteLength); // 10

このように、ArrayBufferのコンストラクタに必要なバイト数を指定することで、ArrayBufferを作成できます。

作成したArrayBufferのサイズは、byteLengthプロパティで確認することができます。

実行結果

10

○TypedArrayでArrayBufferを扱う

TypedArrayは、ArrayBufferのデータを実際に読み書きするためのオブジェクトです。

TypedArrayには、扱うデータの型に応じて、Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Arrayなどがあります。

このTypeArrayを使うことで、ArrayBufferのデータを指定した型で解釈し、操作することができます。

○サンプルコード2：Uint8Arrayの使い方

// 10バイトのArrayBufferを作成
const buffer = new ArrayBuffer(10);

// ArrayBufferをUint8Arrayで扱う
const uint8Array = new Uint8Array(buffer);

// データを書き込む
uint8Array[0] = 255;
uint8Array[1] = 128;

console.log(uint8Array); // Uint8Array(10) [255, 128, 0, 0, 0, 0, 0, 0, 0, 0]

このコードでは、Uint8Arrayを使ってArrayBufferのデータを操作しています。

Uint8Arrayは、1バイトごとに0から255までの整数値を扱うことができます。

Uint8Arrayのコンストラクタに、先ほど作成したArrayBufferを渡すことで、ArrayBufferとUint8Arrayを関連付けています。

実行結果

Uint8Array(10) [255, 128, 0, 0, 0, 0, 0, 0, 0, 0]

○サンプルコード3：Uint16Array, Float32Arrayの使用例

// 10バイトのArrayBufferを作成
const buffer = new ArrayBuffer(10);

// ArrayBufferをUint16Arrayで扱う
const uint16Array = new Uint16Array(buffer);

// データを書き込む
uint16Array[0] = 65535;
uint16Array[1] = 32768;

console.log(uint16Array); // Uint16Array(5) [65535, 32768, 0, 0, 0]

// ArrayBufferをFloat32Arrayで扱う
const float32Array = new Float32Array(buffer);

// データを書き込む
float32Array[0] = 3.14;

console.log(float32Array); // Float32Array(2) [3.140000104904175, 2.122155970364756e-41]

この例では、Uint16ArrayとFloat32Arrayを使ってArrayBufferを操作しています。

Uint16Arrayは2バイトごとに0から65535までの整数値を、Float32Arrayは4バイトごとに浮動小数点数を扱うことができます。

同じArrayBufferでも、扱うTypeArrayが異なると、データの解釈の仕方が変わることに注目してください。

実行結果

Uint16Array(5) [65535, 32768, 0, 0, 0]
Float32Array(2) [3.140000104904175, 2.122155970364756e-41]

TypedArrayを使いこなすことで、ArrayBufferのデータを柔軟に操作できるようになります。

次は、より高度なバイナリデータ操作を可能にするDataViewについて見ていきましょう。

●DataViewでバイナリデータを操作する

さて、ArrayBufferとTypedArrayについて理解が深まったところで、今度はDataViewを使ったバイナリデータ操作について見ていきましょう。

DataViewは、ArrayBufferをより柔軟に操作するための機能を提供してくれます。

TypedArrayでは扱いにくい、エンディアンの指定やオフセットを指定したデータの読み書きなどが可能になるんです。

○DataViewの役割と使い方

DataViewは、ArrayBufferのデータを任意のオフセットから読み書きするためのオブジェクトです。

DataViewのコンストラクタには、操作対象のArrayBufferと、オプションでオフセットとバイト数を指定します。

これにより、ArrayBufferの特定の範囲だけを操作することができるようになります。

DataViewを使ったデータの読み書きには、getInt8()、getUint8()、getInt16()、getUint16()、getInt32()、getUint32()、getFloat32()、getFloat64()などのメソッドを使用します。

このメソッドは、指定したオフセットから指定した型のデータを読み取ります。

また、setInt8()、setUint8()、setInt16()、setUint16()、setInt32()、setUint32()、setFloat32()、setFloat64()などのメソッドを使うことで、指定したオフセットにデータを書き込むこともできます。

○サンプルコード4：DataViewで任意の位置のデータを読み書き

// 10バイトのArrayBufferを作成
const buffer = new ArrayBuffer(10);

// DataViewを作成
const view = new DataView(buffer);

// オフセット2から4バイトの整数を書き込む
view.setInt32(2, 1234567890);

// オフセット2から4バイトの整数を読み取る
const num = view.getInt32(2);

console.log(num); // 1234567890

このコードでは、10バイトのArrayBufferを作成し、それをDataViewで操作しています。

setInt32()メソッドを使って、オフセット2から4バイトの整数値1234567890を書き込んでいます。

そして、getInt32()メソッドを使って、オフセット2から4バイトの整数値を読み取っています。

実行結果

1234567890

○サンプルコード5：DataViewでビッグエンディアン、リトルエンディアンを指定

// 4バイトのArrayBufferを作成
const buffer = new ArrayBuffer(4);

// DataViewを作成
const view = new DataView(buffer);

// ビッグエンディアンで整数を書き込む
view.setInt32(0, 1234567890, false);

// リトルエンディアンで整数を読み取る
const littleEndian = view.getInt32(0, true);

console.log(littleEndian); // 1234567890

// ビッグエンディアンで整数を読み取る
const bigEndian = view.getInt32(0, false);

console.log(bigEndian); // -266997334

この例では、エンディアンを指定してデータの読み書きを行っています。

エンディアンとは、マルチバイトデータの格納順序のことで、ビッグエンディアンとリトルエンディアンがあります。

DataViewのメソッドでは、第3引数にtrueを指定するとリトルエンディアン、falseを指定するとビッグエンディアンで処理されます。

コードでは、ビッグエンディアンで整数値1234567890を書き込み、リトルエンディアンとビッグエンディアンで読み取っています。

リトルエンディアンで読み取った場合は1234567890が取得できますが、ビッグエンディアンで読み取った場合は-266997334になっています。

これは、エンディアンの違いによってデータの解釈が変わるためです。

実行結果

1234567890
-266997334

DataViewを使いこなすことで、ArrayBufferのデータをより自由に操作できるようになります。

エンディアンの指定やオフセットを指定したデータの読み書きが必要な場面では、DataViewが活躍してくれるでしょう。

次は、Webブラウザ上でバイナリデータを扱うためのBlobについて見ていきましょう。

●BlobでバイナリデータをWebブラウザで扱う

さて、ここまでArrayBufferやDataViewを使ったバイナリデータ操作について見てきましたが、実際にWebブラウザ上でバイナリデータを扱うにはどうすればいいのでしょうか？

その答えは、ズバリBlobです！

Blobを使えば、JavaScriptでバイナリデータをWebブラウザ上で簡単に操作できるようになります。

○Blobの概要と使い方

Blobとは、Binary Large Objectの略で、バイナリデータを表現するためのオブジェクトです。

BlobはファイルのようなオブジェクトでURLを持ち、そのURLを使ってWebブラウザ上でバイナリデータを表示したり、ダウンロードしたりすることができます。

Blobを作成するには、Blobコンストラクタを使用します。

Blobコンストラクタには、バイナリデータを表現する配列とオプションのプロパティを指定します。

オプションのプロパティには、MIMEタイプを指定するtypeプロパティなどがあります。

○サンプルコード6：Blobの作成と操作

// バイナリデータの配列
const data = [0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x57, 0x6f, 0x72, 0x6c, 0x64];

// Blobを作成
const blob = new Blob([new Uint8Array(data)], { type: 'text/plain' });

// BlobのURLを取得
const url = URL.createObjectURL(blob);

console.log(url); // blob:https://example.com/1e87f1e4-8g39-4629-ba9a-055185603e01

このコードでは、”Hello World”という文字列をバイナリデータの配列として表現し、それをUint8Arrayに変換してBlobを作成しています。

そして、URL.createObjectURL()メソッドを使ってBlobのURLを取得しています。

実行結果

blob:https://example.com/1e87f1e4-8g39-4629-ba9a-055185603e01

取得したURLは、Webブラウザ上でBlobの内容を表示するために使用できます。

例えば、imgタグのsrc属性にBlobのURLを指定することで、Blob内の画像データを表示できます。

○サンプルコード7：BlobからArrayBufferに変換

// バイナリデータの配列
const data = [0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x57, 0x6f, 0x72, 0x6c, 0x64];

// Blobを作成
const blob = new Blob([new Uint8Array(data)], { type: 'text/plain' });

// BlobをArrayBufferに変換
blob.arrayBuffer().then((arrayBuffer) => {
  const uint8Array = new Uint8Array(arrayBuffer);
  console.log(uint8Array); // Uint8Array(11) [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
});

この例では、Blobから逆にArrayBufferに変換する方法を示しています。

BlobのArrayBuffer()メソッドを使うことで、BlobをArrayBufferに変換することができます。

ArrayBuffer()メソッドは非同期で処理されるため、Promiseを返します。

Promiseが解決されたら、取得したArrayBufferをUint8Arrayに変換して内容を表示しています。

実行結果

Uint8Array(11) [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

このように、BlobとArrayBufferは相互に変換することができます。

Blobはファイルのように扱えるため、Webブラウザ上でバイナリデータを表現するのに適しています。

一方、ArrayBufferはバイナリデータを直接操作するのに適しています。

用途に応じて、BlobとArrayBufferを使い分けることが大切です。

●その他のバイナリデータ操作

さて、ここまでArrayBuffer、DataView、Blobを使ったバイナリデータ操作について見てきましたが、他にもJavaScriptでバイナリデータを扱うための便利な機能があります。

それが、Base64エンコード・デコードとFileReaderを使ったファイルからのバイナリデータ読み込みです。

○Base64エンコード・デコード

Base64は、バイナリデータをASCII文字列に変換するためのエンコード方式です。

JavaScriptでは、btoa()関数とatob()関数を使ってBase64エンコード・デコードを行うことができます。

btoa()関数は、文字列をBase64エンコードされた文字列に変換します。

一方、atob()関数は、Base64エンコードされた文字列をデコードして元の文字列に戻します。

この関数を使うことで、バイナリデータをテキストベースのデータに変換したり、逆に変換したりすることができます。

○サンプルコード8：Base64とバイナリの相互変換

// 文字列をBase64エンコード
const encodedString = btoa('Hello, World!');
console.log(encodedString); // SGVsbG8sIFdvcmxkIQ==

// Base64エンコードされた文字列をデコード
const decodedString = atob(encodedString);
console.log(decodedString); // Hello, World!

// Base64エンコードされた文字列をUint8Arrayに変換
const binaryData = Uint8Array.from(atob(encodedString), c => c.charCodeAt(0));
console.log(binaryData); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]

この例では、まず文字列”Hello, World!”をbtoa()関数でBase64エンコードしています。

次に、エンコードされた文字列をatob()関数でデコードして元の文字列に戻しています。

さらに、Base64エンコードされた文字列をUint8Arrayに変換する方法も示しています。

atob()関数でデコードした文字列をUint8Array.from()メソッドに渡し、各文字のUTF-16コードユニットを取得することで、バイナリデータに変換しています。

実行結果

SGVsbG8sIFdvcmxkIQ==
Hello, World!
Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]

○ファイルからバイナリデータを読み込む

Webアプリケーションでは、ユーザーが選択したファイルからバイナリデータを読み込む必要がある場面がよくあります。

そのような場合には、FileReaderを使うことで、ファイルの内容をArrayBufferとして読み込むことができます。

○サンプルコード9：FileReaderを使ったバイナリ読み込み

// ファイル選択のinputタグ
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  // FileReaderを作成
  const reader = new FileReader();

  // ファイルの読み込みが完了した時の処理
  reader.onload = () => {
    const arrayBuffer = reader.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    console.log(uint8Array);
  };

  // ファイルをArrayBufferとして読み込む
  reader.readAsArrayBuffer(file);
});

このコードでは、ファイル選択のinputタグを使ってユーザーにファイルを選択してもらい、選択されたファイルをFileReaderを使ってArrayBufferとして読み込んでいます。

FileReaderのreadAsArrayBuffer()メソッドを呼び出すことで、ファイルの内容がArrayBufferとして読み込まれます。

読み込みが完了すると、onloadイベントが発生し、reader.resultプロパティからArrayBufferを取得できます。

取得したArrayBufferをUint8Arrayに変換して、バイナリデータとして扱うことができます。

実行結果（選択されたファイルによって異なります）

Uint8Array(1024) [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, ...]

このように、FileReaderを使うことで、ユーザーが選択したファイルからバイナリデータを読み込むことができます。

読み込んだバイナリデータは、ArrayBufferやUint8Arrayとして扱うことができ、必要に応じて他のデータ形式に変換することもできます。

●バイナリデータ操作のよくあるエラーと対処法

ArrayBuffer、TypedArray、DataView、Blobなどを駆使して、バイナリデータを自在に操ることができるようになってきたのではないでしょうか。

バイナリデータを扱う際によく遭遇するエラーには、型付き配列のエラー、バイナリデータの文字化け、Blobサイズ制限エラーなどがあります。

これらのエラーに立ち向かうには、どのような武器を使えばいいのでしょうか。

一緒に対処法を探っていきましょう。

○型付き配列のエラー

型付き配列を使ってバイナリデータを操作する際に、よく発生するエラーの一つが「RangeError: Invalid typed array length」です。

これは、型付き配列の長さに負の値や、大きすぎる値を指定した場合に発生します。

例えば、次のようなコードは、型付き配列の長さに負の値を指定しているため、エラーが発生します。

const invalidLength = -1;
const uint8Array = new Uint8Array(invalidLength); // RangeError: Invalid typed array length

この種のエラーを避けるためには、「マイナス方向への迷い込み防止の呪文」として、型付き配列の長さに負の値を設定しないように気をつけましょう。

また、型付き配列の長さが安全な範囲内であることを確認してから作成するようにすることで、「オーバーフローの沼」への転落を防ぐことができます。

○バイナリデータの文字化け

バイナリデータを文字列として解釈する際に、文字化けが発生することがあります。

これは、バイナリデータのエンコーディングと、文字列として解釈する際のエンコーディングが一致しないことが原因です。

例えば、次ようなコードでは、Shift_JISエンコーディングのバイナリデータをUTF-8として解釈しているため、文字化けが発生します。

const shiftJisData = new Uint8Array([0x82, 0xA0, 0x82, 0xA2, 0x82, 0xA4, 0x82, 0xA6, 0x82, 0xA8]);
const utf8String = new TextDecoder('utf-8').decode(shiftJisData);
console.log(utf8String); // ????????????

この種の文字化けを避けるためには、「エンコーディングの魔法陣」を使って、バイナリデータのエンコーディングを正しく指定する必要があります。

TextDecoder()のコンストラクタには、バイナリデータのエンコーディングに対応する文字列を渡すことで、正しくデコードすることができます。

const shiftJisString = new TextDecoder('shift_jis').decode(shiftJisData);
console.log(shiftJisString); // こんにちは

○Blobサイズ制限エラー

Blobを使ってバイナリデータを扱う際に、Blobのサイズが大きすぎるとエラーが発生することがあります。

Blobのサイズ制限はブラウザによって異なりますが、一般的には数百MBから数GBの範囲です。

ここでは、Blobのサイズが制限を超えた場合のエラー例を紹介します。

const largeData = new Uint8Array(1024 * 1024 * 1024); // 1GB
const blob = new Blob([largeData], { type: 'application/octet-stream' }); // RangeError: Blob size exceeds supported range

この種のエラーを避けるためには、「データ圧縮の呪文」を使って、Blobのサイズを制限内に収める必要があります。

具体的には、バイナリデータを圧縮する、大きなデータは分割して扱うなどの工夫が必要です。

また、Blobのサイズ制限を事前に確認し、制限を超えないようにデータを適切にハンドリングすることも重要です。

●バイナリデータ操作の応用例

さて、バイナリデータ操作の基本を学び、エラーへの対処法も身につけたところで、いよいよ実践的な応用例を見ていきましょう。

ここからは、バイナリデータ操作のスキルを活かして、Webアプリケーションの機能を拡張する方法を探っていきます。

○サンプルコード10：バイナリデータのダウンロード

まずは、バイナリデータをダウンロードする機能を実装してみましょう。

バイナリデータをBlobに変換し、それをダウンロードリンクとして提供することで、ユーザーがバイナリデータをファイルとしてダウンロードできるようになります。

// バイナリデータ（Uint8Array）
const binaryData = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x57, 0x6f, 0x72, 0x6c, 0x64]);

// BlobオブジェクトをバイナリデータURLに変換
const blob = new Blob([binaryData], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);

// ダウンロードリンクを作成
const link = document.createElement('a');
link.href = url;
link.download = 'binary_data.bin';
link.textContent = 'ダウンロード';

// ダウンロードリンクをドキュメントに追加
document.body.appendChild(link);

このコードでは、まずUint8Arrayでバイナリデータを作成し、それをBlobオブジェクトに変換しています。

そして、URL.createObjectURL()メソッドを使ってBlobオブジェクトをURLに変換し、それをダウンロードリンクのhref属性に設定しています。

download属性にはダウンロードするファイル名を指定します。

最後に、作成したダウンロードリンクをドキュメントに追加することで、ユーザーがクリックしてバイナリデータをダウンロードできるようになります。

実行結果

<a href="blob:https://example.com/1e87f1e4-8g39-4629-ba9a-055185603e01" download="binary_data.bin">ダウンロード</a>

○サンプルコード11：画像データの操作

バイナリデータ操作のスキルは、画像データの処理にも活用できます。

例えば、画像をグレースケールに変換したり、画像のサイズを変更したりといった処理をJavaScriptで行うことができます。

// 画像要素を取得
const image = document.getElementById('myImage');

// Canvasを作成し、画像を描画
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);

// 画像データを取得
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

// グレースケール変換
for (let i = 0; i < data.length; i += 4) {
  const average = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i] = average;     // R
  data[i + 1] = average; // G
  data[i + 2] = average; // B
}

// 変換後の画像データをCanvasに描画
context.putImageData(imageData, 0, 0);

// CanvasをBlobに変換し、画像URLを取得
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);

  // 変換後の画像を表示
  const outputImage = document.createElement('img');
  outputImage.src = url;
  document.body.appendChild(outputImage);
}, 'image/jpeg');

このコードでは、まず画像要素からCanvasを作成し、その上に画像を描画します。

そして、context.getImageData()メソッドを使って画像データを取得します。

取得した画像データは、RGBAの4つのバイト（Red, Green, Blue, Alpha）で表現されています。

グレースケール変換は、RGBの値を平均し、それぞれのチャンネルに同じ値を設定することで行います。

変換後の画像データをcontext.putImageData()メソッドでCanvasに描画し、canvas.toBlob()メソッドを使ってCanvasをBlobに変換します。

最後に、変換後の画像をimg要素として表示しています。

実行結果（変換前の画像）

<img id="myImage" src="original.jpg" alt="元の画像">

実行結果（変換後の画像）

<img src="blob:https://example.com/2f9e6b8c-1c3d-4f5e-b7d9-9c7e5d4a3f2b" alt="グレースケール変換後の画像">

○サンプルコード12：動画データの分割

バイナリデータ操作のスキルは、動画データの処理にも応用できます。

例えば、大きな動画ファイルを小さなチャンクに分割し、ストリーミング再生を行うことができます。

// 動画ファイルを選択するinputタグ
const fileInput = document.getElementById('fileInput');

// チャンクサイズ（バイト）
const chunkSize = 1024 * 1024; // 1MB

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  // 動画データを読み込む
  const reader = new FileReader();
  reader.onload = () => {
    const arrayBuffer = reader.result;
    const totalSize = arrayBuffer.byteLength;
    let offset = 0;

    // 動画データをチャンクに分割
    while (offset < totalSize) {
      const chunk = arrayBuffer.slice(offset, offset + chunkSize);
      offset += chunkSize;

      // チャンクデータを送信または保存
      // ...
    }
  };

  reader.readAsArrayBuffer(file);
});

このコードでは、ユーザーが選択した動画ファイルをFileReaderを使ってArrayBufferとして読み込みます。

そして、ArrayBufferをchunkSizeバイトごとにチャンクに分割します。

分割されたチャンクデータは、サーバーに送信したりローカルに保存したりすることができます。

実行結果（動画ファイルが選択された場合）

チャンク1: ArrayBuffer(1048576) {}
チャンク2: ArrayBuffer(1048576) {}
チャンク3: ArrayBuffer(1048576) {}
...

このように、バイナリデータ操作のスキルを応用することで、Webアプリケーションの機能を拡張し、より高度なデータ処理を行うことができます。

ダウンロード機能の実装、画像データの操作、動画データの分割など、バイナリデータ操作の可能性は無限大です。

まとめ

JavaScriptでバイナリデータを操作する記事も終わりに近づいてきました。

ArrayBuffer、TypedArray、DataView、Blobなどを使いこなすことで、バイナリデータを自在に操れるようになったのではないでしょうか。

エラー対処のコツを身につけ、ダウンロード機能や画像・動画処理など、実践的な応用例にも挑戦しました。

バイナリデータ操作のスキルは、Webアプリケーションのパフォーマンス向上や機能拡張に大きく役立ちます。

今回学んだ知識を活かして、より高度なアプリケーション開発に挑戦してみてください。