data / json

JSONフォーマッター

JSONの整形・圧縮・バリデーションをブラウザ内で完結。入力データはサーバーに送信されません。

// 整形・圧縮ボタンを押すと結果がここに表示されます

使い方

01
  1. 左側のテキストエリアにJSONをペーストしてください
  2. インデント幅（2スペース・4スペース・タブ）を選択します
  3. 「整形」ボタンで読みやすく整形、「圧縮」ボタンで1行に圧縮できます
  4. 右側に結果が表示されたら「コピー」ボタンでクリップボードにコピーできます
  5. 入力時にリアルタイムでJSONの有効性を確認できます

実装コード

02

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

export type FormatResult =
  | { ok: true; output: string }
  | { ok: false; error: string }

export function formatJson(
  input: string,
  indent: number = 2
): FormatResult {
  try {
    const parsed = JSON.parse(input)
    return { ok: true, output: JSON.stringify(parsed, null, indent) }
  } catch (e) {
    const msg = e instanceof SyntaxError ? e.message : String(e)
    return { ok: false, error: `JSONの解析に失敗しました: ${msg}` }
  }
}

export function minifyJson(input: string): FormatResult {
  try {
    const parsed = JSON.parse(input)
    return { ok: true, output: JSON.stringify(parsed) }
  } catch (e) {
    const msg = e instanceof SyntaxError ? e.message : String(e)
    return { ok: false, error: `JSONの解析に失敗しました: ${msg}` }
  }
}

よくある使用例・注意点

03
APIレスポンスの確認
curl や fetch で取得したAPIレスポンスが1行で返ってくる場合、このツールで整形すると構造が一目でわかります。開発・デバッグ時に便利です。
設定ファイルの圧縮
package.json や tsconfig.json などを圧縮して最小化したい場合は「圧縮」ボタンを使います。ただし、コメントを含むJSONはJSON仕様外のためパースエラーになります。
JSONとJSON5の違い
標準のJSON（RFC 8259）はキーを必ずダブルクォートで囲む必要があります。シングルクォートやコメント、末尾カンマはJSON仕様外です。このツールはJSON仕様に準拠して検証します。
数値精度の注意
JavaScriptのNumber型はIEEE 754倍精度浮動小数点数のため、53ビット超の整数（例: 銀行のID等）は精度が失われます。大きな整数を扱う場合は文字列として扱うのが安全です。

関連ツール

04
Base64変換 — 準備中URLエンコード — 準備中文字数カウンター

ソースコード

05

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

GitHub でコードを見る →