JSON Formatter/Validator

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

?JSON을 입력하세요

들여쓰기 크기:2 spaces4 spaces8 spaces

📝 입력 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

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

JSON vs YAML

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

よくある質問

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/, '');

関連ツール

• Base64エンコーダー - JSONをBase64にエンコード
• URLエンコーダー - JSONをURLセーフにエンコード
• テキスト比較 - 2つのJSONを比較

パフォーマンス

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

ブラウザ互換性

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

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

プライバシー保護

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

次に試してみてください

• Base64 Encoder - JSONをBase64にエンコード
• CSV-JSON Converter - CSVとJSONの相互変換
• API Tester - REST APIエンドポイントのテスト
• URL Encoder - JSONをURLセーフにエンコード

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

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