データユーティリティ · 最終検証 2026-05-10 · papaparse 5.5.3 · 初公開 2026-05-09

Papa Parse v5 で CSV をブラウザでパース・生成する

Papa Parse v5 系で CSV を header 自動検出 + dynamicTyping + ストリーム処理で扱うパターン、エスケープ周りの落とし穴を触れる demo で確認する実装メモ。

papaparse csv browser data

検証日: 2026-05-09

使用バージョン: papaparse@5.5.3

対象: ブラウザでユーザがアップロードする CSV を扱う、Node スクリプトで CSV ↔ JSON 変換したい人

Papa Parse v5 で CSV をブラウザでパース / 生成 するパターン。header 自動検出 + dynamicTyping + Web Worker によるストリーム処理(数 GB 級でも UI freeze なし)、エスケープ周りの落とし穴を動く demo で確認します。

触って試す

name	age	city
Alice	30	Tokyo
Bob	25	Osaka
Charlie	35	Kyoto
Dana, the Great	28	New York

CSV を編集 → header 自動検出、quote エスケープも papaparse が処理

CSV を編集すると右側で header 自動検出 + クォート処理が即時表示される。

最小サンプル(PapaParse 5.x、3 行で CSV パース)

Papa.parse(csv, options) で文字列を 1 回でパース。header: true で 1 行目をキーとして解釈:

import Papa from "papaparse";

const csv = `name,age
Alice,30
Bob,25`;

const result = Papa.parse(csv, {
  header: true,           // 1 行目をキーとして使う
  skipEmptyLines: true,
  dynamicTyping: true,    // "30" → 30(数値変換)
});

console.log(result.data);
// [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }]

ファイルから読む(ブラウザ)

<input type="file"> の File オブジェクトを Papa.parse に直接渡す。worker: true で別 thread、step で 1 行ずつ stream 処理:

const file = inputElement.files![0];

Papa.parse<Record<string, string>>(file, {
  header: true,
  worker: true,           // 大きいファイルは worker で処理
  step: (row) => {
    // 1 行ずつストリーム処理(数 GB の CSV でも OK)
    console.log(row.data);
  },
  complete: () => console.log("done"),
});

worker: true で別 thread で処理。UI を block しない。

worker:true + step ストリーミング — 数 GB の CSV でも UI freeze せず、行ごとに即時処理可能 (クリックで拡大)

ポイント:

worker:true にすると step callback は main thread で実行される(worker→main の postMessage 経由)。DOM 操作 / state 更新が安全
step を入れたら data は空配列:全部メモリに溜め込まないストリーム動作になる(complete(results) の results.data も空)
chunk size はブラウザ内部で自動調整、明示制御は基本不要

JSON → CSV(unparse)

逆方向(オブジェクト配列 → CSV 文字列)は Papa.unparse。quotes / delimiter 等を渡して書式を制御:

const csv = Papa.unparse([
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 },
], {
  delimiter: ",",
  quotes: true,           // すべてのフィールドを quote
  header: true,
});

つまずいたポイント

, と " の混在:"Alice, the Great" のように quote で囲めば OK。papaparse がエスケープを正しく処理
改行を含むセル:RFC 4180 では "line1\nline2" で OK。papaparse は対応する
BOM 付き CSV:Excel が出力する CSV は先頭に BOM を含むことがある。Papa.parse(file) は自動で除去する(明示的に処理する必要なし)
dynamicTyping: true の落とし穴:"01"(郵便番号など)が 1 になる。文字列保持したい列がある時は false に
大きなファイルでメモリオーバー:step callback でストリーム処理に切り替える。data 配列にすべて溜め込まない

評価

観点	評価	コメント
学習コスト	◎	API は `parse` / `unparse` の 2 つ
性能	◎	worker + step でブラウザで GB 級も処理可
RFC 4180 互換	◎	quote / 改行 / カンマすべて対応
型	○	結果型は generic で絞れる
バンドルサイズ	○	50KB 前後(min+gzip)