はじめに
仕事で「このCSVをJSONに変換したい」「XMLからCSVを作りたい」といった場面に何度も遭遇しました。その度にPythonスクリプトを書いたり、オンラインツールを探したりしていましたが、どれも一長一短でした。
そこで、ブラウザだけで完結する、シンプルで高速なデータ変換ツールを作りました。
🔗 アプリ: https://data-format-converter-inky.vercel.app/
🔗 GitHub: https://github.com/yuuichieguchi/data-format-converter
既存ツールの問題点
オンラインの変換ツールを使っていて感じた不満：
- セキュリティの懸念: データをサーバーに送信する必要がある
- 使いにくいUI: 広告だらけ、複雑な設定画面
- 機能不足: エラーメッセージが不親切、細かいオプションがない
- 速度: サーバー経由で遅い
- 信頼性: サイトが突然消えることもある
特に、機密データを扱う場合はサーバーに送信したくないという要望が強くありました。
作ったもの
主な機能
✨ 完全な双方向変換
- CSV ⇄ JSON
- JSON ⇄ XML
- CSV ⇄ XML（JSON経由）
📝 複数の入力方法
- テキストエリアに直接貼り付け
- ドラッグ&ドロップでファイルアップロード
- クリックしてファイル選択
- 最大10MBまで対応
⚙️ 形式ごとのオプション
- CSV: 区切り文字の選択（カンマ、セミコロン、タブ）
- JSON: インデント制御（2スペースまたは4スペース）
- XML: 整形オプション、XML宣言の有無
🎨 モダンなUI
- Tailwind CSSによる洗練されたデザイン
- レスポンシブ対応（モバイルファースト）
- 行番号付きエラーメッセージ
- リアルタイムバリデーション
📋 簡単なワークフロー
- 変換結果をクリップボードにコピー
- ファイルとしてダウンロード
- ワンクリックで入力/出力をクリア
- エラー時も入力を保持（修正が簡単）
⚡ パフォーマンス
- 完全クライアント側処理（サーバー不要）
- 一般的なサイズのデータは即座に変換
- 本番環境レベルのエラーハンドリング
技術スタック
- フレームワーク: Next.js 16 (App Router)
- UI: React 19
- 言語: TypeScript（strict mode）
- スタイリング: Tailwind CSS 4
- テスト: Jest + React Testing Library
- デプロイ: Vercel
なぜクライアント側処理にこだわったか
データ変換を全てブラウザ内で完結させることで：
- セキュリティ: データがサーバーに送信されない
- プライバシー: 機密情報も安心して変換できる
- 速度: ネットワーク通信が不要で高速
- コスト: サーバー費用ゼロ
- オフライン対応: 一度ロードすれば電波がなくても動作
特に、機密データや個人情報を含むCSV/JSONを扱う場合、サーバーに送信しないという安心感は重要です。
実装のポイント
1. CSV処理の難しさ
CSVは意外と複雑です：
name,age,comment
"Smith, John",30,"He said ""Hello"""
"Doe, Jane",25,"Line1
Line2"
このデータには：
- フィールド内のカンマ
- ダブルクォートのエスケープ
- 改行を含むフィールド
これら全てに対応する必要がありました。
実装した機能:
- クォートされたフィールドの適切な処理
- カスタム区切り文字（
,;\t） - 特殊文字の自動エスケープ
- ヘッダー行の検出と処理
2. JSON処理
// 厳密なバリデーション
JSON.parse(input); // 構文エラーを検出
// 整形オプション
JSON.stringify(data, null, indentSize);
実装した機能:
- エラー位置の正確な報告
- 設定可能なインデント（2 or 4スペース）
- 配列・ネストオブジェクトの完全サポート
- ラウンドトリップ変換の保証
3. XML処理
外部ライブラリを使わず、独自パーサーを実装しました。
実装した機能:
- 属性の処理（
@プレフィックス規則） - ネームスペース対応
- 整形オプション
- DOM風の軽量パーサー
例：
<person name="John" age="30">
<address>
<city>Tokyo</city>
</address>
</person>
↓ JSON変換
{
"person": {
"@name": "John",
"@age": "30",
"address": {
"city": "Tokyo"
}
}
}
4. エラーハンドリング
ユーザーフレンドリーなエラーメッセージを重視しました：
エラー: JSONの構文エラー
行: 5
位置: 12
問題: 予期しないトークン ','
コンテキスト: ... "name": "John",, "age": 30 ...
^
提案: カンマの重複を確認してください
含まれる情報:
- 何が問題か（明確な説明）
- どこで起きたか（行番号・列番号）
- 問題のある箇所のコンテキスト
- 修正方法の提案
- 入力を保持（すぐに修正可能）
テスト
品質を保証するため、包括的なテストケースを実装：
npm test
テスト内容:
- CSV: クォートされたフィールド、カスタム区切り文字、空値
- JSON: 有効/無効な構文、ネスト構造、型処理
- XML: 属性、ネスト要素、エラーケース
- オーケストレーション: フォーマットルーティング、オプション処理
パフォーマンス
- 一般的なCSV/JSON/XML（<1MB）: 100ms以下で変換
- 大きなファイル（最大10MB）: サポート（ただし時間がかかる場合あり）
- ストリーミング非対応: 全ファイルをメモリに読み込み
注意: 非常に大きなファイル（10MB超）はブラウザのメモリ制限により失敗する可能性があります。
使い方
1. 基本的な変換
- 入力形式を選択: CSV、JSON、XMLから選択
- データを入力: テキストを貼り付けるかファイルをアップロード
- 出力形式を選択: 変換先の形式を選択
- オプション設定（任意）: 形式ごとの細かい設定
- 変換: 「Convert」ボタンをクリック
- エクスポート: クリップボードにコピーまたはファイルとしてダウンロード
2. CSV → JSON 変換例
入力（CSV）:
name,age,city
John,30,Tokyo
Jane,25,Osaka
出力（JSON）:
[
{
"name": "John",
"age": "30",
"city": "Tokyo"
},
{
"name": "Jane",
"age": "25",
"city": "Osaka"
}
]
3. JSON → XML 変換例
入力（JSON）:
{
"person": {
"name": "John",
"age": 30
}
}
出力（XML）:
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>John</name>
<age>30</age>
</person>
アクセシビリティ
誰でも使えるツールを目指しました：
- キーボードナビゲーション: 全機能がキーボードで操作可能
- ARIAラベル: スクリーンリーダー対応
- フォーカスインジケータ: 視覚的に明確
- レスポンシブデザイン: モバイルでも快適
ユースケース
実際にこんな場面で役立ちます：
1. データ移行
CSV（Excel）→ JSON → API送信
2. 設定ファイル変換
JSON設定ファイル → XML設定ファイル
3. データ分析の前処理
XML（API レスポンス）→ CSV → Excel/pandas
4. テストデータ作成
手書きCSV → JSON → テストコード
今後の展開
以下の機能を検討中：
- リアルタイム変換プレビュー
- カスタムCSVヘッダー
- JSONパスフィルタリング
- XPathサポート（XML）
- バッチ変換
- アンドゥ/リドゥ機能
- フォーマットテンプレート
オープンソース
このプロジェクトはMITライセンスで公開しています。
- GitHub: https://github.com/yuuichieguchi/data-format-converter
- アプリ: https://data-format-converter-inky.vercel.app/
コントリビューション歓迎です！
まとめ
データ変換ツールを作って学んだこと：
- クライアント側処理の価値: セキュリティとプライバシーは重要
- CSV処理の奥深さ: 見た目よりずっと複雑
- エラーメッセージの重要性: ユーザーが自分で問題を解決できる
- テストの必要性: 変換ロジックは複雑でバグが入りやすい
もしCSV/JSON/XMLの変換で困ったことがあれば、ぜひ試してみてください。
データはサーバーに送信されず、ブラウザ内で安全に処理されます。
関連リンク: