(papaparse)React + TypeScriptでCSVをパースする方法

CSVファイルを読み込むためにpapaparseライブラリを使いました。

私の開発環境

• React
• TypeScript

papaparseのインストール

npm install papaparse
npm install --save-dev @types/papaparse

Papa.parse() 主な機能

オプション名	説明
header: true	最初の行をヘッダーとして扱う
skipEmptyLines: true	空の行をスキップ
complete	パースされたデータを親コンポーネントに渡す
error	エラー発生時の処理

---

例:hooks

// src/hooks/useCsvParser.ts
import { useRef } from 'react';
import Papa from 'papaparse';
import { ReportRow } from '../types/report';

// CSVファイルを読み込んで、データをパースするカスタムフック
export function useCsvParser(onParsed: (data: ReportRow[]) => void) {
  // input要素を操作するための参照（ref）
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  // ファイルが選択されたときに呼ばれる関数
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]; // 最初のファイルを取得
    if (!file) return; // ファイルがなければ処理終了

    // CSVをパース（変換）
    Papa.parse(file, {
      header: true,          
      skipEmptyLines: true,  
      complete(results) {
        console.log("CSV結果:", results.data);
        // パースされたデータを親コンポーネントに渡す
        onParsed(results.data as ReportRow[]);
      },
      error(error) {
        console.error("CSV読み込みエラー:", error);
      }
    });
  };

  // ユーザーにファイル選択ダイアログを開かせる関数
  const triggerFileSelect = () => {
    fileInputRef.current?.click();
  };

  // フックの戻り値：使用する要素や関数を返す
  return {
    fileInputRef,        // <input type="file"> への参照
    handleFileChange,    // ファイルが選択されたときの処理
    triggerFileSelect,   // ボタンクリックでファイル選択を開く
  };
}

項目	内容
fileInputRef	非表示の input 要素にアクセスし、クリックをトリガーできるようにする
handleFileChange	ファイル選択時に実行されるイベントハンドラ。Papa.parseでCSVをパースし、コールバックを実行
triggerFileSelect	ボタンのクリックでファイル選択ダイアログを開く関数

---

まだ定用してないですが、これでReactコンポーネント側では、
useCsvParserを呼んで、ファイル選択のUIやパース結果の取得が簡単にできるはずです。