DevToolBox

JSON Minifier

JSONの空白・改行を除去して転送サイズを削減。圧縮前後のバイト数・削減率・gzip後の推定サイズを表示します。

How to Use the JSON Minifier

Paste your JSON into the input field and click "Minify". The tool removes all insignificant whitespace — indentation, line breaks, and spaces between tokens — and immediately shows how many bytes you saved. Sizes are measured in UTF-8 bytes using the browser's TextEncoder, so multi-byte characters such as Japanese text are counted exactly as they travel over the wire. If your browser supportsCompressionStream, an estimated gzipped size of the minified output is shown as well, so you can judge what the payload would cost on a gzip-enabled connection.

Features

  • One-click minification via JSON.parse + JSON.stringify — the output is always valid JSON
  • Exact UTF-8 byte counts before and after, plus the reduction percentage
  • Estimated gzipped size computed locally with CompressionStream("gzip") (shown only on supported browsers)
  • Syntax validation with the original parser error message when the input is broken
  • Runs entirely in your browser — no JSON ever leaves your device

What is JSON Minification?

The JSON specification treats whitespace between tokens as insignificant, so a pretty-printed document and its single-line equivalent are the same data. Minification strips that whitespace to shrink the payload. Typical 2-space pretty-printed API responses shrink by 20–40% depending on nesting depth; deeply indented documents save more. Smaller JSON means faster API responses, lower bandwidth bills, more headroom inlocalStorage (usually capped around 5 MB per origin), and lighter WebSocket messages. Unlike JavaScript or CSS minification, no renaming or rewriting happens — only whitespace is removed, so the operation is fully reversible with a formatter.

JSON Minifierの使い方

このツールはJSONの空白・改行・インデントを除去し、転送サイズをどれだけ削減できたかをバイト単位で表示します。JSONを入力欄に貼り付けて「圧縮」ボタンを押すと、圧縮前後のUTF-8バイト数・削減率・gzip圧縮後の推定サイズが即座に表示されます。整形・構文検証が目的の場合はJSON Formatter & Validatorを使ってください。本ページは「サイズをどれだけ減らせるか」に特化しています。

実務での活用例

1. APIレスポンスの転送量を見積もる

開発環境で整形出力しているAPIレスポンスを本番でminifyした場合に何バイト減るかを、デプロイ前に確認できます。2スペースインデントの100要素の配列なら8,436バイト→5,435バイト(35.6%減)が実測例です。gzip後の推定サイズも併せて表示されるため、「gzipが効く経路ならminifyの追加効果は小さい」「gzipなしの経路ならminifyが直接効く」という判断材料になります。

2. localStorage・Cookieの容量節約

localStorageはオリジンあたり約5MB、Cookieは1個あたり約4KBという上限があり、どちらもgzipは適用されません。キャッシュとして保存するJSONをminifyしておけば、削減率がそのまま保存可能件数の増加につながります。保存直前にJSON.stringifyへ通すだけで実現できる、最も費用対効果の高い節約です。

3. 設定ファイル・モックデータの軽量化

リポジトリに同梱する大きめのモックJSONや、HTMLに埋め込むハイドレーション用データは、minifyするとバンドルサイズとパース対象の文字数が減ります。可読性が必要になったらJSON Formatterでいつでも整形に戻せるため、「保存はminify・閲覧時に整形」という運用が安全です。

よくあるエラーと対処 / Common Errors and Fixes

minify実行時(JSON.parse)に遭遇しやすいエラーと、削減率が伸びないときの原因をまとめました。

Frequent JSON.parse failures when minifying, plus the reasons a reduction rate can come out near zero.

エラー / Error原因 / Cause対処 / Fix
Unexpected token , in JSON at position N末尾カンマ
Trailing comma
最後の要素の後ろのカンマを削除
Remove the comma after the last element
Unexpected token / in JSON at position Nコメント付きJSONC(tsconfig.json 等)を貼り付け
JSONC with comments (e.g. tsconfig.json)
///* */ のコメントを削除してから圧縮
Strip // and /* */ comments first
Unexpected token ' in JSON at position Nシングルクォート
Single quotes
すべてダブルクォートに置換
Replace all with double quotes
Unexpected end of JSON input巨大レスポンスのコピーで末尾が欠落
Tail truncated when copying a large response
末尾の } / ] を確認。ファイル保存してから貼り付け
Check the closing }/]; save to a file before copying
Bad control character in string literal文字列値の中に生の改行・タブ
Raw newline or tab inside a string value
\n / \t にエスケープ
Escape as \n / \t
Unexpected token u in JSON at position 0undefined をそのまま貼り付け
Pasted the literal undefined
取得元を確認し、JSON文字列を渡す
Check the source and pass an actual JSON string
削減率がほぼ 0%(エラーではない)入力が既にminify済みで空白がない
Input is already minified — no whitespace left
転送経路側で gzip / Brotli を有効化して削る
Enable gzip/Brotli on the transport instead

言語別コード例 / Code Examples by Language

minifyとサイズ計測をアプリ側で再現するための最小サンプル。

Minimal snippets to minify JSON and measure the byte savings programmatically.

JavaScript / TypeScript

// 圧縮 / Minify
const min = JSON.stringify(JSON.parse(input));

// UTF-8 バイト数 / Byte size in UTF-8
const bytes = new TextEncoder().encode(min).length;

// gzip 後サイズの推定 / Estimate gzipped size (browser)
const stream = new Blob([min]).stream()
  .pipeThrough(new CompressionStream("gzip"));
const gzipped = (await new Response(stream).arrayBuffer()).byteLength;

Python

import json, gzip

# 圧縮 / Minify (separators で区切り後の空白も除去)
min_json = json.dumps(json.loads(s), separators=(",", ":"), ensure_ascii=False)

raw = min_json.encode("utf-8")
print(len(raw))                 # minify 後のバイト数
print(len(gzip.compress(raw)))  # gzip 後のバイト数

Go

import (
    "bytes"
    "encoding/json"
)

var buf bytes.Buffer
if err := json.Compact(&buf, []byte(s)); err != nil {
    // invalid JSON
}
min := buf.Bytes() // 空白を除去した JSON

Shell (jq + gzip)

# 圧縮 / Minify
jq -c . input.json > min.json

# バイト数の比較 / Compare byte sizes
wc -c input.json min.json

# gzip 後サイズ / Gzipped size
gzip -c min.json | wc -c

Before / After 実例 / Before & After

例1: 設定ファイルをminify / Minify a config file (97 bytes → 79 bytes, -18.6%)

{
  "name": "devtoolbox",
  "version": "1.4.0",
  "private": true,
  "tags": ["json", "minify"]
}

{"name":"devtoolbox","version":"1.4.0","private":true,"tags":["json","minify"]}

例2: APIレスポンスをminify / Minify an API response (168 bytes → 128 bytes, -23.8%)

{
  "items": [
    { "id": 101, "title": "JSON Minifier", "price": 0 },
    { "id": 102, "title": "JSON Formatter", "price": 0 }
  ],
  "total": 2,
  "hasNext": false
}

{"items":[{"id":101,"title":"JSON Minifier","price":0},{"id":102,"title":"JSON Formatter","price":0}],"total":2,"hasNext":false}

ネストが深く要素数が多いほど削減率は上がります。2スペースインデントの100要素配列では35.6%減(8,436→5,435バイト)が実測値です。

Deeper nesting and more elements increase the savings — a 100-item array pretty-printed with 2 spaces shrinks by 35.6% (8,436 → 5,435 bytes).

Why browser-only? / なぜブラウザ完結か

The JSON you minify is usually production data: API responses with access tokens, user records, or internal configuration. Sending that to a server-hosted minifier hands the full payload to a third party just to delete some whitespace. DevToolBox never does that. Parsing (JSON.parse), serialization (JSON.stringify), byte counting (TextEncoder), and even the gzip estimate (CompressionStream) all run inside your browser using standard Web APIs — there is no upload endpoint at all. You can verify this yourself: open DevTools, switch to the Network tab, run a minification, and watch the tab stay empty. The page also works offline once loaded, which is the simplest proof that your data never leaves your device.

minify対象のJSONは、アクセストークンや顧客データを含む本番ペイロードであることがほとんどです。サーバ型のminifierに貼ると「空白を消すだけ」のために中身全体を第三者へ送信することになります。本ツールはパース・直列化・バイト数計算・gzip推定のすべてをブラウザ標準APIで実行し、アップロード先そのものが存在しません。DevTools の Network タブが空のままであること、読み込み後はオフラインでも動作することで確認できます。

開発をもっと効率的に

PR