Papaparseを使ってCSVファイルを読み込もう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回はPapaparseの使い方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Papaparseを使ってCSVファイルの読み込みができる

CSVファイルを読み込もう！

Papaparseを使おう
1. index.html
2. script.js
GitHubのサンプルコード

Papaparseを使おう

PapaparseというJavaScriptのライブラリを使用して
CSVファイルを読み込むサンプルです。

サンプルコードをおいておくのでサクッと使ってみてね！

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSV Parser</title>
  </head>
  <body>
    <!-- CSVファイルをアップロードするためのファイル選択フィールド -->
    <input type="file" id="csvFile" accept=".csv" />

    <!-- CSVデータを表示するためのテキストエリア -->
    <textarea id="csvData" rows="10" cols="50" readonly></textarea>

    <!-- Papaparseライブラリを読み込む -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"
      integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- 自作のJavaScriptファイルを読み込む -->
    <script src="script.js"></script>
  </body>
</html>

script.js

// CSVデータを解析する関数
const csvParse = (fileContent) => {
  return new Promise((resolve) => {
    // Papaparseを使用してCSVファイルを解析する
    Papa.parse(fileContent, {
      header: true, // CSVファイルの最初の行をヘッダーとして扱う
      skipEmptyLines: true, // 空行をスキップする
      complete: function (results) {
        resolve(results.data); // 解析が完了したらデータをresolveする
      },
    });
  });
};

// ファイル選択フィールドにchangeイベントリスナーを追加する
document.getElementById("csvFile").addEventListener("change", (event) => {
  const file = event.target.files[0]; // 選択されたファイルを取得
  if (file) {
    const reader = new FileReader(); // FileReaderオブジェクトを作成

    // ファイルの読み込みが完了したときの処理
    reader.onload = (e) => {
      const fileContent = e.target.result; // ファイルの内容を取得
      csvParse(fileContent).then((data) => {
        const csvDataTextarea = document.getElementById("csvData");
        // CSVデータをJSON形式の文字列に変換し、テキストエリアに表示
        csvDataTextarea.value = JSON.stringify(data, null, 2);
      });
    };

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

これで同じものができたよ！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/Papaparse

Contribute to same-hack/Papaparse development by creating an account on GitHub.

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram