JavaScriptファイル読み込み完全ガイド!10の使い方とサンプルコード

JavaScriptファイル読み込みの初心者向け解説JS
この記事は約19分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めばJavaScriptでファイル読み込みをすることができるようになります。

JavaScript初心者の方でも、ファイル読み込みの方法や使い方を理解し、実際のサンプルコードを実行してみることができます。

●JavaScriptでのファイル読み込みとは

JavaScriptでファイル読み込みとは、外部ファイル(テキストファイル、CSVファイル、JSONファイルなど)を読み込み、その内容をウェブページ上で表示したり、加工・処理したりすることです。

ファイルの読み込みは、File API、XMLHttpRequest、Fetch APIなどの方法があります。

●ファイル読み込みの方法

○File API File

APIは、ユーザーが選択したファイルを読み込むためのAPIです。

FileReaderオブジェクトを使ってファイルを読み込みます。

○XMLHttpRequest

XMLHttpRequestは、サーバーとの非同期通信を行うためのAPIです。

サーバーにあるファイルを読み込むことができます。

○Fetch API

Fetch APIは、XMLHttpRequestのようにサーバーとの非同期通信を行うAPIですが、より簡潔な構文とPromiseベースの処理が特徴です。

●10の使い方とサンプルコード

○サンプルコード1:File APIでテキストファイルを読み込む

<input type="file" id="fileInput">
<pre id="output"></pre>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0]; // ユーザーが選択したファイルを取得
  const reader = new FileReader(); // FileReaderオブジェクトを作成

  reader.onload = function(event) {
    document.getElementById('output').textContent = event.target.result; // ファイルの内容を表示
  };

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

上記のコードでは、ファイルを選択すると、File APIを使ってテキストファイルの内容がウェブページ上に表示されます。

○サンプルコード2:XMLHttpRequestでJSONファイルを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>XMLHttpRequestでJSONファイルを読み込む</title>
</head>
<body>
  <button id="loadJson">JSONファイルを読み込む</button>
  <pre id="output"></pre>

  <script>
    document.getElementById('loadJson').addEventListener('click', function() {
      const xhr = new XMLHttpRequest(); // XMLHttpRequestオブジェクトを作成
      xhr.open('GET', 'data.json'); // data.jsonファイルを読み込むリクエストを作成
      xhr.responseType = 'json'; // レスポンスの形式をJSONに設定

      xhr.onload = function() {
        if (xhr.status === 200) { // ステータスコードが200の場合、成功
          const data = xhr.response; // レスポンスデータを取得
          document.getElementById('output').textContent = JSON.stringify(data, null, 2); // データを整形して表示
        } else {
          console.error('ファイルの読み込みに失敗しました'); // エラーメッセージを表示
        }
      };

      xhr.send(); // リクエストを送信
    });
  </script>
</body>
</html>

上記のコードでは、ボタンをクリックすると、XMLHttpRequestを使ってJSONファイル(data.json)を読み込み、ウェブページ上に表示されます。

○サンプルコード3:Fetch APIでCSVファイルを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Fetch APIでCSVファイルを読み込む</title>
</head>
<body>
  <button id="loadCsv">CSVファイルを読み込む</button>
  <pre id="output"></pre>

  <script>
    document.getElementById('loadCsv').addEventListener('click', async function() {
      try {
        const response = await fetch('data.csv'); // data.csvファイルを読み込むリクエストを作成
        if (response.ok) { // ステータスコードが200の場合、成功
          const text = await response.text(); // レスポンスデータをテキストとして取得
          document.getElementById('output').textContent = text; // データを表示
        } else {
          console.error('ファイルの読み込みに失敗しました'); // エラーメッセージを表示
        }
      } catch (error) {
        console.error('エラー:', error); // エラーメッセージを表示
      }
    });
  </script>
</body>
</html>

上記のコードでは、ボタンをクリックすると、Fetch APIを使ってCSVファイル(data.csv)を読み込み、ウェブページ上に表示されます。

○サンプルコード4:イベントリスナーを使用してファイルを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベントリスナーを使用してファイルを読み込む</title>
</head>
<body>
  <input type="file" id="fileInput">
  <pre id="output"></pre>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0]; // 選択されたファイルを取得
      const reader = new FileReader(); // FileReaderオブジェクトを作成

      reader.onload = function() {
        document.getElementById('output').textContent = reader.result; // 読み込んだ内容を表示
      };

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

上記のコードでは、ファイル選択ボタンからファイルを選択すると、イベントリスナーを使用して、選択されたファイルがFileReaderで読み込まれ、ウェブページ上に表示されます。

○サンプルコード5:FileReaderを使って画像ファイルを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>FileReaderを使って画像ファイルを表示する</title>
</head>
<body>
  <input type="file" id="fileInput">
  <img id="output" alt="選択された画像が表示されます">

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0]; // 選択されたファイルを取得
      const reader = new FileReader(); // FileReaderオブジェクトを作成

      reader.onload = function() {
        document.getElementById('output').src = reader.result; // 読み込んだ画像データを表示
      };

      reader.readAsDataURL(file); // ファイルをデータURLとして読み込む
    });
  </script>
</body>
</html>

上記のコードでは、ファイル選択ボタンから画像ファイルを選択すると、FileReaderを使って選択された画像ファイルが読み込まれ、ウェブページ上に表示されます。

○サンプルコード6:動的にHTML要素を生成してファイルを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>動的にHTML要素を生成してファイルを読み込む</title>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="output"></div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0]; // 選択されたファイルを取得
      const reader = new FileReader(); // FileReaderオブジェクトを作成

      reader.onload = function() {
        const outputDiv = document.getElementById('output');
        const preElement = document.createElement('pre'); // pre要素を作成
        preElement.textContent = reader.result; // 読み込んだ内容を表示
        outputDiv.appendChild(preElement); // pre要素をoutputDivに追加
      };

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

上記のコードでは、ファイル選択ボタンからファイルを選択すると、動的にHTML要素が生成され、選択されたファイルがFileReaderで読み込まれ、ウェブページ上に表示されます。

○サンプルコード7:複数ファイルを一度に読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数ファイルを一度に読み込む</title>
</head>
<body>
  <input type="file" id="fileInput" multiple>
  <div id="output"></div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const files = event.target.files; // 選択された複数のファイルを取得

      for (let i = 0; i < files.length; i++) {
        const file = files[i]; // 各ファイルを取得
        const reader = new FileReader(); // FileReaderオブジェクトを作成

        reader.onload = function() {
          const outputDiv = document.getElementById('output');
          const preElement = document.createElement('pre'); // pre要素を作成
          preElement.textContent = reader.result; // 読み込んだ内容を表示
          outputDiv.appendChild(preElement); // pre要素をoutputDivに追加
        };

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

上記のコードでは、複数選択可能なファイル選択ボタンから複数のファイルを選択すると、選択されたファイルがFileReaderで一度に読み込まれ、ウェブページ上に表示されます。

○サンプルコード8:ファイルをドラッグアンドドロップで読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルをドラッグアンドドロップで読み込む</title>
  <style>
    #dropZone {
      width: 300px;
      height: 200px;
      border: 2px dashed #ccc;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div id="dropZone">ここにファイルをドロップ</div>
  <div id="output"></div>

  <script>
    const dropZone = document.getElementById('dropZone');
    const outputDiv = document.getElementById('output');

    // ドロップゾーンにファイルが入るときの処理
    dropZone.addEventListener('dragover', function(event) {
      event.preventDefault(); // デフォルトイベントを無効にする
      this.style.backgroundColor = '#eee'; // 背景色を変更
    });

    // ドロップゾーンからファイルが離れるときの処理
    dropZone.addEventListener('dragleave', function() {
      this.style.backgroundColor = ''; // 背景色を元に戻す
    });

    // ドロップゾーンにファイルがドロップされたときの処理
    dropZone.addEventListener('drop', function(event) {
      event.preventDefault(); // デフォルトイベントを無効にする
      this.style.backgroundColor = ''; // 背景色を元に戻す

      const file = event.dataTransfer.files[0]; // ドロップされたファイルを取得
      const reader = new FileReader(); // FileReaderオブジェクトを作成

      reader.onload = function() {
        const preElement = document.createElement('pre'); // pre要素を作成
        preElement.textContent = reader.result; // 読み込んだ内容を表示
        outputDiv.appendChild(preElement); // pre要素をoutputDivに追加
      };

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

上記のコードでは、ドラッグアンドドロップでファイルを選択できるようにし、選択されたファイルがFileReaderで読み込まれ、ウェブページ上に表示されます。

○サンプルコード9:プログレスバーを表示してファイル読み込みの進行状況を確認する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プログレスバーを表示してファイル読み込みの進行状況を確認する</title>
</head>
<body>
  <input type="file" id="fileInput">
  <progress id="progressBar" value="0" max="100"></progress>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0]; // 選択されたファイルを取得
      const reader = new FileReader(); // FileReaderオブジェクトを作成
      const progressBar = document.getElementById('progressBar'); // プログレスバーを取得

      // ファイル読み込みの進行状況をプログレスバーに反映
      reader.onprogress = function(event) {
        if (event.lengthComputable) {
          const progress = Math.round((event.loaded / event.total) * 100);
          progressBar.value = progress;
        }
      };

      reader.onload = function() {
        progressBar.value = 100; // 読み込み完了時にプログレスバーを100%にする
        console.log('ファイルの読み込みが完了しました。');
      };

      reader.readAsArrayBuffer(file); // ファイルをArrayBufferとして読み込む
    });
  </script>
</body>
</html>

上記のコードでは、ファイル選択ボタンからファイルを選択すると、ファイルの読み込み進行状況がプログレスバーに表示されます。

○サンプルコード10:エラー処理と対処法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>エラー処理と対処法</title>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="output"></div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0]; // 選択されたファイルを取得
      const reader = new FileReader(); // FileReaderオブジェクトを作成
      const outputDiv = document.getElementById('output');

      reader.onload = function() {
        outputDiv.textContent = 'ファイルの読み込みが完了しました。';
      };

      // エラーが発生したときの処理
      reader.onerror = function() {
        outputDiv.textContent = 'エラーが発生しました:' + reader.error;
      };

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

上記のコードでは、ファイル読み込み中にエラーが発生した場合、エラーメッセージが表示されます。

onerrorイベントハンドラを使って、エラーが発生したときの処理を記述しています。

●注意点

  1. ブラウザのセキュリティ制限により、ローカルファイルへのアクセスが制限される場合があります。
    Webサーバー上で動作させることで回避できます。
  2. 対応していないファイル形式や大きなファイルの読み込みには注意が必要です。
    適切なエラー処理と対処法を実装してください。
  3. ユーザーのプライバシーを尊重し、アップロードされたファイルを適切に扱うことが重要です。

まとめ

この回答では、JavaScriptのFile APIを使用して、ファイルを読み込む方法について説明しました。

さまざまな方法でファイルを読み込むことができますが、エラー処理やプログレス表示を適切に実装することで、より良いユーザーエクスペリエンスを提供できます。