Open4

BufferやBlobやFileやUint8Arrayとかとか

porokyu32porokyu32

Buffer
Node.js の機能の一つで、主にバイナリデータの格納や操作を行うためのオブジェクトです。バイナリデータとは、テキストデータではなく、画像、音声、ビデオファイルなどの生のデータを指します。バッファは、これらのデータをメモリ内で直接扱うために設計されており、JavaScriptの他のオブジェクトとは異なり、固定長の生のメモリ領域に直接アクセスします。

  • Uint8Arrayのサブクラス

https://nodejs.org/api/buffer.html

Blob
ブラウザのJavaScript環境で使用される。ファイルを扱ったりできる。メモリではなくディスク上に保存されることもあり、大きなデータを効率的に扱うことができる。ちなみにFileはBlobを拡張したもの
https://developer.mozilla.org/ja/docs/Web/API/Blob

そもそもそれぞれを実行できるruntimeが違う
Buffer -> Node.js環境
Blob -> ブラウザのJavaScript環境

porokyu32porokyu32

ちなみにFileはBlobを継承してるのでinstanceofで検証してみるとtrueになる

  const file = new File(["file"], "filename");
  console.log(file instanceof Blob); // true
porokyu32porokyu32

ArrayBufferとUint8Arrayの違い
ArrayBuffer

  • 生のバイナリデータの固定長バッファ。直接データにアクセスする手段を提供しない
  • バイナリデータを格納するための容器として機能する。実際にデータにアクセするにはTypedArrayDataViewを介して行う
  • データのブロックを保持するだけで内容については何も仮定しない

Uint8Array

  • ArrayBuffer上に構築されたviewで、各要素が8ビット整数として扱われる
  • ArrayBufferの内容をバイト単位で直接操作するために使用される。これにより具体的なデータアクセスと操作が可能になる
  • ArrayBufferの一部または全部を参照し、そのバッファの具体的な操作を行うインターフェースを提供する。

*ここでのバッファはメモリ領域のことを指します。

ArrayBufferで生成したバイナリデータを操作することはできない

  const arrayBuffer = new ArrayBuffer(8);
  arrayBuffer[0] = 255;

こんな感じで怒られる

次はUint8Arrayを介してバイナリデータを操作してみる

  const arrayBuffer = new ArrayBuffer(8);
  const uint8Array = new Uint8Array(arrayBuffer);
  uint8Array2[0] = 255;
  console.log(uint8Array2); // Uint8Array(8) [255, 0, 0, 0, 0, 0, 0, 0]

Uint8Arrayを介せば操作が可能になった

porokyu32porokyu32

BufferはUint8Arrayのサブクラス。バイナリデータを効率的に操作できる。
Uint8ArrayはArrayBufferのビュー。ArrayBuffer上に構築される