JavaScriptのBlobの使い方: データをバイナリデータに変換する
- 作成日: 2020-09-16
- 更新日: 2023-12-24
- カテゴリ: JavaScript
JavaScriptのBlobの使い方
JavaScriptにはBlob(Binary Large Object)というバイナリデータを扱うためのクラスがあります。
これはimmutable（変更不能）なオブジェクトで、Fileに似たクラスです。
Blobは↓のように使います。
<html>
<head>
<script>
const blob = new Blob(['夏は暑い'], { type: 'text/plain' })
console.log(blob)
</script>
</head>
<body>
</body>
</html>
出力結果。
Blob
Blobの構造
Blobのコンストラクタは↓のような構造を持っています。
Blob(データの配列, ファイルの種類（MIMEタイプ）)
データの配列（第1引数）
第1引数にはBlobに変換するデータの配列を渡します。
データの配列とは例えば↓のような配列です。
['この酷暑で', '人類がダウン']
ファイルの種類（MIMEタイプ、第2引数）
第2引数にはデータの種類を文字列のMIMEタイプで指定します。
MIMEタイプについては↓を参照してください。
MIMEタイプは例えば↓のような文字列です。
- text/plain
- application/json
テキストファイルをBlobでダウンロードさせる
Blobを使うとユーザーに動的にファイルをダウンロードさせることが可能です。
ダウンロードさせたいデータをBlobに変換し、リンクを作成します。
ユーザーがそのリンクをクリックすると、Blobのデータをダウンロードできるという感じです。
↓のHTMLをブラウザで開くとリンクが表示され、リンクをクリックするとファイルがダウンロードされます。
<html>
<head></head>
<body>
</body>
<script>
// ダウンロードさせたいデータを作成
const blob = new Blob(['日本の夏は暑い'], { type: 'text/plain' })
// ダウンロードリンクを作成
let link = document.createElement('a') // リンクを作成
link.href = URL.createObjectURL(blob) // URLを作成
link.download = '日本の夏について.txt' // ファイル名
link.innerText = 'ダウンロードする' // リンクの表示テキスト
// リンクをbodyに追加
document.body.appendChild(link)
</script>
</html>
URL.createObjectURL
↑のコードでURL.createObjectURLはなにをやっているのでしょうか？
URL.createObjectURLは引数のオブジェクトからURLを作成します。
このときオブジェクトはBlobかFileのどちらかです。
作成されたURLは現在のdocumentに結び付けられ、そのdocumentが有効なうちはURLをクリックするとそのオブジェクトをダウンロードすることが可能になります。
このURLを開放するにはrevokeObjectURLを使用します。
つまり↑のコードは作成したリンクのhrefにオブジェクトをダウンロードできるURLを指定しているわけです。
Blobからデータを読み込む
Blobからデータを読み込むにはFileReaderを使います。
FileReaderのreadAsTextメソッドでBlobの読み込みを開始し、onloadで読み込みの完了を検知し、内容を出力します。
<html>
<head>
<script>
// Blobを生成
const blob = new Blob(['本日は晴天なり'], { type: 'text/plain' })
// Blobからデータを読み込み
const reader = new FileReader()
reader.onload = () => {
// 読み込みが完了したので結果を出力
console.log(reader.result)
}
// 読み込み開始
reader.readAsText(blob)
</script>
</head>
<body>
</body>
</html>
出力結果。
本日は晴天なり
JSON文字列をBlobにする
オブジェクトをパースして文字列にし、その文字列をBlobに保存することができます。
<html>
<head>
<script>
// オブジェクトを作成
const obj = {
name: 'Taro',
age: 72,
}
// オブジェクトをシリアライズ
const strObj = JSON.stringify(obj)
// シリアライズしたオブジェクトからBlobを作成
const blob = new Blob([strObj], { type: 'application/json' })
// Blobからデータを読み込み
const reader = new FileReader()
reader.onload = () => {
console.log(reader.result)
}
reader.readAsText(blob)
</script>
</head>
<body>
</body>
</html>
出力結果。
{"name":"Taro","age":72}
問題
Q1: テキストデータのBlobを作成したいときに適当なタイプを答えよ
- text/plain
- application/json
- html/utf-8
Q2: 作成したBlobからリンクを作成したいときに使用する関数を答えよ
- URL.createObjectURL
- File.createObjectURL
- URL.createBlobURL
3.: Blobからデータを読み込みたいときに使うクラスを答えよ
- Reader
- FileReader
- BlobReader
問題の正解はこちら↓
Q1: 1
Q2: 1
Q3: 2