FileReader APIを使用したファイル操作

Webアプリでユーザーがファイルを選択すると、Fileオブジェクトが取得できますが、その内容を実際に読み取るにはどうすればよいでしょうか?そこで登場するのがJavaScriptのFileReader APIです。この記事では、FileReaderの動作原理、使用すべきタイミング、そして最新の代替手段との比較について解説します。

FileReader APIとは?

FileReader APIは、FileまたはBlobオブジェクトの内容を非同期で読み取るブラウザインターフェースです。パスを指定してユーザーのシステム上の任意のファイルにアクセスすることはできません。<input type="file">またはドラッグ&ドロップ操作を通じてユーザーが明示的に選択したファイルのみを扱います。

const input = document.querySelector('input[type="file"]')

input.addEventListener('change', () => {
  const file = input.files[0]
  console.log(file.name, file.size, file.type)
})

FileオブジェクトはBlobを継承しているため、同じプロパティに加えてnameとlastModifiedを持ちます。これをFileReaderの読み取りメソッドに直接渡すことができます。

3つの主要な読み取りメソッド

FileReaderを使用してJavaScriptでローカルファイルを読み取る際は、適切な出力形式を選択する必要があります:

• readAsText(file, encoding?) — ファイルの内容を文字列として返します。デフォルトはUTF-8です。CSV、JSON、プレーンテキスト、またはあらゆるテキストベースの形式に有用です。
• readAsArrayBuffer(file) — 生のバイナリデータをArrayBufferとして返します。画像、音声、PDF、またはあらゆるバイナリ処理に使用します。
• readAsDataURL(file) — base64エンコードされたdata: URLを返します。画像プレビューに便利ですが、base64エンコーディングのオーバーヘッドにより、結果は元のファイルより約33%大きくなることに注意してください。

readAsBinaryString()は避けてください — 非推奨です。バイナリデータには代わりにreadAsArrayBuffer()を使用してください。

FileReaderのイベント駆動型モデル

FileReaderは非同期で、イベントを通じて通信します。主要なイベントは以下の通りです:

以下は、readAsDataURL()を使用したアップロード前の画像プレビューの実用的な例です:

function previewImage(file) {
  const reader = new FileReader()

  reader.addEventListener('load', () => {
    const img = document.querySelector('#preview')
    img.src = reader.result
  })

  reader.addEventListener('error', () => {
    console.error('Failed to read file:', reader.error)
  })

  reader.readAsDataURL(file)
}

progressイベントは、大きなファイルでプログレスバーを表示する際に特に有用です:

reader.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percent = Math.round((event.loaded / event.total) * 100)
    progressBar.value = percent
  }
})

FileReaderをPromiseでラップする

FileReaderのコールバックスタイルは、最新の非同期コードでは扱いにくく感じることがあります。シンプルなラッパーでこれを解決できます:

function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.addEventListener('load', () => resolve(reader.result))
    reader.addEventListener('error', () => reject(reader.error))
    reader.readAsText(file)
  })
}

// 使用例
const text = await readFileAsText(file)

FileReader vs Blob.text()とBlob.arrayBuffer()

最新のブラウザは、Blob(したがってFile)上で直接Promiseベースのメソッドをサポートしています:

// 最新のアプローチ — 基本的な読み取りにはよりシンプル
const text = await file.text()
const buffer = await file.arrayBuffer()

では、いつFileReaderを使用すべきでしょうか?以下の場合に選択してください:

• 進捗状況の追跡がprogressイベント経由で必要な場合(ただし、ローカルファイルの場合、一部のブラウザでは少数のprogressイベントしか発火しない可能性があります)
• UTF-8以外のエンコーディングのサポートがreadAsText(file, 'ISO-8859-1')経由で必要な場合
• Base64データURLがreadAsDataURL()経由で必要な場合
• より広範なレガシーブラウザサポートが必要な場合

最新のアプリで単純なテキストまたはバイナリ読み取りを行う場合、Blob.text()とBlob.arrayBuffer()の方がクリーンです。画像プレビューの場合、URL.createObjectURL(file)はbase64の膨張を回避し、一般的にreadAsDataURL()よりもメモリ効率が良好です。ただし、メモリリークを避けるため、オブジェクトURLが不要になったらURL.revokeObjectURL()を呼び出すことを忘れないでください。

まとめ

FileReader APIは、ブラウザでFileオブジェクトを扱う際の実用的なツールであり続けています。特に進捗イベント、エンコーディング制御、データURLが必要な場合に有用です。よりシンプルなケースでは、新しいBlobメソッドの方が少ないコードで済みます。両方を理解しておけば、あらゆるファイル読み取りシナリオをクリーンに処理できます。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.