JavaScriptのBlobの使い方: データをバイナリデータに変換する
目次
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