JSONフォーマッターの使い方・JSONの整形・バリデーション解説

公開: 2026年6月28日

JSONとは

JSON（JavaScript Object Notation）は、データをテキストで表現するための軽量なフォーマットです。APIのレスポンス・設定ファイル・データの受け渡しなど、Webエンジニアが日常的に扱います。

JSONの基本構文

オブジェクト `{}`

キーと値のペアを {} で囲みます。キーは必ずダブルクォートで囲む必要があります。

{
  "name": "山田太郎",
  "age": 30,
  "active": true
}

配列 `[]`

値のリストを [] で囲みます。

{
  "colors": ["red", "green", "blue"],
  "scores": [85, 92, 78]
}

使用できるデータ型

型	例	説明
文字列	`"hello"`	ダブルクォートで囲む
数値	`42`, `3.14`	クォート不要
真偽値	`true`, `false`	小文字のみ
null	`null`	値なし
オブジェクト	`{"key": "val"}`	ネスト可能
配列	`[1, 2, 3]`	ネスト可能

フォーマッターの使い方

整形（フォーマット）

JSONを見やすくインデント整形します。APIレスポンスや圧縮されたJSONを読みやすくしたいときに便利です。

テキストエリアにJSONを貼り付け
「整形」ボタンをクリック（または自動的に整形されます）
インデントは2スペース・4スペース・タブから選択できます

バリデーション（検証）

JSONを貼り付けると、構文が正しいかリアルタイムで検証されます。エラーがある場合はその内容が表示されます。

Minify（圧縮）

整形されたJSONを1行に圧縮します。データ転送量の削減や、設定ファイルの最終出力に使います。

よくあるJSONエラーと修正方法

末尾カンマ（Trailing Comma）

JavaScriptでは許可されていますが、JSONではエラーです。

// NG
{
  "name": "太郎",
  "age": 30,   ← 末尾のカンマは不可
}

// OK
{
  "name": "太郎",
  "age": 30
}

シングルクォート

JSONのキーと文字列値には必ずダブルクォートを使います。

// NG
{ 'name': '太郎' }

// OK
{ "name": "太郎" }

JSONにはコメントを記述できません。設定ファイルでコメントが必要な場合はJSONC（JSON with Comments）やYAMLを使用してください。

// NG
{
  // これはエラー
  "key": "value"
}

数値のクォート

数値をダブルクォートで囲むと文字列として扱われます。

// 数値として扱う
{ "count": 42 }

// 文字列として扱う（用途が違う）
{ "count": "42" }

活用シーン

APIレスポンスの確認

REST APIの動作確認でcurlやPostmanで取得したJSONを整形して読みやすくする用途が最も多いです。

設定ファイルの編集

package.json・tsconfig.json・appsettings.json など、JSONベースの設定ファイルの構文チェックに使えます。

データ変換・確認

CSVからJSONに変換したデータの構造確認、WebスクレイピングやETL処理後のデータ検証など。

キーボードショートカット

テキストエリア内で Tab キー を押すと2スペースのインデントが挿入されます。JSON編集時に活用してください。