ToolPal
暗いIDEでコードを入力するプログラマー

JSONをオンラインでフォーマットする方法 — 完全ガイド

📷 Lukas / Pexels

JSONをオンラインでフォーマットする方法 — 完全ガイド

無料のオンラインJSONフォーマッターを使ってJSONデータをフォーマット、検証、クリーンアップする方法を学びましょう。開発者やAPIデバッグに最適です。

D著者: Daniel Park2026年3月15日3分で読了

JSONとは？

JSON（JavaScript Object Notation）は、人間が読み書きしやすく、機械が解析・生成しやすい軽量なデータ交換フォーマットです。現代のWeb開発において、APIレスポンス、設定ファイル、データストレージの主要なフォーマットです。

APIを扱うなら、JSONに常に遭遇します。ほぼすべてのREST APIレスポンス、すべてのWebhookペイロード、Node.jsプロジェクトのすべての設定ファイルはJSONです。JSONを読み、フォーマットし、デバッグする方法を知ることは、開発者の核心的なスキルです。

なぜJSONをフォーマットするのか？

圧縮されたJSONは読みにくいです。APIレスポンスはしばしばホワイトスペースなしの1行として到着します — デバッグするのは悪夢です。フォーマット（または「プリティプリント」）するとJSONに適切なインデントと改行が追加され、構造を一目で理解できるようになります。

フォーマット前：

{"name":"John Doe","age":30,"city":"New York","hobbies":["reading","coding"],"address":{"street":"123 Main St","zip":"10001"}}

フォーマット後：

{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "coding"
  ],
  "address": {
    "street": "123 Main St",
    "zip": "10001"
  }
}

その違いは劇的です。フォーマット後のバージョンでは、トップレベルのキーが5つあること、hobbiesが2つのアイテムを持つ配列であること、addressがネストされたオブジェクトであることが一目でわかります。圧縮されたバージョンでは、一致する中括弧と角括弧を視覚的に解析しなければなりません。

JSONフォーマッターの使い方

  1. JSONを貼り付ける — 入力フィールドにJSONデータを貼り付ける
  2. 「フォーマット」をクリック — 2または4スペースのインデントでクリーンアップ
  3. 「ミニファイ」をクリック — JSONを1行に圧縮
  4. 結果をコピー — ワンクリックでクリップボードにコピー

フォーマッターは貼り付けた際にJSONを検証するので、何か問題があれば即座にフィードバックが得られます。

よくあるJSONエラー（と修正方法）

JSONには厳格な構文ルールがあり、どれか一つに違反してもパースエラーが発生します。実際に最もよく見かけるエラーを頻度順に紹介します：

1. 末尾のカンマ

最も一般的なJSONミスです。JavaScriptは配列やオブジェクトの末尾のカンマを許可するため、開発者はJSONではそれが許可されていないことを忘れがちです。

// 誤り — "coding"の後に末尾のカンマ
{
  "hobbies": ["reading", "coding",]
}

// 正しい
{
  "hobbies": ["reading", "coding"]
}

2. ダブルクォートの代わりにシングルクォート

JSONはすべての文字列にダブルクォートを必要とします。シングルクォートはJavaScriptとPythonでは有効ですが、JSONの解析を壊してしまいます。

// 誤り
{'name': 'John Doe'}

// 正しい
{"name": "John Doe"}

3. クォートなしのキー

JavaScriptオブジェクトでは（単純な識別子の場合）クォートなしのキーが使えますが、JSONではすべてのキーはダブルクォートで囲まれた文字列でなければなりません。

// 誤り
{name: "John Doe", age: 30}

// 正しい
{"name": "John Doe", "age": 30}

4. JSONのコメント

JSONはコメントをサポートしていません。JSONはJavaScriptに似ているため、またJavaScriptはコメントをサポートしているため、これは驚く方も多いです。設定ファイルにコメントが必要な場合は、JSONC（VS CodeでサポートされているJSON with Comments）またはYAMLを使用してください。

// 誤り
{
  "port": 3000,  // サーバーポート
  "host": "localhost"
}

// 正しい
{
  "port": 3000,
  "host": "localhost"
}

5. エスケープされていない特殊文字

バックスラッシュ、ダブルクォート、または制御文字を含む文字列は適切にエスケープする必要があります：

// 誤り — エスケープされていないバックスラッシュとクォート
{"path": "C:\Users\john", "note": "He said "hello""}

// 正しい
{"path": "C:\\Users\\john", "note": "He said \"hello\""}

6. 無効な値の型

JSONがサポートする値の型は文字列、数値、ブーリアン（true/false）、null、オブジェクト、配列のみです。それ以外は無効です：

// 誤り
{"value": undefined}
{"count": NaN}
{"total": Infinity}
{"date": new Date()}

// 正しい代替
{"value": null}
{"count": 0}
{"total": 9999999}
{"date": "2026-03-15T10:30:00Z"}

コマンドラインからJSONをフォーマットする

Webベースのツールにアクセスできない場合や、スクリプトの一部としてJSONをフォーマットする必要がある場合、以下のコマンドライン方法が役立ちます：

Pythonを使用する（ほとんどのシステムで利用可能）

# JSONファイルをフォーマット
python3 -m json.tool input.json

# パイプされたJSONをフォーマット
curl -s https://api.example.com/data | python3 -m json.tool

# カスタムインデントでフォーマット
python3 -c "import json,sys; print(json.dumps(json.load(sys.stdin), indent=4))" < input.json

jqを使用する（JSONのスイスアーミーナイフ）

jqは専用のJSONプロセッサであり、コマンドラインでJSONを扱うための最も強力なツールです：

# プリティプリント
cat data.json | jq '.'

# 特定のフィールドをフォーマットして抽出
cat data.json | jq '.users[0].name'

# APIレスポンスをフォーマット
curl -s https://api.example.com/users | jq '.'

JSONを定期的に扱っていてjqをインストールしていない場合は、今すぐインストールしましょう。無数の時間を節約できます。

Node.jsを使用する

# クイックフォーマット
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync('/dev/stdin','utf8')),null,2))" < input.json

JSONを扱うためのヒント

インデントを賢く選ぶ

  • 2スペースインデント: よりコンパクトで、画面により多くの内容が表示されます。JavaScript/TypeScriptプロジェクトやほとんどのWebフレームワークで人気です。ほとんどのAPIドキュメントで使用されています。
  • 4スペースインデント: 深くネストされた構造が読みやすくなります。PythonプロジェクトやエンタープライズJava環境で一般的です。
  • タブインデント: 技術的には有効ですがJSONでは稀です。スペースを使用してください。

ほとんどのWeb開発では、2スペースが実用的な選択です。水平スペースを無駄にせずに十分な視覚的階層を提供します。

デプロイ前に必ず検証する

特に手動で書いたり変更したりした場合は、本番環境で使用する前に必ずJSONを検証してください。コンマの欠落や括弧の不一致が1つあるだけでアプリケーション全体がクラッシュする可能性があります。私たちのフォーマッターは貼り付けた瞬間に構文エラーをキャッチするので、問題を素早く発見できます。

構造検証にJSON Schemaを使用する

JSONを受け入れるAPIを構築している場合、単純な解析では不十分です。JSON Schemaを使用すると、期待される構造、型、制約を定義できます：

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "name": { "type": "string", "minLength": 1 },
    "age": { "type": "integer", "minimum": 0 },
    "email": { "type": "string", "format": "email" }
  },
  "required": ["name", "email"]
}

これにより、必須フィールドの欠落、型の誤り、範囲外の値などをキャッチできます — 基本的なJSONの解析では絶対に発見できないものです。

一貫したdiffのためにキーをソートする

2つのJSONオブジェクトを比較する場合（コードレビューや設定のdiffなど）、ソートされていないキーはノイジーなdiffを生成します。私たちのフォーマッターを含む多くのフォーマッターは、オブジェクトキーをアルファベット順に再帰的にソートするオプションを提供しています。これは特に以下に役立ちます：

  • バージョン管理の設定ファイル（意味のないdiffを減らす）
  • デバッグ中のAPIレスポンスの比較
  • 決定論的である必要があるテストスナップショット

実際のJSONデバッグシナリオ

APIレスポンスのデバッグ

curlリクエストを送信して、圧縮された1行のJSONが返ってきた場合、何が悪いかを理解するためにまず構造を確認する必要があります：

curl -s https://api.example.com/users/123 | jq '.'

またはレスポンスをJSONフォーマッターに貼り付けます。そうすることで、レスポンスの構造が間違っているか、フィールドが欠落しているか、値が予期しないものであるかを確認できます。

2つのJSONオブジェクトの比較

2つのAPIレスポンスが同一であるはずなのに何かが異なる場合。両方をソートされたキーでフォーマットしてdiffを実行します：

jq -S '.' response1.json > sorted1.json
jq -S '.' response2.json > sorted2.json
diff sorted1.json sorted2.json

-Sフラグはキーをアルファベット順にソートするので、構造的な違いがdiff出力にノイズを生成しません。

コピー＆ペーストエラーの修正

同僚がJSONをSlackに貼り付けたところ、スマートクォートがコンテンツを壊してしまいました。フォーマッターに貼り付けると、エラー（直線クォートの代わりにカーリークォート）がハイライトされるので、何を修正すべきかが正確にわかります。

これは思ったより頻繁に起こります。チャットアプリ、ワードプロセッサ、一部のテキストエディターは"を自動的にカーリークォートに変換しますが、これはJSONでは無効です。

大きなJSONファイルからデータを抽出する

数メガバイトのJSONファイルを受け取ったが、その一部だけが必要な場合。何千行もスクロールする代わりに、jqを使って必要なものを正確に抽出します：

# 最初のユーザーのメールアドレスを取得
cat users.json | jq '.data.users[0].email'

# 全ユーザー名をフラットリストで取得
cat users.json | jq '[.data.users[].name]'

# ステータスでユーザーをフィルタリング
cat users.json | jq '[.data.users[] | select(.status == "active")]'

JSON vs 他のデータフォーマット

プロパティJSONYAMLXMLTOML
可読性良い優秀普通良い
コメントなしありありあり
データ型基本豊富文字列ベース豊富
ファイルサイズ小小大小
解析速度高速中程度低速高速
エコシステム巨大大大成長中

JSONはその単純さと普遍的なパーサーサポートにより、API通信とデータ交換で優位です。YAMLはコメントと可読性が重要な設定ファイルに適しています。XMLはエンタープライズシステムとドキュメントフォーマットで依然として存在感を持ちます。TOMLは設定（RustのCargo、PythonのPyproject.toml）でシェアを伸ばしています。

セキュリティに関する考慮事項

サーバーサイドのフォーマッターに機密データを貼り付けない

一部のオンラインJSONフォーマッターは処理のためにデータをサーバーに送信します。APIキー、トークン、パスワード、個人データを扱っている場合は、ブラウザ内ですべてを処理するクライアントサイドのフォーマッターのみを使用してください。私たちのツールはすべてのフォーマットをローカルで行います — データが送信されることはありません。

JSONインジェクションに注意する

JSON入力を受け付けるアプリケーションを構築する場合は、常にデータを検証してサニタイズしてください。文字列を連結してJSONを構築しないでください：

// 危険 — JSONインジェクションのリスク
const json = '{"name": "' + userInput + '"}';

// 安全
const json = JSON.stringify({ name: userInput });

信頼できないデータに対するJSON.parseに注意する

JSON.parse()は一般的に安全です（eval()とは異なり）が、解析されたデータに予期しない型や構造がある場合があります。アプリケーションで使用する前に、解析されたJSONの形状を必ず検証してください。

今すぐ無料のJSONフォーマッターでJSONデータをフォーマットしましょう。ブラウザ内で完全に動作し、シンタックスハイライトをサポートし、貼り付けた瞬間にエラーをキャッチします。

よくある質問

D

著者について

Daniel Park

Senior frontend engineer based in Seoul. Seven years of experience building web applications at Korean SaaS companies, with a focus on developer tooling, web performance, and privacy-first architecture. Open-source contributor to the JavaScript ecosystem and founder of ToolPal.

詳細はこちら

この記事を共有

XLinkedIn

関連記事

JSONをオンラインでフォーマットする方法 - 完全ガイド

1分で読了

ブラウザでのJSONPath: 実際に使うパターンのための実用的なリファレンスとテスター

2分で読了

2026年の純粋CSSトライアングル — ボーダートリックがまだ勝つとき(そして勝たないとき)

3分で読了