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

検証日: 2026-05-26

使用バージョン: papaparse@5.5.3(2026-05 時点で main)

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

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

触って試す #

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

この実装を体系立てて学ぶ本(ブラウザでファイルを作る処理は、Blob / File API と非同期処理の理解で安定する)

tech-book.net /books/9784297132880

改訂3版JavaScript本格入門

山田 祥寛 · 技術評論社 · 2023年

ES2022対応の文法基礎からオブジェクト指向構文まで一冊で体系的に押さえる

この本が役立つ理由 — Blob・File・非同期処理(Promise / async)を基礎から。ブラウザ完結のファイル生成で詰まる箇所がこの本の範囲

詳細を tech-book.net で見る →

tech-book.net /books/9784297129569

実践Node.js入門ー基礎・開発・運用

伊藤康太 · 技術評論社 · 2023年

Node.jsの基礎文法から非同期処理・CLI・Express実装まで一気通貫で学ぶ。フロントエンド開発の経験があり、Node.jsでのサーバーサイド開発を体系的に学び直したい人向け。

この本が役立つ理由 — 同じ生成処理を Node.js のサーバ側でも動かすとき(Buffer と Stream の扱い)

詳細を tech-book.net で見る →

セットアップ(npm 1 行 / ESM + UMD / Node どちらも) #

npm i papaparse
# TypeScript の型を別途
npm i -D @types/papaparse

ブラウザだけで使うなら import Papa from "papaparse"、Node でも同じ import で OK。Worker を使う場合(後述)は bundle 配布が必要(papaparse.min.js を public に置く)。

最小サンプル(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 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,
});

文字コード判定 — Excel が吐く Shift_JIS / CP932 への対処 #

日本語 Windows の Excel から「CSV (カンマ区切り)」 で保存すると Shift_JIS / CP932 で出力される。UTF-8 前提で Papa.parse(file) に投げると、日本語が全部文字化けする(� の連鎖)。

実用的な対処は 3 通り:

import Papa from "papaparse";

// (1) Papa の encoding オプションを使う(brower の TextDecoder 経由で読み込み)
Papa.parse(file, { header: true, encoding: "Shift-JIS" });

// (2) 自前で TextDecoder を通す(BOM の有無で UTF-8 / SJIS を切り分けたい時)
const buf = await file.arrayBuffer();
const head = new Uint8Array(buf, 0, 3);
const hasBom = head[0] === 0xef && head[1] === 0xbb && head[2] === 0xbf;
const encoding = hasBom ? "utf-8" : "shift-jis";
const text = new TextDecoder(encoding).decode(buf);
const result = Papa.parse(text, { header: true });

// (3) ユーザに「UTF-8 で保存して」と注意する(技術者向け社内ツールはこれが楽)

TextDecoder の shift-jis ラベルは Web 標準で Windows-31J / CP932 を実装するので、実質 Excel の CSV を読める。Node 単体だと shift-jis decoder は標準では入っていないので、iconv-lite か @kayahr/text-encoding を別途入れる必要がある。

5 つの落とし穴と直し方 #

ストリーム + worker の組み合わせは「数百 MB の CSV を即座に行ごとに描画する」ような UX に向いている(Excel 互換の見た目を web で実装する時の定番)。

1,000,000 行で実測: どの渡し方なら UI が止まらないか #

「worker: true を付ければ UI は止まらない」と書きかけて、本当かどうかを測ることにしました。6 列 × 1,000,000 行(63MB、quote と日本語入り)を Chromium で読み、処理全体の時間と、メインスレッドが止まった最長時間(requestAnimationFrame の間隔で計測)を分けて測った(papaparse 5.5.3、2026-09-06)。

測ってみて驚いたのは、worker を付けた方が遅く、しかも止まる時間が長かったことです。要点:

• 止まらないのは「File + chunk」。文字列に worker: true を付けても、文字列と結果を worker と往復させるコピーで 290 ms 止まる(全体も 2 倍遅い)
• chunkSize は既定 10MB(File)。1MB にすると最長停止が 107 → 15 ms になり、全体時間は変わらない
• dynamicTyping は 27% 遅く、しかも "01" を 1 にする。必要な列だけ後段で変換する方が速くて安全
• バンドルは 19KB(min)/ 7KB(gzip)。CSV 処理のために入れて重いということはない

自分の CSV で試すなら、公式 docs の chunkSize の項と、この記事の demo で File を渡す方を選んでみてください。止まらないことを目で確かめてから採用する方が安全です。

評価 #

向く / 向かないケース #

• 向く: ブラウザでユーザアップロード CSV 処理、Node スクリプト、ETL 前処理
• 向かない: TSV や独自区切りの軽量パース(split('\n').map(s => s.split(',')) で十分なケース)
• 向かない: 厳密な型バリデーションが必要 → papaparse でパース後 zod で検証 が現実解

関連 Topic / 関連書籍 #

この記事と関係する tech-book.net の Topic と、それぞれの Topic に紐づく書籍:

• /roadmaps/javascript-deep-dive
• /roadmaps/typescript-mastery

tech-book.net /books/9784297132880

改訂3版JavaScript本格入門

山田 祥寛 · 技術評論社 · 2023年

ES2022対応の文法基礎からオブジェクト指向構文まで一冊で体系的に押さえる

この本が役立つ理由 — Blob・File・非同期処理を基礎から。ブラウザ完結のファイル生成で詰まる箇所がこの本の範囲

詳細を tech-book.net で見る →

tech-book.net /books/9784297129569

実践Node.js入門ー基礎・開発・運用

伊藤康太 · 技術評論社 · 2023年

Node.jsの基礎文法から非同期処理・CLI・Express実装まで一気通貫で学ぶ。フロントエンド開発の経験があり、Node.jsでのサーバーサイド開発を体系的に学び直したい人向け。

この本が役立つ理由 — 同じ生成処理を Node.js のサーバ側でも動かすとき(Buffer と Stream)

詳細を tech-book.net で見る →

tech-book.net /books/9784297127473

プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで

鈴木 僚太 · 技術評論社 · 2022年

TypeScriptの型システムを基礎から高度な表現力まで体系的に習得する

この本が役立つ理由 — 型付きで書くなら。ライブラリの型定義を読み解く力がつく

詳細を tech-book.net で見る →

tech-book.net /books/9784627857216

はじめてのWebデザイン&プログラミング : HTML、CSS、JavaScript、PHPの基本

村上 祐治 · 森北出版 · 2023年

HTML・CSS・JavaScript・PHP を横断してWebの全体像を最短で把握する

詳細を tech-book.net で見る →