【JavaScript】ファイル読み込みを初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

皆さんは、ウェブアプリケーションを作成する過程で「ファイルを読み込む」という操作に直面したことはありませんか。
たとえば、画像のプレビュー表示やテキストファイルの内容確認などは、JavaScriptでファイルを読み込む典型的な活用シーンと言えるでしょう。

本記事では、JavaScriptでファイルを読み込む方法について、ブラウザ環境とNode.js環境の両面で具体的に解説します。
初心者の方でも理解しやすいように、サンプルコードを交えながら解説しますので、ぜひ参考にしてみてください。

この記事を読むとわかること

  • JavaScriptでファイルを読み込むための基本的な仕組み
  • ブラウザ上でファイルを読み込む主な手法（FileReader、fetch など）
  • Node.jsでファイルを操作する方法
  • ファイル読み込みを実務でどう活用するかの具体例
  • セキュリティやパフォーマンス面で意識すべきポイント

ファイル読み込みの概要

JavaScriptでファイルを読み込む際には、どこにファイルが存在するかによってアプローチが大きく変わります。
ブラウザ上でユーザーがアップロードしたファイルを読み込む場合と、サーバーサイドやNode.js環境で操作する場合では使うAPIや手順が異なるためです。

以下では、ブラウザ環境とNode.js環境に分けてそれぞれ詳しく見ていきましょう。
ただ、その前に「ファイルを読み込む」行為が実務でどんな場面に役立つのか、少しイメージを膨らませてみたいと思います。

実務でよくある活用例

ローカルファイルのプレビュー

画像やPDFなどをアップロードする前に内容を確認できる仕組みがあります。
たとえば、ユーザーがファイルを選択した直後にプレビューを表示し、間違ったファイルを選んでいないかチェックしてもらうといったケースは身近ではないでしょうか。
これにはブラウザのFileReader APIがよく使われます。

CSVやJSONのインポート

ユーザーが持っているCSVやJSONファイルをブラウザ上で読み込んで、その内容に基づいて画面表示を変える場面も多いです。
フォーム入力を省力化したり、外部ツールで生成したデータを取り込んだりすることで、作業を効率化できます。

Node.jsでのファイル操作

サーバーサイド処理やローカルスクリプトを作成するときに、テキストファイルを読み込んで設定を取得したり、ログを解析したりすることがあります。
Node.jsには独自のファイル操作APIが備わっていて、fsモジュールによる同期・非同期の読み込み方法が用意されています。

これらの背景を理解しておくと、なぜJavaScriptでのファイル読み込みが重要なのか、その理由がより明確になるはずです。

ブラウザ環境でのファイル読み込み

ブラウザ上でファイルを読み込む手段には、大きく分けてFileReaderやfetch APIなどがあります。
ここでは代表的な方法をいくつか紹介します。
まずはユーザーがローカルファイルを選択した際に、そのファイルを即座に読み込む場合から見ていきましょう。

FileReader APIでの読み込み

ブラウザでユーザーが選択したローカルファイルを扱うには、FileReader APIが便利です。
これは、フォームタグの<input type="file" />などで選んだファイルの中身をJavaScriptで取得し、テキストやバイナリデータなどを操作できるAPIです。

FileReader APIの基本的な使い方

以下のコード例では、HTML上に設置したファイル入力とボタンを使い、読み込んだ内容をコンソールに表示しています。
ユーザーがテキストファイルを選択すると、reader.readAsText()を通してテキストデータとして取得できる仕組みです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>FileReader Example</title>
</head>
<body>
  <input type="file" id="fileInput" />
  <button id="readButton">ファイルを読み込む</button>

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

    readButton.addEventListener("click", () => {
      const file = fileInput.files[0];
      if (!file) {
        console.log("ファイルが選択されていません");
        return;
      }

      const reader = new FileReader();
      reader.onload = (event) => {
        console.log("ファイルの内容:", event.target.result);
      };
      reader.onerror = (error) => {
        console.error("読み込みエラーが発生しました", error);
      };

      // テキストファイルとして読み込む場合
      reader.readAsText(file);
    });
  </script>
</body>
</html>

このコードでは、ユーザーが選択した最初のファイル（fileInput.files[0]）をFileReaderで処理しています。
テキストファイルの中身が読み込まれるとonloadが呼ばれ、結果をコンソールに表示します。

FileReaderで画像プレビューを行う

同じように画像ファイルを読み込む場合は、readAsDataURL()を使います。
これにより、Base64形式のデータが返されるため、<img>タグのsrc属性に代入すればプレビューが簡単に可能です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>FileReader Image Preview</title>
</head>
<body>
  <input type="file" id="imgInput" accept="image/*" />
  <img id="preview" alt="Preview Image" style="max-width: 300px;" />

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

    imgInput.addEventListener("change", () => {
      const file = imgInput.files[0];
      if (!file) {
        return;
      }

      const reader = new FileReader();
      reader.onload = (event) => {
        preview.src = event.target.result;
      };
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

これで、ユーザーが選択した画像をすぐにプレビュー表示できます。
実務でも画像の確認などによく使われる手法です。

fetch APIでの読み込み

ローカルファイルではなく、サーバー上にあるファイルや外部リソースを取得したい場合にはfetch APIがよく利用されます。
ファイルというよりはリソース取得全般に使われるメソッドですが、サーバー内のJSONやテキストファイルをJavaScriptで読み込むケースでは非常に便利です。

fetchの基本コード

以下の例では、同じドメインに配置しているdata.txtというテキストファイルを読み込んでいます。
JSONを読み込みたい場合はresponse.json()を使いますが、テキストの場合はresponse.text()を利用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>fetch Example</title>
</head>
<body>
  <button id="fetchButton">ファイル取得</button>

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

    fetchButton.addEventListener("click", () => {
      fetch("data.txt")
        .then(response => {
          if (!response.ok) {
            throw new Error("ネットワークエラー");
          }
          return response.text();
        })
        .then(data => {
          console.log("取得したデータ:", data);
        })
        .catch(error => {
          console.error("エラーが発生しました:", error);
        });
    });
  </script>
</body>
</html>

この方法だと、外部のAPIエンドポイントからデータを取得する場合にも応用できます。
たとえば、リモートサーバーにあるCSVファイルを取得して、そのデータを画面上に表示するといったことも簡単に行えます。

セキュリティ上の注意点

ブラウザ上のJavaScriptでは、ユーザーが明示的にファイルを選択した場合しかローカルファイルを操作できません。
これはセキュリティ保護の観点から重要な制限です。
また、外部リソースを取得する際は同一オリジンポリシーなどのクロスオリジン制約が絡んでくる場合があります。
APIや外部ファイルを読み込む際にはCORSの設定が必要になることもありますので、実務ではリソースの配置先やHTTPヘッダーの設定に注意しましょう。

Node.js環境でのファイル読み込み

次に、Node.jsを使ってファイルを読み込む方法を見ていきましょう。
Node.jsでは、ブラウザのFileReader APIとは異なり、サーバーサイドやローカルスクリプトでのファイル操作が可能です。
ウェブアプリケーションのバックエンド部分やスクリプトの自動化など、さまざまな実務で役立ちます。

fsモジュールの基本

Node.jsにはfs（ファイルシステム）モジュールが標準搭載されていて、これを使うと簡単にファイル読み込みができます。
以下のサンプルは、テキストファイル（example.txt）を読み込んでコンソールに出力しています。

const fs = require("fs");

fs.readFile("example.txt", "utf8", (err, data) => {
  if (err) {
    console.error("ファイル読み込みエラー:", err);
    return;
  }
  console.log("ファイルの内容:", data);
});

コールバック形式のfs.readFile()を使うと、読み込み結果は非同期的に取得できます。
一方で同期的に読み込みたい場合はfs.readFileSync()を使いますが、処理がブロックされるため大規模システムではあまり推奨されません。
ただし、小規模なスクリプトや設定ファイルの読み込みなどでは重宝する場合もあります。

const fs = require("fs");

try {
  const data = fs.readFileSync("example.txt", "utf8");
  console.log("ファイルの内容:", data);
} catch (err) {
  console.error("ファイル読み込みエラー:", err);
}

Promiseやasync/awaitを使った読み込み

Node.jsでは、Promiseやasync/await構文を使うとより直感的にファイルを読み込むこともできます。
以下のサンプルコードではfs.promisesを利用しています。

const fs = require("fs").promises;

async function readFileAsync(filePath) {
  try {
    const data = await fs.readFile(filePath, "utf8");
    console.log("ファイルの内容:", data);
  } catch (err) {
    console.error("ファイル読み込みエラー:", err);
  }
}

readFileAsync("example.txt");

このアプローチだと、他の非同期処理と組み合わせる際にコードが読みやすくなるメリットがあります。
複数のファイルを連続して処理したり、エラーが発生した場合に後続の処理を中断したりといったフローを制御しやすくなるでしょう。

バイナリデータの読み込み

テキストだけでなく、バイナリデータも読み込めます。
画像ファイルやPDFなどをNode.jsで取り扱いたい場合は、エンコーディング指定を省略してBufferとして受け取る方法があります。
読み込んだ後は、Base64エンコードやファイル転送など、さまざまな操作を行うことが可能です。

const fs = require("fs");

fs.readFile("image.png", (err, data) => {
  if (err) {
    console.error("読み込みエラー:", err);
    return;
  }
  console.log("バイナリデータの長さ:", data.length);
  // Base64形式に変換する場合
  const base64Data = data.toString("base64");
  console.log("Base64:", base64Data);
});

バイナリファイルを扱う場合は、ファイルのサイズやメモリ使用量にも注意が必要です。
大容量ファイルを読み込む時はストリーム処理を検討することがよくあります。

大容量ファイルを扱う際のストリーム処理

テキストファイルにしてもバイナリファイルにしても、サイズが非常に大きくなる場合は一括読み込みをするとメモリに負荷がかかりすぎることがあります。
そうした場合、 ストリーム (stream)による分割読み込みが検討されます。
特にNode.jsではfs.createReadStream()を使うとデータを少しずつ読み込めます。

const fs = require("fs");

const readStream = fs.createReadStream("largeFile.txt", { encoding: "utf8" });
let fileContent = "";

readStream.on("data", (chunk) => {
  // chunk には分割された文字列が入る
  fileContent += chunk;
});

readStream.on("end", () => {
  console.log("ファイル読み込み完了");
  console.log(fileContent);
});

readStream.on("error", (err) => {
  console.error("ストリームエラー:", err);
});

この方法では、大きなファイルをメモリに一気に読み込まずに済むため、サーバーの負担を抑えながら処理ができます。
ファイルアップロードや巨大ログの解析など、実務で頻繁に活用される手法です。

実務で意識すべきポイント

ここまで基本的なファイル読み込み方法を見てきましたが、いざ本格的なシステムを構築しようとすると、単純にファイルを読み込むだけではなくセキュリティやパフォーマンスを意識する必要があります。

セキュリティ

  • ブラウザ環境の場合は、ユーザーが明示的に選択したファイルしか読めない
  • fetchで外部ファイルを読み込む際は、CORSなどのセキュリティ設定を確認
  • Node.jsでファイル操作を行う際は、ファイルパスの指定に注意（ディレクトリトラバーサルの危険性など）

パフォーマンス

  • サイズが大きいファイルはストリームを使う
  • 一括読み込みが必要な場合でも、圧縮ファイルを扱うかどうか検討する
  • ブラウザで画像プレビューを行う場合は、画像サイズが巨大にならないようにする

拡張子とデータ形式

  • テキストファイルかバイナリファイルか、あるいはJSONやCSVかによって読み込み手法が若干異なる
  • JSONファイルの場合は、テキストとして読み込んだ後にJSON.parse()でオブジェクトに変換
  • CSVの場合は、カンマ区切りをパースする処理が必要

こうした点を押さえておくと、ファイル入出力にまつわるトラブルを未然に防ぎやすくなります。

ファイル読み込みと実務シーンの具体例

少し踏み込んで、実際の業務でファイル読み込みがどのように役立つかをさらに掘り下げてみましょう。

バッチ処理でのログ解析

サーバーに蓄積されたログファイルを定期的に解析し、特定のエラーが発生していないかをチェックする仕組みは多くの現場で見られます。
Node.jsを使ったバッチスクリプトでfsモジュールやストリームを活用すると、数GB規模のログファイルでも比較的効率的に解析可能です。
一定のキーワードが含まれていたら通知するなど、簡易的なアラートシステムを組むのも難しくありません。

ユーザーインポート機能

ブラウザの管理画面でユーザー情報を一括登録する際に、CSVファイルを読み込んでシステムに反映する場面があります。
この場合、JavaScriptでファイルを読み込み、CSVをパースしてAPIに送信するといった流れが考えられます。
FileReaderを使えばローカルのCSVを簡単にテキストとして取得できるため、ユーザーをバルクインポートする機能を短時間で実装できるでしょう。

画像変換ツール

社内で使う簡易的な画像変換ツール（例えば、サイズを変更したり、Base64に変換したり）のようなものを作るときにも、ローカル画像を読み込んでブラウザ上で処理する方法が有効です。
FileReaderで読み込んだ後、Canvas APIや外部ライブラリを組み合わせることで、閲覧者のPC内で変換が完結するため、サーバーサイドに画像を送信しなくても済むメリットがあります。

ブラウザ上で完結する処理は、ネットワークトラフィックの削減やプライバシー保護にもつながります。

エラー処理とデバッグのポイント

ファイル操作にはエラーがつきものです。
特に、ファイルパスの入力ミスやファイルが存在しない場合、権限が不足している場合など、さまざまなトラブルが想定されます。
初心者の方はエラーが出ると戸惑いやすいかもしれませんが、エラー内容をしっかりと確認し、落ち着いて対処しましょう。

典型的なエラー例

  • ブラウザのFileReaderでのエラー

    • ファイルが選択されていない
    • ファイルが壊れている
    • 画像ファイルをreadAsTextで読み込んでいる

  • fetch APIでのエラー

    • ネットワークにアクセスできない（サーバーがダウン・URLが間違い）
    • CORSの設定が不十分でブロックされる
    • HTTPステータスがエラーを示している

  • Node.jsのfsモジュールでのエラー

    • ファイルパスが間違っている
    • ファイルの読み込み権限がない
    • ファイルが巨大すぎてメモリ使用量が膨大になる

デバッグのやり方

  • ブラウザの場合は開発者ツールのコンソールを確認
  • Node.jsの場合はログ出力やデバッガを活用
  • それぞれ、必要に応じてスタックトレース（エラー時の呼び出し履歴）を確認すると原因追及が速い

このように、ファイル操作の際はエラー処理をきちんと組み込むことで、想定外の状況でもシステムが安定して動作しやすくなります。

ファイル形式ごとの注意点

さまざまなファイル形式を扱う場合、それぞれに応じたパースや変換が必要です。
実務で特によく登場する形式をざっと整理しましょう。

テキストファイル（.txt）

  • 改行コードがOSによって異なることがある
  • 文字コード（UTF-8やShift_JISなど）に注意
  • JavaScriptで扱う場合はUTF-8が基本

CSVファイル

  • カンマ区切り、タブ区切りなど形式が統一されているか確認
  • ダブルクオートで文字列を囲んでいるかなど、パースロジックを確定する必要がある
  • 仕組みとしてはテキストファイルなのでFileReaderなどで扱いやすい

JSONファイル

  • テキストとして読み込み、JSON.parse()でオブジェクトに変換
  • 余計な文字やフォーマット崩れがあるとパースに失敗する
  • fetchで取得し、response.json()を使うパターンも多い

画像ファイル（.png, .jpg, .gif など）

  • ブラウザではFileReaderのreadAsDataURL、Node.jsではバイナリデータで読み込み
  • 画像編集や圧縮を行う場合は別途ライブラリが必要

PDFファイル

  • ブラウザ上でプレビューするなら、iframeやPDF表示用ライブラリを併用
  • Node.jsではPDFのテキスト抽出が必要な場合があるが、それには専用ライブラリが一般的

このように、ファイル形式によって少しずつ意識すべきポイントが変わるため、実装前に仕様をしっかり整理することが大切です。

ファイル読み込みを効率化するテクニック

実務でファイルをたくさん扱う場合には、少し工夫するだけで開発効率が格段に上がることがあります。

分割ファイルの扱い

大量のデータを複数の小さなファイルに分割し、それを順次読み込むことでメモリ消費量を管理しやすくします。
ログ解析などでは、日ごとにログファイルを区切る運用が一般的です。
こうしておけば、特定の日付のデータだけを読みたいという要件にも柔軟に対応しやすいです。

読み込みと同時の加工

ブラウザ上でのCSVインポートなどでは、読み込んだテキストをすぐにオブジェクトに変換してしまい、UIに反映する実装がよく使われます。
まとめて読み込んでから一度に処理するのではなく、ストリーム的に一行ずつパースして処理する方法を取れば、ファイルが大きくてもUIがフリーズしにくくなります。
Node.js側でも、ファイル読み込み時にイベントが流れてくるたびに加工することで、不要なメモリの大量使用を回避できるでしょう。

大きなファイルや連続処理が予想される場合は、コードの途中でメモリ消費量に気を配ると安定した動作に繋がります。

まとめ

ここまで、JavaScriptでのファイル読み込みに関して幅広く解説してきました。
ブラウザ環境でのFileReader APIやfetch API、Node.js環境でのfsモジュールなど、扱える範囲が非常に多岐にわたるため、一度にすべてを習得するのは大変かもしれません。
ですが、実務でよく使われる場面を意識しながら少しずつ試していくことで、自然と使いこなせるようになります。

特に初心者の方は、まずは小さなテキストファイルを読み込むコードから始めて、画像プレビューなどの実用的な機能にも挑戦してみるのがおすすめです。
慣れてきたらNode.jsでのファイル操作にもトライし、ストリームを使った大容量ファイルの扱いなどにステップアップしてみてください。

ファイル読み込みはウェブ開発やサーバーサイド開発のあらゆる場面で活躍します。
ぜひ今回紹介した方法を活用して、皆さんのプロジェクトや学習に役立ててみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説