JavaScriptのBlobの使い方: データをバイナリデータに変換する

48, 2020-09-17

目次

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を作成します。
このときオブジェクトはBlobFileのどちらかです。
作成されたURLは現在のdocumentに結び付けられ、そのdocumentが有効なうちはURLをクリックするとそのオブジェクトをダウンロードすることが可能になります。
このURLを開放するにはrevokeObjectURLを使用します。

つまり↑のコードは作成したリンクのhrefにオブジェクトをダウンロードできるURLを指定しているわけです。

Blobからデータを読み込む

Blobからデータを読み込むにはFileReaderを使います。
FileReaderreadAsTextメソッドで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を作成したいときに適当なタイプを答えよ

  1. text/plain

  2. application/json

  3. html/utf-8

Q2: 作成したBlobからリンクを作成したいときに使用する関数を答えよ

  1. URL.createObjectURL

  2. File.createObjectURL

  3. URL.createBlobURL

@3: Blobからデータを読み込みたいときに使うクラスを答えよ

  1. Reader

  2. FileReader

  3. BlobReader


問題の正解はこちら↓

Q1: 1
Q2: 1
Q3: 2