JSONの整形・検証を効率化する方法

APIのレスポンス確認、設定ファイルの編集、データ交換...。JSONは現代の開発に欠かせないフォーマットです。

しかし、「インデントがぐちゃぐちゃで読めない」「どこでエラーが出てるかわからない」という経験はありませんか？

この記事では、JSONを効率的に整形・検証するテクニックを紹介します。

JSONとは

JSON（JavaScript Object Notation）は、データを構造化して表現するテキスト形式です。

JSONの特徴

• ✅ 軽量：XMLより簡潔で読みやすい
• ✅ 言語非依存：ほぼすべてのプログラミング言語で扱える
• ✅ 人間が読める：テキストベースで直感的
• ✅ Web標準：APIのデータ形式として広く採用

主な用途

• Web APIのリクエスト・レスポンス
• 設定ファイル（package.json, tsconfig.jsonなど）
• データの保存・交換
• NoSQLデータベース

JSONの基本構文

データ型

型	例	説明
文字列	"hello"	ダブルクォートで囲む
数値	123, 3.14	整数・小数
真偽値	true, false	小文字のみ
null	null	値がないことを表す
配列	[1, 2, 3]	角括弧で囲む
オブジェクト	{"key": "value"}	波括弧で囲む

正しいJSONの例

{
  "name": "田中太郎",
  "age": 30,
  "isActive": true,
  "email": null,
  "hobbies": ["読書", "映画", "旅行"],
  "address": {
    "city": "東京",
    "zip": "100-0001"
  }
}

よくあるエラー

JSONのパースエラーで多い原因をまとめました。

1. 末尾のカンマ（Trailing Comma）

// ❌ エラー
{
  "name": "太郎",
  "age": 30,  ← この末尾カンマはNG
}

// ✅ 正しい
{
  "name": "太郎",
  "age": 30
}

2. シングルクォートの使用

// ❌ エラー
{'name': '太郎'}

// ✅ 正しい（ダブルクォートのみ）
{"name": "太郎"}

3. コメントの記述

// ❌ エラー（JSONはコメント非対応）
{
  "name": "太郎" // これはコメント
}

// ✅ 代替案：JSON5やJSONCを使う（対応ツールのみ）

4. キーのクォート忘れ

// ❌ エラー
{name: "太郎"}

// ✅ 正しい
{"name": "太郎"}

5. 特殊文字のエスケープ忘れ

// ❌ エラー
{"text": "こんにちは
世界"}

// ✅ 正しい（改行は\nでエスケープ）
{"text": "こんにちは\n世界"}

整形のコツ

1. インデントを統一

2スペースまたは4スペースが一般的です。タブは避けましょう。

2. 1行JSONを展開

APIレスポンスは1行で返されることが多いです。整形ツールで展開しましょう。

// 圧縮された状態
{"users":[{"id":1,"name":"太郎"},{"id":2,"name":"花子"}]}

// 整形後
{
  "users": [
    {
      "id": 1,
      "name": "太郎"
    },
    {
      "id": 2,
      "name": "花子"
    }
  ]
}

3. キーの順序を整理

• アルファベット順にソート
• または重要度順に配置
• チーム内でルールを統一

バリデーション

構文チェック（Syntax Validation）

JSONが正しい形式かどうかをチェックします。

• カンマの位置
• 括弧の対応
• クォートの使用

スキーマチェック（Schema Validation）

JSON Schemaを使って、データの構造や型をチェックします。

// スキーマ定義例
{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 }
  },
  "required": ["name"]
}

便利なツール

オンラインツール

ツール	特徴
Handy Box JSON整形	日本語対応、ブラウザ完結、ツリー表示
JSONLint	詳細なエラーメッセージ
JSON Editor Online	ツリービュー＆コードビュー切替

エディタ拡張機能

• VS Code：Prettier、JSON Tools
• JetBrains IDE：組み込みのJSON整形
• Vim：jq コマンドと連携

コマンドライン

# jq：JSONの整形・クエリ
cat data.json | jq '.'

# Python：ワンライナーで整形
cat data.json | python -m json.tool

# Node.js
cat data.json | npx json

ベストプラクティス

1. 一貫したフォーマット

• プロジェクト内でインデントを統一
• .prettierrc や .editorconfig で設定
• コミット前に自動整形

2. 適切なデータ型を使う

// ❌ 文字列で数値を表現
{"age": "30", "price": "100.5"}

// ✅ 適切な型を使用
{"age": 30, "price": 100.5}

3. nullと未定義を使い分ける

// 値がないことを明示
{"email": null}

// キー自体を省略（値が存在しない）
{}

4. 日付のフォーマット

// ISO 8601形式を推奨
{"createdAt": "2026-01-22T10:30:00Z"}

// Unixタイムスタンプも可
{"createdAt": 1769075400}

5. 大きなJSONは分割を検討

• ファイルサイズが大きすぎると処理が遅くなる
• ページネーションやストリーミングを活用