もう迷わない！JavaScriptでテキストファイルを読み込むための網羅的なガイド

2024-04-07

JavaScript でテキストファイルの内容を JavaScript 変数に読み込む方法

FileReader API を使う

FileReader API は、ブラウザ上でファイルを読み書きするための API です。この API を使うと、テキストファイルだけでなく、画像ファイルや音声ファイルなどの読み込みも可能です。

const readFile = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.target.result);
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.readAsText(file);
  });
};

(async () => {
  const file = document.querySelector('input[type="file"]').files[0];
  const text = await readFile(file);
  console.log(text);
})();

このコード例では、HTML に <input type="file"> 要素を用意し、ユーザーがファイルを選択したら readFile 関数を実行してファイルの内容を読み込んでいます。readFile 関数は Promise を返しており、ファイルの内容が読み込まれたら resolve 関数に、読み込みに失敗したら reject 関数に渡されます。

XMLHttpRequest を使う

XMLHttpRequest は、ブラウザから Web サーバーにリクエストを送信し、レスポンスを取得するための API です。この API を使って、サーバー上のテキストファイルを JavaScript 変数に読み込むこともできます。

const loadFile = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(`Failed to load file: ${url}`));
      }
    };
    xhr.onerror = (error) => {
      reject(error);
    };
    xhr.send();
  });
};

(async () => {
  const url = 'https://example.com/text.txt';
  const text = await loadFile(url);
  console.log(text);
})();

同じドメイン上のファイルを読み込む場合: FileReader API を使うのが一般的です。
異なるドメイン上のファイルを読み込む場合: XMLHttpRequest を使う必要があります。
ファイルのサイズが大きい場合: XMLHttpRequest を使う方が効率的です。

テキストファイルの内容をエンコーディングされた形式で読み込みたい場合は、readAsDataURL メソッドを使うことができます。

以上が、JavaScript でテキストファイルの内容を JavaScript 変数に読み込む方法の説明です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイルを読み込む</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="readFile()">ファイルを読み込む</button>
  <div id="output"></div>

  <script>
    const readFile = () => {
      const file = document.getElementById('fileInput').files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          const text = event.target.result;
          document.getElementById('output').textContent = text;
        };
        reader.readAsText(file);
      } else {
        alert('ファイルを選択してください');
      }
    };
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストファイルを読み込む</title>
</head>
<body>
  <button onclick="loadFile()">ファイルを読み込む</button>
  <div id="output"></div>

  <script>
    const loadFile = () => {
      const url = 'https://example.com/text.txt';
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.onload = () => {
        if (xhr.status === 200) {
          const text = xhr.responseText;
          document.getElementById('output').textContent = text;
        } else {
          alert('ファイルの読み込みに失敗しました');
        }
      };
      xhr.onerror = () => {
        alert('ファイルの読み込みに失敗しました');
      };
      xhr.send();
    };
  </script>
</body>
</html>

このコードでは、HTML にボタンを用意し、ボタンをクリックしたら loadFile 関数を実行してサーバー上のテキストファイルを非同期的に読み込んでいます。loadFile 関数は、XMLHttpRequest API を使ってサーバー上のテキストファイルを読み込み、読み込んだ内容を output 要素に表示します。

上記はあくまで基本的な例ですので、ご自身の用途に合わせてコードを修正してください。

補足

上記のコードは、あくまでも動作確認を目的としたものです。本番環境で使用する場合は、セキュリティ対策やエラー処理などを追加する必要があります。
ファイルを読み込む前に、ユーザーの許可を得るようにする必要があります。
大容量のファイルを読み込む場合は、パフォーマンスに影響を与える可能性があります。

JavaScript でテキストファイルを読み込むその他の方法

Node.js は、JavaScript でサーバーサイドプログラミングを行うためのランタイム環境です。Node.js を使うと、fs モジュールを使ってテキストファイルを非同期的に読み込むことができます。

const fs = require('fs');

fs.readFile('text.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

利点:

サーバーサイドでファイル処理が可能
大容量のファイルでも効率的に処理できる

ブラウザ上で動作しない
Node.js のインストールが必要

const fs = require('fs');

fs.readFile('text.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

ブラウザだけでなく、デスクトップアプリでもファイル処理が可能
Node.js のような複雑な設定が不要

アプリケーションの開発が必要

WebAssembly は、Web ブラウザ上でネイティブコードを実行するためのバイナリ形式です。WebAssembly を使うと、C++ や Rust などの言語で記述された高速なファイル処理モジュールを呼び出すことができます。

const wasm = await WebAssembly.instantiate(fetch('file.wasm'));
const readFile = wasm.instance.exports.readFile;

const buffer = new Uint8Array(await fetch('text.txt').then(res => res.arrayBuffer()));
const data = readFile(buffer);
console.log(String.fromCharCode(...data));