SCALE — Build Lab
開発パターン · JAVASCRIPT PATTERN

CSV エクスポートヘルパ

CATEGORY開発パターン TYPEJavaScript Pattern EFFORT30〜60分 DIFFICULTY
PRIMARY CODE
ts
export function exportCSV<T extends Record<string, any>>(rows: T[], filename = 'export.csv') {
  if (rows.length === 0) return;
  const headers = Object.keys(rows[0]);
  const escape = (v: any) => {
    const s = String(v ?? '');
    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
  };
  const csv = [
    headers.join(','),
    ...rows.map(r => headers.map(h => escape(r[h])).join(','))
  ].join('\n');
  // Excel 互換のため BOM 付与
  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 任意のダッシュボードに組み込み

CSV エクスポートヘルパ

:LiTarget: 用途

配列データを CSV にしてダウンロード。Excel互換のためBOM付与。

:LiSparkle: 特徴

  • 配列 → CSV
  • BOM付与(Excel互換)
  • カンマ・改行エスケープ
  • blob ダウンロード

:LiCode: コード(コピペ用)

export function exportCSV<T extends Record<string, any>>(rows: T[], filename = 'export.csv') {
  if (rows.length === 0) return;
  const headers = Object.keys(rows[0]);
  const escape = (v: any) => {
    const s = String(v ?? '');
    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
  };
  const csv = [
    headers.join(','),
    ...rows.map(r => headers.map(h => escape(r[h])).join(','))
  ].join('\n');
  // Excel 互換のため BOM 付与
  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加