読み込み中...

JavaScriptバイナリ入門！初心者が知るべき7つのステップ

JavaScriptでバイナリデータを扱う初心者向けの解説記事 JS
2023.04.29
この記事は約10分で読めます。

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

この記事を読めば、JavaScriptでバイナリデータを扱う方法が身につくでしょう。

初心者でも理解できるように、バイナリデータの基本概念から、JavaScriptでの扱い方、サンプルコードや応用例までを徹底解説します。

それでは、さっそく始めましょう！

●バイナリデータとは

バイナリデータとは、0と1の二進数で表現されるデータのことを指します。

コンピュータ内部では、すべての情報がバイナリデータとして扱われています。

画像や音声、テキストなど、あらゆるデータはバイナリ形式で格納されています。

●JavaScriptでバイナリデータを扱う方法

JavaScriptでは、バイナリデータを扱うためにいくつかのオブジェクトやAPIが提供されています。

代表的なものにはArray Buffer、Data View、そしてFileReader APIがあります。

○Array Buffer

Array Bufferは、固定長のバイナリデータバッファを表現するオブジェクトです。

JavaScriptでバイナリデータを扱う際に、まずArray Bufferを使ってデータの領域を確保します。

○Data View

Data Viewは、Array Buffer上のバイナリデータを扱うためのオブジェクトです。

Data Viewを使って、バイナリデータを読み書きしたり、エンディアンを指定してデータを解釈したりすることができます。

○FileReader API

FileReader APIは、ユーザーが選択したファイルを読み込むためのAPIです。

FileReaderを使って、ファイルをArray Bufferとして読み込んだり、Data URL形式で取得したりすることができます。

●サンプルコードと使い方

それでは、JavaScriptでバイナリデータを扱うサンプルコードをいくつか紹介していきます。

○サンプルコード1：バイナリデータを読み込む

このコードでは、FileReader APIを使ってファイルをArray Bufferとして読み込む方法を紹介しています。

この例では、input要素でファイルを選択した後、読み込んだデータをコンソールに表示しています。

// input要素を取得
const input = document.querySelector('input[type="file"]');

// ファイルが選択されたときの処理
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  // 読み込みが完了したときの処理
  reader.addEventListener('load', () => {
    const arrayBuffer = reader.result;
    console.log(arrayBuffer);
  });

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

○サンプルコード2：バイナリデータを書き込む

このコードでは、ArrayBufferとDataViewを使ってバイナリデータを書き込む方法を紹介しています。

この例では、10バイトのArrayBufferを作成し、そのバイナリデータに値を書き込んでコンソールに表示します。

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

// 値を書き込む
view.setUint8(0, 65);
view.setUint8(1, 66);
view.setUint8(2, 67);

// ArrayBufferをUint8Arrayに変換して表示
const uint8Array = new Uint8Array(buffer);
console.log(uint8Array);

○サンプルコード3：バイナリデータをエンコード・デコードする

このコードでは、TextEncoderとTextDecoderを使ってバイナリデータをエンコード・デコードする方法を紹介しています。

この例では、文字列をエンコードしてバイナリデータに変換し、その後デコードして元の文字列に戻します。

const text = 'こんにちは';
const encoder = new TextEncoder();
const decoder = new TextDecoder();

// 文字列をエンコードしてバイナリデータに変換
const encodedData = encoder.encode(text);
console.log(encodedData);

// バイナリデータをデコードして文字列に戻す
const decodedText = decoder.decode(encodedData);
console.log(decodedText);

○サンプルコード4：バイナリデータを操作する

このコードでは、ArrayBufferとDataViewを使ってバイナリデータを操作する方法を紹介しています。

この例では、バイナリデータに格納された数値を加算して、結果をコンソールに表示します。

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

// バイナリデータに数値を書き込む
view.setInt32(0, 10);
view.setInt32(4, 20);

// バイナリデータから数値を読み込む
const num1 = view.getInt32(0);
const num2 = view.getInt32(4);

// 数値を加算し、結果を表示
const result = num1 + num2;
console.log(result);

●応用例とサンプルコード

○応用例1：画像ファイルをバイナリデータとして読み込む

このコードでは、FileReader APIを使って、画像ファイルをバイナリデータとして読み込む方法を紹介しています。

この例では、input要素で画像ファイルを選択し、DataURL形式で読み込んだ後、画像を表示します。

const input = document.querySelector('input[type="file"]');
const img = document.querySelector('img');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', () => {
    const dataUrl = reader.result;
    img.src = dataUrl;
  });

  reader.readAsDataURL(file);
});

○応用例2：音声ファイルをバイナリデータとして処理する

このコードでは、FileReader APIを使って、音声ファイルをバイナリデータとして読み込み、再生する方法を紹介しています。

この例では、input要素で音声ファイルを選択し、DataURL形式で読み込んだ後、音声を再生します。

const input = document.querySelector('input[type="file"]');
const audio = document.querySelector('audio');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', () => {
    const dataUrl = reader.result;
    audio.src = dataUrl;
  });

  reader.readAsDataURL(file);
});

○応用例3：バイナリデータを扱うカスタム関数を作成する

このコードでは、バイナリデータを扱うカスタム関数を作成する方法を紹介しています。

この例では、バイナリデータを反転させる関数を作成し、その結果をコンソールに表示します。

function reverseBinary(buffer) {
  const view = new DataView(buffer);
  const length = buffer.byteLength;

  for (let i = 0; i < length; i++) {
    const byte = view.getUint8(i);
    const reversedByte = ~byte & 0xFF;
    view.setUint8(i, reversedByte);
  }

  return buffer;
}

const originalBuffer = new ArrayBuffer(4);
const originalView = new DataView(originalBuffer);
originalView.setUint32(0, 0x12345678);

const reversedBuffer = reverseBinary(originalBuffer);
const reversedView = new DataView(reversedBuffer);

console.log(`元のバイナリデータ: ${originalView.getUint32(0).toString(16)}`);
console.log(`反転後のバイナリデータ: ${reversedView.getUint32(0).toString(16)}`);

●注意点と対処法

バイナリデータを扱う際には、いくつかの注意点があります。

下記でそれらについて説明し、対処法を提案します。

データのエンディアン性

バイナリデータは、ビッグエンディアンとリトルエンディアンという2つのエンディアン性があります。

異なるエンディアン性を持つデータを扱う際には、変換が必要です。

JavaScriptのDataViewを使用する際には、getメソッドやsetメソッドの第二引数にエンディアン性を指定できます。

これにより、エンディアン性の違いを簡単に対処できます。

メモリの範囲外アクセス

バイナリデータを操作する際に、メモリの範囲外にアクセスしてしまうことがあります。

これを避けるために、ArrayBufferのbyteLengthプロパティを利用して、アクセスするインデックスが範囲内に収まることを確認しましょう。

データの型に注意

バイナリデータを読み書きする際には、データの型に注意が必要です。

DataViewの各メソッドを使用する際には、適切な型を指定することで、データの読み書きを正しく行うことができます。

●カスタマイズ方法

バイナリデータを扱う際には、様々なカスタマイズが可能です。

例えば、独自のエンコーディングやデコーディングアルゴリズムを実装したり、バイナリデータを解析するためのツールを開発することができます。

また、特定のファイルフォーマットを扱うためのライブラリを作成することもできます。

まとめ

本記事では、バイナリデータの基本概念やJavaScriptでの扱い方、さまざまなサンプルコードを紹介しました。

注意点と対処法を理解し、適切なカスタマイズを行うことで、バイナリデータを効果的に扱うことができます。

これらの知識を活用して、様々なアプリケーションやツールの開発に取り組んでみてください。