大規模CSVファイルの変換：パフォーマンスのヒント

大規模CSVファイルのパフォーマンス

CSVファイルが数メガバイトを超えると、単純な解析戦略ではブラウザタブがフリーズしたり、メモリ枯渇でクラッシュしたりする可能性があります。

サイズのしきい値

ファイルサイズ	戦略	備考
< 1 MB	一括処理	特別な処理不要
1-10 MB	チャンク処理	バッチに分割し、チャンク間でUIに制御を返す
10-100 MB	ストリーミング + Web Worker	ワーカースレッドで解析、結果をストリーム
> 100 MB	サーバーサイドまたは専用ツール	ブラウザでは不適切な場合がある

チャンク処理

ファイル全体を一度に解析する代わりに、1,000-5,000行のチャンクで処理し、チャンク間でブラウザに制御を返します：

async function parseChunked(csv, chunkSize = 2000) {
  const lines = csv.split("\n");
  const headers = lines[0].split(",");
  const results = [];
  for (let i = 1; i < lines.length; i += chunkSize) {
    const chunk = lines.slice(i, i + chunkSize);
    // チャンクを処理
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  return results;
}

Web Workerアプローチ

10 MBを超えるファイルの場合、メインスレッドの応答性を維持するために解析をWeb Workerに移動します。

メモリ最適化

• 生のCSV文字列と解析済みJSONを同時に保存するのを避ける
• ストリーミング出力を使用する（JSON Lines形式）
• プレビュー行を制限する（UIでは最初の100行のみ表示）