data / convert

CSV ↔ JSON 変換

CSVとJSONを双方向に変換できます。CSVヘッダーをキーとしたJSONオブジェクト配列に変換し、テーブルプレビューを表示します。入力データはサーバーに送信されません。

// 変換ボタンを押すと結果がここに表示されます

使い方

01
  1. 方向ボタンで「CSV → JSON」か「JSON → CSV」を選択します
  2. 左側のテキストエリアに変換したいデータをペーストします
  3. 「変換」ボタンを押すと右側に変換結果が表示されます
  4. CSV → JSON 変換の場合、下部にテーブルプレビューが表示されます（最大10行）
  5. 「コピー」ボタンで変換結果をクリップボードにコピーできます

実装コード

02

コアロジックはブラウザ標準の JSON.parse と JSON.stringify のみで実装しています。外部ライブラリは不要なので、そのままコピーしてご利用いただけます。

/** CSV文字列 → JSONオブジェクト配列 */
export function csvToJson(csv: string): ConvertResult<string> {
  const parsed = parseCsv(csv)
  if (!parsed.ok) return parsed
  const [header, ...dataRows] = parsed.output
  if (!header || header.length === 0)
    return { ok: false, error: 'ヘッダー行が見つかりません' }
  const objects = dataRows.map(row => {
    const obj: Record<string, string | number> = {}
    header.forEach((key, i) => {
      const raw = row[i] ?? ''
      const num = Number(raw)
      // 数値に変換できる場合は自動的にnumber型へ
      obj[key.trim()] = raw !== '' && !isNaN(num) ? num : raw
    })
    return obj
  })
  return { ok: true, output: JSON.stringify(objects, null, 2) }
}

/** JSONオブジェクト配列 → CSV文字列 */
export function jsonToCsv(json: string): ConvertResult<string> {
  if (!json.trim()) return { ok: false, error: '入力が空です' }
  let parsed: unknown
  try { parsed = JSON.parse(json) } catch (e) {
    return { ok: false, error: `JSONの解析に失敗: ${e instanceof SyntaxError ? e.message : String(e)}` }
  }
  if (!Array.isArray(parsed))
    return { ok: false, error: 'JSONはオブジェクトの配列である必要があります' }
  if (parsed.length === 0) return { ok: true, output: '' }
  const headers = Object.keys(parsed[0] as Record<string, unknown>)
  const escape = (v: unknown) => {
    const s = String(v ?? '')
    return s.includes(',') || s.includes('"') || s.includes('\n')
      ? `"${s.replace(/"/g, '""')}"`
      : s
  }
  const lines = [
    headers.map(h => escape(h)).join(','),
    ...(parsed as Record<string, unknown>[]).map(
      row => headers.map(h => escape(row[h])).join(',')
    ),
  ]
  return { ok: true, output: lines.join('\n') }
}

よくある使用例・注意点

03
CSVのフォーマットについて
1行目をヘッダー行として扱います。各列の値がJSONオブジェクトのキーになります。ヘッダーの前後の空白は自動的に除去されます。空行は無視されます。
クォートとエスケープ
カンマ・ダブルクォート・改行を含む値はダブルクォートで囲む必要があります（RFC 4180準拠）。ダブルクォート自体は "" のように二重にしてエスケープします。JSON → CSV 変換時はこの処理が自動で行われます。
数値の自動変換（CSV→JSON）
CSV → JSON 変換時、数値として解釈できる値は自動的に number 型に変換されます（例: "42" → 42、"1.5" → 1.5）。電話番号・郵便番号など文字列として扱いたい数字列は、CSVでクォートしても変換されます。変換後にJSONを手動で調整してください。
JSON→CSV変換の制限
JSON配列の最初のオブジェクトのキーがCSVのヘッダーになります。各行のオブジェクトにキーが存在しない場合は空文字列になります。ネストしたオブジェクトや配列は文字列として展開されます（フラット化は行いません）。
大きなファイルの扱い
このツールはブラウザ内で処理するため、非常に大きなCSV/JSONファイルを変換するとブラウザが重くなる場合があります。数MB以上のファイルはNode.js等のサーバーサイド処理を推奨します。

関連ツール

04
JSONフォーマッターJSON → TypeScript型生成URLエンコードBase64変換

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →