TToolspot
JSON・CSV・Base64 - Web開発で使うデータ変換の基礎と実践
開発者向け

JSON・CSV・Base64 - Web開発で使うデータ変換の基礎と実践

Toolspot公開日: 2026/4/5

Web開発の現場では、データのフォーマット変換が日常的に発生します。APIのレスポンスを整形したい、CSVデータをJSONに変換したい、画像をBase64エンコードしたい——こうした作業を効率的に行うための基礎知識と実践的なテクニックをまとめます。

JSON - Web開発の共通言語

JSONとは

JSON（JavaScript Object Notation）は、データを構造的に表現するための軽量なテキストフォーマットです。APIの通信、設定ファイル、データベースなど、Web開発のあらゆる場面で使われています。

{
  "name": "田中太郎",
  "age": 30,
  "skills": ["JavaScript", "Python", "Go"],
  "address": {
    "city": "東京都",
    "zip": "100-0001"
  }
}

JSONでよくあるエラーと解決方法

開発中にJSONパースエラーに遭遇したことがある方は多いでしょう。よくある原因をまとめます。

エラーの原因 例 解決策
末尾のカンマ {"a": 1,} 最後の要素のカンマを削除
シングルクォート {'a': 1} ダブルクォートに変更
コメント // コメント JSONではコメント不可。削除する
制御文字 タブや改行が値に含まれる エスケープ処理（\t, \n）
キーにクォートなし {a: 1} キーもダブルクォートで囲む

JSONの整形や構文チェックはJSON整形ツールで簡単にできます。ミニファイされたAPIレスポンスを貼り付ければ、インデント付きで見やすく整形してくれます。

JSON整形のユースケース

  • APIレスポンスの確認：ミニファイされたJSONを読みやすく整形
  • 設定ファイルの編集：package.jsonやtsconfig.jsonの構造確認
  • デバッグ：ネストされたデータの構造を可視化
  • ドキュメント作成：APIの入出力例を見やすく整形して資料に掲載

CSV - 表形式データの定番フォーマット

CSVとは

CSV（Comma-Separated Values）は、データをカンマで区切ったテキストファイルです。Excelやスプレッドシートとの相互運用に欠かせないフォーマットです。

名前,年齢,都市
田中太郎,30,東京
佐藤花子,25,大阪
鈴木一郎,35,名古屋

CSVの落とし穴

シンプルに見えるCSVですが、実は厄介な問題を多く抱えています。

問題 例 対策
値にカンマが含まれる "東京都,港区" 値全体をダブルクォートで囲む
値に改行が含まれる 住所に改行 ダブルクォートで囲む
文字コード Excel → UTF-8 BOM付きUTF-8で保存
ヘッダーの有無 1行目がデータかヘッダーか ドキュメントで明示する

CSV ↔ JSON 変換の実践

APIから取得したJSONデータをExcelで分析したい、逆にCSVファイルのデータをAPIに送信したい——こうした場面でCSVとJSONの相互変換が必要になります。

JSON → CSV変換のポイント：

  • ネストされたオブジェクトはフラット化が必要
  • 配列の値はカンマ区切りの文字列にするか、行を分割する
  • 日本語を含む場合はBOM付きUTF-8にするとExcelで文字化けしない

CSV → JSON変換のポイント：

  • 1行目をヘッダー（キー名）として使うのが一般的
  • 数値と文字列の型を正しく変換する
  • 空のセルをnullにするか空文字にするか決めておく

CSV⇔JSON変換ツールを使えば、ブラウザ上で瞬時に変換できます。

Base64 - バイナリデータのテキスト表現

Base64とは

Base64は、バイナリデータ（画像、ファイルなど）をASCII文字列に変換するエンコード方式です。メール添付やAPIでの画像送信など、テキストしか扱えない場面でバイナリデータを安全に転送するために使います。

元データ: Hello, World!
Base64:   SGVsbG8sIFdvcmxkIQ==

Base64のユースケース

ユースケース 説明
Data URI CSS/HTMLに小さな画像を直接埋め込む
API通信 JSON内にバイナリデータを含める
メール MIMEエンコードで添付ファイルを送信
認証 Basic認証のヘッダー（Authorization: Basic ...）
JWT ヘッダーとペイロードのエンコード

Base64を使う際の注意点

重要：Base64エンコードすると、データサイズが約33%増加します。大きな画像をBase64にするとページサイズが膨大になるため、Data URIは数KB以下の小さな画像やアイコンにのみ使いましょう。

  • エンコード：バイナリ → テキスト（データをBase64文字列に変換）
  • デコード：テキスト → バイナリ（Base64文字列を元のデータに戻す）

Base64エンコード/デコードツールで、テキストやファイルのBase64変換を簡単に試せます。

3つのフォーマットの使い分け早見表

場面 推奨フォーマット 理由
APIの入出力 JSON 構造化データの標準
Excelとの連携 CSV 表計算ソフトで直接開ける
設定ファイル JSON キー・値の構造が明確
データ分析 CSV pandas等のライブラリが対応
バイナリの転送 Base64 テキスト経路で安全に送れる
ログの出力 JSON（NDJSON） 構造化ログで検索しやすい

まとめ - データ変換は開発効率の基盤

JSON・CSV・Base64は、Web開発者が毎日触れるフォーマットです。それぞれの特性を理解し、適切に使い分けることが開発効率を大きく左右します。

これらのツールはすべてブラウザ上で完結し、データがサーバーに送信されることはありません。機密データの変換にも安心して使えます。

関連ツール

{}

JSON整形・圧縮

JSONデータの整形（フォーマット）・圧縮（ミニファイ）・バリデーションをブラウザ上で行えます。

🔤

Base64エンコード/デコード

テキストのBase64エンコード・デコードをブラウザ上で即時実行します。日本語テキストにも対応。

🔄

CSV↔JSON変換

CSVとJSONの相互変換をブラウザ上で実行します。ヘッダー行の自動検出に対応。