FileReader()とは？JavaScriptでファイルを読み込む方法を基礎から解説

2026.05.08

JavaScript

ノートパソコンでテキストや画像などのファイルを読み込み、ブラウザ上で処理している様子 — JavaScriptのFileReader()を使ってローカルファイルを読み込むイメージ

JavaScriptでローカルファイルを扱う場合に重要となるのが FileReader() です。

FileReaderを使うことで、ユーザーが選択したテキストファイルや画像ファイルをブラウザ上で読み込み、内容を表示できます。
フォームのプレビュー機能やCSV読み込み、画像表示など、多くの場面で活用されています。

この記事では、FileReader()の基本から使い方、代表的なメソッド、実践例、注意点までを基礎からわかりやすく解説します。

FileReader()とは

FileReader() は、JavaScriptでファイル内容を読み込むためのオブジェクトです。

ブラウザ上でユーザーが選択したファイルを読み込み、テキストや画像データとして扱えるようになります。

たとえば、次のような用途で利用されます。

テキストファイルの内容表示
CSVファイルの読み込み
画像プレビュー表示
JSONファイルの解析
ドラッグ＆ドロップアップロード

FileReaderはブラウザ標準機能のため、追加ライブラリなしで利用できます。

FileReader()の基本構文

まずは基本構文を確認します。

const reader = new FileReader();

FileReaderオブジェクトを生成し、その後に読み込みメソッドを実行します。

基本的な流れは次の通りです。

ファイルを取得する
FileReaderを作成する
読み込みを開始する
読み込み完了後に結果を取得する

FileReader()の基本的な使い方

まずはテキストファイルを読み込む基本例を見てみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>FileReaderの基本</title>
</head>
<body>
  <input type="file" id="fileInput">
  <pre id="result"></pre>

  <script>
    const fileInput = document.getElementById("fileInput");
    const result = document.getElementById("result");

    fileInput.addEventListener("change", (event) => {
      const file = event.target.files[0];

      if (!file) {
        return;
      }

      const reader = new FileReader();

      reader.onload = () => {
        result.textContent = reader.result;
      };

      reader.readAsText(file);
    });
  </script>
</body>
</html>

処理の流れを理解する

上記コードでは、次の流れで処理しています。

ファイルを取得する

const file = event.target.files[0];

input type="file" で選択されたファイルを取得しています。

FileReaderを生成する

const reader = new FileReader();

読み込み専用のオブジェクトを作成しています。

onloadで読み込み完了を待つ

reader.onload = () => {
  result.textContent = reader.result;
};

ファイル読み込みは非同期処理です。

そのため、読み込み完了後に onload が実行されます。

JavaScriptの非同期処理については、以下の記事も参考になります。

JavaScriptの非同期処理とは？Promiseとasync/awaitの基礎
JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説
JavaScriptのasync/awaitとは？使い方を基礎から解説

ファイルを読み込む

reader.readAsText(file);

テキスト形式でファイルを読み込んでいます。

FileReader()の主な読み込みメソッド

FileReaderには複数の読み込み方法があります。

メソッド	内容
readAsText()	テキストとして読み込む
readAsDataURL()	Base64形式で読み込む
readAsArrayBuffer()	バイナリデータとして読み込む
readAsBinaryString()	バイナリ文字列として読み込む（非推奨）

readAsText()の使い方

テキストファイルやCSVを扱う場合によく使われます。

reader.readAsText(file);

CSV処理については以下の記事も参考になります。

JavaScriptでcsvを処理する方法

readAsDataURL()で画像を表示する

画像プレビューでは readAsDataURL() がよく利用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像プレビュー</title>
</head>
<body>
  <input type="file" id="imageInput" accept="image/*">
  <img id="preview" width="300">

  <script>
    const imageInput = document.getElementById("imageInput");
    const preview = document.getElementById("preview");

    imageInput.addEventListener("change", (event) => {
      const file = event.target.files[0];

      if (!file) {
        return;
      }

      const reader = new FileReader();

      reader.onload = () => {
        preview.src = reader.result;
      };

      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

readAsArrayBuffer()の使い方

バイナリデータを扱う場合に利用されます。

reader.readAsArrayBuffer(file);

主に以下の用途で使われます。

音声ファイル処理
動画データ処理
バイナリ解析
独自ファイル形式の読み込み

FileReader()で利用できるイベント

FileReaderには複数のイベントがあります。

イベント	内容
loadstart	読み込み開始
progress	読み込み中
load	読み込み成功
error	エラー発生
abort	中断
loadend	読み込み終了

progressイベントで進捗表示する

大きなファイルでは進捗表示が便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FileReaderの進捗表示</title>
</head>
<body>
  <h1>FileReaderの進捗表示</h1>

  <input type="file" id="fileInput">
  <p id="status"></p>

  <script>
    const fileInput = document.getElementById("fileInput");
    const statusElement = document.getElementById("status");

    fileInput.addEventListener("change", (event) => {
      const file = event.target.files[0];

      if (!file) {
        return;
      }

      const reader = new FileReader();

      reader.onprogress = (e) => {
        if (e.lengthComputable) {
          const percent = Math.floor((e.loaded / e.total) * 100);
          statusElement.textContent = `${percent}% 読み込み中`;
        }
      };

      reader.onload = () => {
        statusElement.textContent = "読み込み完了";
      };

      reader.onerror = () => {
        statusElement.textContent = "読み込みに失敗しました";
      };

      reader.readAsText(file);
    });
  </script>
</body>
</html>

FileReader()使用時の注意点

FileReaderを使う際は、いくつか注意点があります。

非同期処理である

FileReaderは即時に結果を返しません。

次のコードは誤った例です。

const reader = new FileReader();

reader.readAsText(file);

console.log(reader.result);

読み込み完了前に result を参照しているため、正しく取得できません。

必ず onload 内で処理します。

大容量ファイルは負荷が高い

巨大ファイルを一括読み込みすると、ブラウザ負荷が高くなります。

特に以下は注意が必要です。

数百MB以上のファイル
大量画像
動画ファイル

必要に応じて分割処理やサーバー処理を検討します。

セキュリティ上の制約がある

FileReaderはユーザーが選択したファイルのみアクセス可能です。

JavaScriptから勝手にローカルファイルを読むことはできません。

これはブラウザの重要なセキュリティ仕様です。

FileReader()とBlobの関係

FileReaderは Blob や File オブジェクトを読み込みます。

File は Blob を継承しています。

console.log(file instanceof Blob);

Blobについては以下の記事も参考になります。

JavaScriptのBlobとは？使い方を基礎から解説

FileReader()を使う場面

FileReaderは実務でもよく利用されます。

代表例は次の通りです。

用途	内容
画像アップロード	プレビュー表示
CSV読み込み	データ解析
JSON読み込み	設定ファイル解析
ドラッグ＆ドロップ	ファイル処理
PDFアップロード	内容確認

FileReader()とfetch()の違い

混同されやすい機能として fetch() があります。

機能	FileReader	fetch
ローカルファイル	○	×
サーバーデータ取得	×	○
ファイル入力連携	○	×

fetchについては以下の記事も参考になります。

JavaScriptのfetch()とは？API通信の基本を解説

まとめ

FileReader()は、JavaScriptでローカルファイルを扱うための重要な機能です。

特に以下はよく利用されます。

readAsText() によるテキスト読み込み
readAsDataURL() による画像プレビュー
onload を使った非同期処理
progress による進捗管理

フォーム機能や画像アップロードでは非常に利用頻度が高いため、基本を理解しておくと実装の幅が大きく広がります。

JavaScriptでcsvを処理する方法
JavaScriptの非同期処理とは？基本をわかりやすく解説
JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説
JavaScriptのasync/awaitとは？使い方を基礎から解説
JavaScriptのfetch()とは？API通信の基本を解説
JavaScriptのBlobとは？使い方を基礎から解説