Step 3: Core Technology

File と Blob の違い:
「画像データ」の正体を掴む

JavaScriptで画像を扱っているとよく出てくるこの2つの言葉。整理してみたら意外とシンプルでした。

Blob は「データの塊」

Blob (Binary Large Object) は、中身が何であるかを問わず、コンピュータが扱う生(バイナリ)のデータの塊のことです。「猫の手貸し」で加工した後の画像データなどは、この Blob 形式で扱われます。

File は「名札付きのデータ」

対して File は、Blob を継承した特別な存在です。「ファイル名」や「更新日時」といった、OS上で管理するために必要な情報(名札)がついた Blob だと理解しました。

// ユーザーが選んだものは「File」
const file = input.files[0]; 
console.log(file.name); // ファイル名がある

// プログラムで生成したものは「Blob」
const blob = canvas.toBlob((b) => {
  // ここではまだ名前はありません
});

「生のデータ」と「名札付きのファイル」。この違いがわかると、ライブラリのドキュメントを読んだ時に「ここは Blob を渡せばいいんだな」と判断できるようになりました。インフラで言う「パケット」と「フレーム」の違いのような納得感がありました。