JSON Formatter & Validator 実践ガイド

「このAPIレスポンス...一体どこが何なのかわからない。」

1行に圧縮されたJSONレスポンスを受け取ったことはありますか？3,000文字のネストされたオブジェクトで特定のフィールドを探すのは悪夢です。

JSON Formatterはこの問題を解決します。そしてValidatorは「なぜパースできないの？」という質問に答えます。

---

JSON 30秒おさらい

データ型

{
  "string": "テキスト",
  "number": 42,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": {"nested": "value"}
}

重要ルール（よく間違えるもの）

---

Minified vs Prettified

実際に受け取るAPIレスポンス（Minified）

{"users":[{"id":1,"name":"田中太郎","email":"tanaka@dev.com","profile":{"avatar":"https://cdn.example.com/1.jpg","bio":"フルスタック開発者"}}],"pagination":{"total":150,"page":1,"limit":10}}

これを読めますか？

Formatter適用後（Prettified）

{
  "users": [
    {
      "id": 1,
      "name": "田中太郎",
      "email": "tanaka@dev.com",
      "profile": {
        "avatar": "https://cdn.example.com/1.jpg",
        "bio": "フルスタック開発者"
      }
    }
  ],
  "pagination": {
    "total": 150,
    "page": 1,
    "limit": 10
  }
}

構造が見えます。 users[0].profile.bioがどこにあるか即座に把握できます。

---

よくあるJSONエラー5つ

1. Trailing Comma（末尾カンマ）

最も一般的な間違いです。JavaScriptでは許可されますが、JSONではエラーです。

// エラー: Unexpected token }
{
  "name": "田中太郎",
  "age": 30,
}

// 修正
{
  "name": "田中太郎",
  "age": 30
}

2. シングルクォート

// エラー: Unexpected token '
{'name': '田中太郎'}

// 修正
{"name": "田中太郎"}

3. クォートなしのキー

// エラー: Unexpected token n
{name: "田中太郎"}

// 修正
{"name": "田中太郎"}

4. エスケープされていない文字

// エラー: 改行、タブなど
{"message": "こんにちは
世界"}

// 修正
{"message": "こんにちは\n世界"}

5. 不正な数値フォーマット

// エラー
{"value": 007}       // 先頭の0
{"hex": 0xFF}        // 16進数

// 修正
{"value": 7}
{"hex": "0xFF"}      // 文字列として

---

実践：コードでフォーマット

JavaScript

// APIレスポンスのデバッグ
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    // コンソールで読みやすく
    console.log(JSON.stringify(data, null, 2));
  });

JSON.stringify(data, null, 2)の3番目の引数：

• 2：2スペースインデント
• 4：4スペースインデント
• '\t'：タブインデント

特定フィールドのみ抽出

const user = {
  id: 1,
  name: "田中太郎",
  password: "secret123",
  email: "tanaka@dev.com"
};

// passwordを除外して出力
console.log(JSON.stringify(user, ['id', 'name', 'email'], 2));

出力：

{
  "id": 1,
  "name": "田中太郎",
  "email": "tanaka@dev.com"
}

---

コマンドラインでのJSON処理

jq - JSON処理のスイスアーミーナイフ

# インストール
brew install jq      # macOS
apt install jq       # Ubuntu

# フォーマット
cat response.json | jq .

# 特定フィールド抽出
cat response.json | jq '.users[0].name'

# 配列フィルタリング
cat response.json | jq '.users[] | select(.age > 30)'

# フィールド選択で新しいオブジェクト作成
cat response.json | jq '.users[] | {name, email}'

Python

# ファイルの検証 + フォーマット
python -m json.tool data.json

# パイプで処理
curl https://api.example.com/users | python -m json.tool

Node.js

# ファイルが有効なJSONかどうか確認
node -e "require('./data.json')"

---

JSON Schemaで構造検証

単純な構文チェックを超えて、データ構造と型を検証できます。

Schemaの定義

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "email"],
  "properties": {
    "name": {
      "type": "string",
      "minLength": 2,
      "maxLength": 50
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    }
  }
}

JavaScriptでの検証（ajv）

import Ajv from 'ajv';
import addFormats from 'ajv-formats';

const ajv = new Ajv();
addFormats(ajv);

const validate = ajv.compile(schema);

const data = {
  name: "田中太郎",
  email: "invalid-email",
  age: -5
};

if (!validate(data)) {
  console.log(validate.errors);
  // [
  //   { keyword: 'format', message: 'must match format "email"' },
  //   { keyword: 'minimum', message: 'must be >= 0' }
  // ]
}

---

IDE/エディタ設定

VSCode

# 自動フォーマットショートカット
Windows/Linux: Shift + Alt + F
Mac: Shift + Option + F

# 保存時に自動フォーマット（settings.json）
"[json]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

JetBrains（IntelliJ、WebStorm）

# 自動フォーマット
Windows/Linux: Ctrl + Alt + L
Mac: Cmd + Option + L

---

FAQ

Q: JSONにコメントを書きたい

A: 標準JSONはコメントをサポートしていません。代替手段：

1. JSONC（JSON with Comments）：VSCodeの設定ファイルなどで使用
2. JSON5：コメント、末尾カンマ、シングルクォートを許可
3. 別フィールド："_comment": "説明"

{
  "_comment": "この設定は開発環境用です",
  "debug": true
}

Q: 大容量JSONファイルが開けません

A: 通常のエディタは数十MBのファイルで固まります。代替手段：

• jq：ストリーミング処理
• fx：ターミナルインタラクティブビューア（npm i -g fx）
• オンラインツール：大容量JSON専用ビューア

Q: APIレスポンス全体をログに出してはダメですか？

A: 本番環境では危険です。

// NG: 機密情報が露出する可能性
console.log(JSON.stringify(apiResponse));

// OK: 機密フィールドをマスク
const sanitize = (obj) => JSON.stringify(obj, (key, val) =>
  ['password', 'token', 'secret'].includes(key) ? '***' : val
);

---

まとめ

---

関連ツール