Blobについてのメモ
Blobについて調べる機会があったのでまとめておきます。自分が後で見返せるようにしておきます。
間違いあればご指摘ください。
これまで自分が知ってたBlobのこと
「Blobってあれでしょ？画像に使うやつ」この程度です。
Blobとは
困った時のMDN Web Docs
仕様書もあります。
A Blob object refers to a byte sequence, and has a size attribute which is the total number of bytes in the byte sequence, and a type attribute, which is an ASCII-encoded string in lower case representing the media type of the byte sequence.
「Blobはバイト列で全体バイト数の属性とASC-Ⅱエンコードされたメディア属性を表現する種類の属性を持つもの。(ざっくり翻訳)」
内部にsnabshot stateという状態を持っていてこれを初期化することで生成される。
この状態をシリアライズやデイリアライズして使うことができる。
Blobに関連するアルゴリズムとしてget stream algorithmというものがありこのアルゴリズムで読み取りが行われる(詳細内容は仕様書をご覧ください)。
寄り道: JavaScriptネイティブ形式ってなんだ？
Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません
ChatGPTにも聞いてみる
「JavaScriptネイティブ形式」というのは通常、ブラウザやJavaScriptで標準的にサポートされているデータ形式のことを指します。具体的には以下のようなものです：
• 文字列 (String)
• 配列 (Array)
• オブジェクト (Object)
• ArrayBuffer や TypedArray などのバイナリデータ形式
つまり、「JavaScriptが持つプリミティブ型以外でも良いということ」と自分はそう解釈しました。
JavaScriptのデータ構造についても調べました。
MDN Web DocsのBlobページではjsonをBlobに変換することができるサンプルコードがある。確かにJavaScriptネイティブ形式以外も許容しているようです。
FileもBlob?
MDN Web Docsより
File オブジェクトは特別な種類の Blob オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、FileReader、URL.createObjectURL()、createImageBitmap()、fetch() の body オプション、XMLHttpRequest.send() は、Blob と File の両方を受け付けます。
FileはBlobの拡張版だった。Blob側にも記載があります。
File インターフェイスは Blob をベースにしており、 Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。
FileはBlobと同じような処理が可能ということ。だから自分はBlob = ファイルの認識を持っていたのかもしれない。
Blobで遊ぶ
MDN Web DocsにJavaScriptのサンプルコードがたくさんあるので試してみる。
Blobへ変換
文字列をBlobにしてURL生成
let blob = new Blob(['Hello, world!'], { type: 'text/plain' });
let blobUrl = URL.createObjectURL(blob);
let blobElement = document.getElementById('blob');
console.log('Blob URL:', blobUrl);
出力されたURLへアクセスするとHello, world!が表示された。
アップロードした画像をBlobにしてpreview表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob Animation</title>
</head>
<body>
<div>
<input type="file" id="fileInput" accept="image/*">
<div id="previewContainer"></div>
</div>
<script src="script.js"></script>
</body>
</html>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const blobUrl = URL.createObjectURL(file);
const previewContainer = document.getElementById('previewContainer');
previewContainer.innerHTML = `<img src="${blobUrl}" alt="Image Preview" style="max-width: 100%; height: auto;">`;
URL.revokeObjectURL(blobUrl);
}
});
まとめ
せっかくの機会だったのでBlobについてほんの少しだけ深ぼってみた。きちんと仕様書まで読むことは大事。今後も時間の許す限り技術の勉強をするときは深掘るようにする。
参考文献
Discussion