JavaScriptでCSVファイルを読み込む：初心者向け完全ガイド

2024-05-21

JavaScriptとjQueryでCSVファイルを読み込む方法

CSVファイルは、カンマで区切られたデータの表形式で保存されたデータファイルです。JavaScriptとjQueryを使用して、WebページでCSVファイルを読み込み、分析、処理することができます。

方法

ファイルの選択
ファイルの読み込み
- FileReader APIを使用して、選択されたファイルを非同期的に読み込みます。
- readAsText()メソッドを使用して、ファイルをテキストデータとして読み込みます。
CSVデータの解析
- 各行を配列に格納します。
データの処理
- 読み込んだデータを処理して、必要な分析や操作を実行します。

jQueryライブラリを使用すると、JavaScriptでのCSVファイル処理をより簡単に実行できます。

jQuery.get()メソッドを使用して、サーバーからCSVファイルを非同期的に読み込むことができます。
Papa Parseなどのライブラリを使用して、CSVデータの解析を簡略化できます。

例

以下のコードは、jQueryを使用してCSVファイルを読み込み、表形式で表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSVファイル読み込み</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#file-input").change(function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
          var csvData = e.target.result;
          var data = Papa.parse(csvData);
          var table = $('<table>');
          for (var row in data.data) {
            var tr = $('<tr>');
            for (var col in data.data[row]) {
              var td = $('<td>').text(data.data[row][col]);
              tr.append(td);
            }
            table.append(tr);
          }
          $('#output').html(table);
        };
        reader.readAsText(file);
      });
    });
  </script>
</head>
<body>
  <input type="file" id="file-input">
  <div id="output"></div>
</body>
</html>

補足

上記はあくまで基本的な例であり、より複雑な処理を行う場合は、追加的なコードが必要となります。
セキュリティ上の理由から、クライアントサイドで実行するJavaScriptコードでユーザーがアップロードしたファイルを読み込む場合は、注意が必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSVファイル読み込み</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#file-input").change(function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
          var csvData = e.target.result;
          var data = Papa.parse(csvData);
          var table = $('<table>');
          for (var row in data.data) {
            var tr = $('<tr>');
            for (var col in data.data[row]) {
              var td = $('<td>').text(data.data[row][col]);
              tr.append(td);
            }
            table.append(tr);
          }
          $('#output').html(table);
        };
        reader.readAsText(file);
      });
    });
  </script>
</head>
<body>
  <input type="file" id="file-input">
  <div id="output"></div>
</body>
</html>

HTML
- <div id="output"></div>要素を使用して、読み込んだCSVデータを表示する領域を定義します。
JavaScript
- $(document).ready(function() { ... }); : DOMコンテンツツリーが完全にロードされたら、以降のコードを実行します。

このコードは、jQueryとPapa Parseライブラリを使用しています。
Papa Parseライブラリは、CSVデータの解析を簡略化するために使用されます。
コードをより詳細な処理に拡張することができます。

JavaScriptとjQuery以外の方法でCSVファイルを読み込む方法

XMLHttpRequest

ブラウザのネイティブなAPIであるXMLHttpRequestを使用して、非同期的にCSVファイルをロードできます。
以下のコードは、XMLHttpRequestを使用してCSVファイルをロードし、コンソールに出力する例です。

function loadCSV(file) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', file, true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      var csvData = xhr.responseText;
      console.log(csvData);
    } else {
      console.error('Error loading CSV file: ' + xhr.statusText);
    }
  };
  xhr.send();
}

loadCSV('data.csv');

Node.js

Node.jsを使用すると、サーバサイドでCSVファイルを処理することができます。

const fs = require('fs');

fs.readFile('data.csv', 'utf8', (err, data) => {
  if (err) {
    console.error('Error loading CSV file: ' + err.message);
    return;
  }
  console.log(data);
});