# JSONのフォーマット方法：完全ガイド

適切にフォーマットされたJSONは、読みやすく、デバッグしやすく、保守しやすくなります。

JSONフォーマットが重要な理由

フォーマットされていないJSON

{"name":"田中太郎","age":30,"email":"tanaka@example.com","address":{"city":"東京","country":"日本"},"hobbies":["読書","旅行"]}

フォーマットされたJSON

{
  "name": "田中太郎",
  "age": 30,
  "email": "tanaka@example.com",
  "address": {
    "city": "東京",
    "country": "日本"
  },
  "hobbies": [
    "読書",
    "旅行"
  ]
}

オンラインツール

1. BigJSON.online

特徴：

無料で高速
リアルタイムフォーマット
構文ハイライト
エラー検出
ダウンロード/共有

使い方：

bigjson.onlineにアクセス

JSONを貼り付け

自動フォーマット

コピーまたはダウンロード

2. JSONLint

検証とフォーマットを組み合わせ。

3. JSON Formatter & Validator

ブラウザ拡張機能として利用可能。

プログラミング言語でのフォーマット

JavaScript/Node.js

ブラウザ

const jsonString = '{"name":"田中太郎","age":30}';
const obj = JSON.parse(jsonString);
const formatted = JSON.stringify(obj, null, 2);

console.log(formatted);
// {
//   "name": "田中太郎",
//   "age": 30
// }

カスタムインデント

// タブを使用
JSON.stringify(obj, null, '\t');

// 4スペース
JSON.stringify(obj, null, 4);

// 2スペース（推奨）
JSON.stringify(obj, null, 2);

リプレーサー関数

const data = {
  name: "田中太郎",
  password: "secret123",
  age: 30
};

const formatted = JSON.stringify(data, (key, value) => {
  // パスワードを除外
  if (key === 'password') return undefined;
  return value;
}, 2);

Python

import json

# 辞書
data = {
    "name": "田中太郎",
    "age": 30,
    "city": "東京"
}

# フォーマット（インデント2）
formatted = json.dumps(data, indent=2, ensure_ascii=False)
print(formatted)

# ファイルに書き込み
with open('output.json', 'w', encoding='utf-8') as f:
    json.dump(data, f, indent=2, ensure_ascii=False)

ソート済みキー

formatted = json.dumps(data, indent=2, sort_keys=True, ensure_ascii=False)

Java

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

public class JsonFormatter {
    public static void main(String[] args) {
        String jsonString = "{\"name\":\"田中太郎\",\"age\":30}";

        Gson gson = new GsonBuilder()
            .setPrettyPrinting()
            .create();

        Object obj = gson.fromJson(jsonString, Object.class);
        String formatted = gson.toJson(obj);

        System.out.println(formatted);
    }
}

PHP

<?php
$data = [
    'name' => '田中太郎',
    'age' => 30,
    'city' => '東京'
];

// フォーマット
$formatted = json_encode($data, 
    JSON_PRETTY_PRINT | 
    JSON_UNESCAPED_UNICODE | 
    JSON_UNESCAPED_SLASHES
);

echo $formatted;
?>

Ruby

require 'json'

data = {
  name: "田中太郎",
  age: 30,
  city: "東京"
}

# フォーマット
formatted = JSON.pretty_generate(data)
puts formatted

Go

package main

import (
    "encoding/json"
    "fmt"
)

func main() {
    data := map[string]interface{}{
        "name": "田中太郎",
        "age":  30,
        "city": "東京",
    }

    formatted, _ := json.MarshalIndent(data, "", "  ")
    fmt.Println(string(formatted))
}

コマンドラインツール

jq（最も人気）

インストール

# macOS brew install jq # Ubuntu/Debian sudo apt-get install jq # Windows（Chocolatey）

choco install jq

使用方法

# ファイルをフォーマット jq '.' input.json # 出力を保存 jq '.' input.json > formatted.json # ソート済みキー jq -S '.' input.json # コンパクト出力 jq -c '.' input.json # 特定のフィールドを抽出してフォーマット

jq '.users[] | {name, email}' data.json

Python（コマンドライン）

# ファイルをフォーマット python -m json.tool input.json output.json # 標準入力から echo '{"name":"田中太郎"}' | python -m json.tool # ソート済み

python -m json.tool --sort-keys input.json

Node.js（コマンドライン）

# NPMパッケージをインストール npm install -g json # フォーマット json < input.json # カスタムインデント

json -i 4 < input.json

テキストエディタ/IDE

Visual Studio Code

組み込みフォーマット

JSONファイルを開く

Shift + Alt + F（Windows/Linux）

Shift + Option + F（macOS）

設定

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier拡張機能

{ "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": false, "trailingComma": "none"

}

Sublime Text

JSONファイルを開く

Ctrl + Alt + Jでフォーマット

IntelliJ IDEA / WebStorm

Ctrl + Alt + L（Windows/Linux）

Cmd + Option + L（macOS）

Vim

:%!jq '.'

または

:%!python -m json.tool

ベストプラクティス

1. 一貫したインデント

推奨：2スペース

{
  "user": {
    "name": "田中太郎",
    "age": 30
  }
}

2. キーのソート

アルファベット順にキーを並べる：

{
  "age": 30,
  "email": "tanaka@example.com",
  "name": "田中太郎"
}

3. 末尾のカンマを避ける

悪い例：

{
  "name": "田中太郎",
  "age": 30,  ← 無効
}

良い例：

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

4. 適切な引用符

常に二重引用符を使用：

悪い例：

{
  'name': '田中太郎'  ← 無効
}

良い例：

{
  "name": "田中太郎"
}

5. エスケープ文字

適切にエスケープ：

{ "path": "C:\\Users\\田中", "message": "こんにちは\"世界\"", "newline": "行1\n行2"

}

高度なフォーマット技術

条件付きフォーマット

function formatJson(obj, options = {}) {
  const {
    indent = 2,
    maxLineLength = 80,
    sortKeys = false
  } = options;

  if (sortKeys) {
    obj = sortObjectKeys(obj);
  }

  let formatted = JSON.stringify(obj, null, indent);

  // 長い行を折り返す
  if (maxLineLength) {
    formatted = wrapLongLines(formatted, maxLineLength);
  }

  return formatted;
}

大きなファイルのフォーマット

// ストリーミングフォーマット（大きなファイル用）
const fs = require('fs');
const JSONStream = require('JSONStream');

fs.createReadStream('large.json')
  .pipe(JSONStream.parse(''))

  .pipe(JSONStream.stringify('', '\n', ''))
  .pipe(fs.createWriteStream('formatted.json'));

よくある間違い

1. 有効でないJSON

{ name: "田中太郎", ← 引用符がない 'age': 30, ← シングルクォート "city": "東京", ← 末尾のカンマ
}

2. 不適切なエスケープ

{ "path": "C:\Users\田中" ← ダブルバックスラッシュが必要
}

3. コメント

{ // これはコメント ← JSONでは無効 "name": "田中太郎"
}

自動化

プレコミットフック（Git）

#!/bin/bash # .git/hooks/pre-commit for file in $(git diff --cached --name-only | grep '.json$'); do jq '.' "$file" > "$file.tmp" mv "$file.tmp" "$file" git add "$file"
done

NPMスクリプト

{
  "scripts": {
    "format:json": "prettier --write '/.json'",
    "validate:json": "find . -name '*.json' -exec jq '.' {} \\;"
  }
}

VS Code タスク

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Format JSON",
      "type": "shell",
      "command": "jq '.' ${file} > ${file}.tmp && mv ${file}.tmp ${file}"
    }
  ]
}

まとめ

クイックリファレンス

| 方法 | 推奨シーン | 速度 |

|------|---------|------|

| オンラインツール | 単発のフォーマット | 中 |

| JSON.stringify() | JavaScriptアプリ | 速い |

| jq | コマンドライン/自動化 | 速い |

| VS Code | 開発中 | 速い |

| Python json.tool | スクリプト | 中 |

推奨設定

{ "indent": 2, "sortKeys": false, "trailingComma": false, "quoteStyle": "double", "newlineAtEnd": true

}

適切にフォーマットされたJSONで、コードの可読性と保守性を向上させましょう！

Big JSON Team