メインコンテンツにスキップ

JSON Formatter/Validator

JSONの妥当性を検証してフォーマットする無料オンラインツールです。

?JSONを入力してください

📝 入力JSON

行： 0文字： 0サイズ： 0 bytes

✨ 結果

JSON (JavaScript Object Notation)の妥当性を検証し、整形します。インデントを追加して可読性を向上させるか、空白を削除してサイズを削減できます。

JSONとは?​

JSON (JavaScript Object Notation)は軽量なデータ交換形式です。人間が読み書きしやすく、機械が解析・生成しやすい特徴があります。Web API、設定ファイル、データストレージなどで広く使用されています。

主な機能​

  • 妥当性検証: JSON構文エラーのリアルタイム検出
  • フォーマット (Prettify): インデントを追加して可読性を向上
  • 圧縮 (Minify): 空白を削除してサイズを削減
  • リアルタイム統計: 行数、文字数、バイトサイズを表示
  • インデント設定: 2/4/8スペースから選択
  • サンプルロード: サンプルJSONで素早くテスト

使用方法​

JSON妥当性検証​

  1. JSONを入力エリアに貼り付けます
  2. リアルタイムで妥当性が検証されます
  3. エラーがある場合は詳細なエラーメッセージが表示されます

JSONフォーマット​

  1. JSONを入力します
  2. インデントサイズを選択します (2/4/8 spaces)
  3. "フォーマット"ボタンをクリックします
  4. 整形されたJSONが出力されます

JSON圧縮​

  1. JSONを入力します
  2. "圧縮"ボタンをクリックします
  3. 空白が削除された1行のJSONが出力されます

JSON基本構文​

データ型​

1. オブジェクト (Object)​

{
  "name": "John",
  "age": 30
}

2. 配列 (Array)​

["apple", "banana", "orange"]

3. 文字列 (String)​

"Hello World"

4. 数値 (Number)​

42
3.14
-10

5. 真偽値 (Boolean)​

true
false

6. null​

null

ネスト構造​

{
  "user": {
    "name": "John Doe",
    "age": 30,
    "emails": ["john@example.com", "doe@example.com"],
    "address": {
      "city": "New York",
      "country": "USA"
    },
    "active": true,
    "lastLogin": null
  }
}

よくあるJSONエラー​

1. 末尾のカンマ (Trailing Comma)​

// ❌ 誤り
{
  "name": "John",
  "age": 30,  ← 最後のカンマ
}

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

2. 引用符の欠落​

// ❌ 誤り
{
  name: "John"  ← キーに引用符なし
}

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

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

// ❌ 誤り
{
  'name': 'John'  ← シングルクォート
}

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

4. コメントの使用​

// ❌ 誤り
{
  // これはコメントです
  "name": "John"
}

// ✅ JSONはコメントをサポートしません
// JSONCまたはJSON5を使用する必要があります

5. 未定義の値​

// ❌ 誤り
{
  "name": "John",
  "age": undefined  ← undefinedはJSONにありません
}

// ✅ 正しい (nullを使用)
{
  "name": "John",
  "age": null
}

使用例​

1. APIレスポンスのデバッグ​

// APIから受け取ったレスポンスをフォーマットして確認
{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "John"},
      {"id": 2, "name": "Jane"}
    ]
  }
}

2. 設定ファイルの作成​

// package.json, tsconfig.jsonなど
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0"
  }
}

3. データ保存​

// ローカルストレージ、ファイル保存など
{
  "theme": "dark",
  "language": "ja",
  "notifications": true
}

4. ログ分析​

// 構造化されたログ
{
  "timestamp": 1640995200,
  "level": "error",
  "message": "Connection failed",
  "details": {
    "host": "api.example.com",
    "port": 443
  }
}

5. テストデータ​

// モック(mock)データの生成
{
  "users": [
    {"id": 1, "name": "Test User 1"},
    {"id": 2, "name": "Test User 2"}
  ]
}

プログラミング言語別の使用法​

JavaScript​

// JSON → オブジェクト (パース)
const obj = JSON.parse('{"name":"John","age":30}');
console.log(obj.name); // "John"

// オブジェクト → JSON (文字列化)
const json = JSON.stringify(obj);
console.log(json); // '{"name":"John","age":30}'

// フォーマット (インデント2つ)
const formatted = JSON.stringify(obj, null, 2);

Python​

import json

# JSON → 辞書
data = json.loads('{"name":"John","age":30}')
print(data['name'])  # "John"

# 辞書 → JSON
json_str = json.dumps(data)

# フォーマット
formatted = json.dumps(data, indent=2)

PHP​

<?php
// JSON → 配列
$data = json_decode('{"name":"John","age":30}', true);
echo $data['name'];  // "John"

// 配列 → JSON
$json = json_encode($data);

// フォーマット
$formatted = json_encode($data, JSON_PRETTY_PRINT);
?>

Java​

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

// JSON → オブジェクト
Gson gson = new Gson();
User user = gson.fromJson(jsonString, User.class);

// オブジェクト → JSON
String json = gson.toJson(user);

// フォーマット
Gson prettyGson = new GsonBuilder().setPrettyPrinting().create();
String formatted = prettyGson.toJson(user);

C#​

using System.Text.Json;

// JSON → オブジェクト
var user = JsonSerializer.Deserialize<User>(jsonString);

// オブジェクト → JSON
var json = JsonSerializer.Serialize(user);

// フォーマット
var options = new JsonSerializerOptions { WriteIndented = true };
var formatted = JsonSerializer.Serialize(user, options);

フォーマット vs 圧縮​

フォーマット (Prettify)​

メリット:

  • 人間が読みやすい
  • デバッグしやすい
  • 構造が把握しやすい

デメリット:

  • ファイルサイズが増加
  • ネットワーク転送時に非効率

使用タイミング:

  • 開発/デバッグ
  • 設定ファイル
  • ドキュメント化

圧縮 (Minify)​

メリット:

  • ファイルサイズが削減 (約30-50%)
  • ネットワーク転送が効率的
  • ストレージを節約

デメリット:

  • 人間が読みにくい
  • デバッグが困難

使用タイミング:

  • 本番環境
  • APIレスポンス
  • 大容量データ

実用的なヒント​

1. 大きなJSONファイルの処理​

// ストリーミング解析を使用
const stream = fs.createReadStream('large.json');
const parser = JSONStream.parse('*');
stream.pipe(parser);

2. 循環参照の処理​

const obj = {};
obj.self = obj; // 循環参照

// エラー発生
// JSON.stringify(obj); // TypeError

// カスタムreplacerで解決
const json = JSON.stringify(obj, (key, value) => {
  if (key === 'self') return undefined;
  return value;
});

3. Dateオブジェクトの処理​

const data = {
  name: "John",
  created: new Date()
};

// Date → ISO 8601文字列
const json = JSON.stringify(data);
// {"name":"John","created":"2022-01-01T00:00:00.000Z"}

4. 特定のフィールドのみシリアライズ​

const user = {
  name: "John",
  password: "secret",
  age: 30
};

// passwordを除外
const json = JSON.stringify(user, ['name', 'age']);
// {"name":"John","age":30}

5. 圧縮前後の比較​

const data = { /* 複雑なオブジェクト */ };

const formatted = JSON.stringify(data, null, 2);
console.log(formatted.length); // 1500

const minified = JSON.stringify(data);
console.log(minified.length); // 850

// 約43%削減!

JSON vs 他の形式​

JSON vs XML​

特徴JSONXML
可読性より簡潔より冗長
解析速度速い遅い
データ型ネイティブサポート文字列のみ
属性なしあり
コメントなしあり

JSON vs YAML​

特徴JSONYAML
可読性中程度非常に良い
構文厳格柔軟
コメントなしあり
複雑な構造可能より簡単
解析速度速い遅い

よくある質問​

Q: JSONにコメントを追加できますか?​

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

  • JSONC: VS Codeなどで使用されるコメント対応JSON
  • JSON5: JavaScriptスタイルのコメント対応

Q: JSONの最大サイズは?​

理論的な制限はありませんが、実用的には:

  • ブラウザ: 約10-100 MB (ブラウザにより異なる)
  • Node.js: 約512 MB (V8エンジンのデフォルト値)
  • メモリ制限: システムメモリに依存

Q: JSONで日付をどのように表現しますか?​

標準的な方法はISO 8601文字列:

{"date": "2022-01-01T00:00:00.000Z"}

Q: JSONでundefinedとnullの違いは?​

  • null: JSONで有効な値
  • undefined: JSONでサポートされていない (省略されるかnullに変換)

Q: フォーマットするとパフォーマンスが遅くなりますか?​

わずかに遅くなりますが、無視できるレベルです。開発中はフォーマット、本番環境では圧縮の使用を推奨します。

Q: JSONファイルにBOMがある場合はどうすればいいですか?​

BOM (Byte Order Mark)は削除する必要があります:

const json = text.replace(/^\uFEFF/, '');

関連ツール​

パフォーマンス​

  • 解析速度: ミリ秒未満 (通常サイズ)
  • フォーマット速度: 即座
  • 圧縮速度: 即座
  • メモリ使用量: 最小限

ブラウザ互換性​

JSON.parse()とJSON.stringify()はすべての最新ブラウザでサポートされています:

  • Chrome (すべてのバージョン) ✓
  • Firefox (すべてのバージョン) ✓
  • Safari (すべてのバージョン) ✓
  • Edge (すべてのバージョン) ✓
  • IE 8+ ✓

プライバシー保護​

このツールは完全にクライアント側で動作します。入力されたJSONはサーバーに送信されず、ブラウザ内でのみ処理されます。

次に試してみてください​

💬 このツールは役に立ちましたか?​

ご質問や改善提案がありましたら、いつでもフィードバックをお寄せください!