JSONフォーマッターをJavaScriptで作った話｜JSON.parseとJSON.stringifyだけで整形できる理由

APIのレスポンスをコピーしてみたら、こんな1行が返ってきたことはありませんか？

{"user":{"id":1,"name":"Yamada","email":"yamada@example.com","skills":["AWS","Linux","Python"],"active":true}}

どこに何が書いてあるのか、一瞬では読めません。これを整形すると——

{
  "user": {
    "id": 1,
    "name": "Yamada",
    "email": "yamada@example.com",
    "skills": ["AWS", "Linux", "Python"],
    "active": true
  }
}

構造が一目でわかります。この「1行 → 読みやすい形」への変換を行うのが JSONフォーマッター です。

この記事では、このツールの仕組みをゼロから解説します。

1. JSONとは何か

JSON（JavaScript Object Notation） は、データを表現するための書き方のルール（フォーマット）です。

2000年代初頭、Webサービスがデータをやり取りする際に使われていた XML という形式がありました。しかし記述が冗長で扱いが面倒でした：

<!-- XMLの書き方（古い方法） -->
<user>
  <id>1</id>
  <name>Yamada</name>
  <active>true</active>
</user>

これをよりシンプルにしたのがJSONです：

{ "id": 1, "name": "Yamada", "active": true }

なぜJSONがここまで普及したのか？

JavaScriptがブラウザ上のプログラミング言語として標準化され、JSONはJavaScriptのオブジェクト記法をそのまま流用しているため、JavaScriptで扱うのが非常に簡単でした。今やJSONはWeb API・設定ファイル・クラウドサービスのあらゆる場面で使われる「共通言語」になっています。

2. JSONの厳格なルール

JSONには守らなければいけない厳しいルールがあります。少しでも外れるとエラーになります。

ルール一覧

ルール	OK	NG
文字列は必ずダブルクォート	`"name"`	`'name'`（シングルクォート）
末尾カンマは禁止	`[1, 2, 3]`	`[1, 2, 3,]`（最後の`,`）
キーも必ずダブルクォート	`{"key": 1}`	`{key: 1}`
コメントは書けない	—	`// コメント`（構文エラー）
使える値の型は6種類	文字列・数値・真偽値・null・配列・オブジェクト	`undefined`・関数・日付型など

なぜシングルクォートが使えないのか？

JSONはJavaScript専用ではなく、PythonでもRubyでもJavaでも使われる「言語に依存しない汎用フォーマット」です。厳密にルールを定めておくことで、どんな言語でも同じルールで解析できます。シングルクォートを許可すると、一部の言語での扱いが曖昧になるため禁止されています。

なぜ末尾カンマが禁止なのか？

JSONの仕様が制定された2001年当時、JavaScriptエンジンによって末尾カンマの扱いがバラバラでした。互換性を保つために「末尾カンマなし」が正式仕様になりました。ちなみに現代のJavaScriptコードでは末尾カンマはOKですが、JSONは別物なので今でも禁止です。

3. JavaScriptの実装：たった2行の核心

JSONフォーマッターの核心部分は、実はたった2行です：

const parsed = JSON.parse(raw);          // 文字列 → JavaScriptオブジェクト
const formatted = JSON.stringify(parsed, null, 4);  // オブジェクト → 整形済み文字列

なぜ2ステップ必要なのか？

一度「文字列」を「JavaScriptが理解できるオブジェクト」に変換（parse）してから、改めて「人間が読みやすい文字列」に変換（stringify）します。この中間段階を挟むことで2つの嬉しいことが起きます：

バリデーション（検証）が自動で行われる — parseに失敗＝JSONが壊れている

整形を自由にコントロールできる — stringifyのオプションでインデント幅を指定できる

JSON.parse：文字列をオブジェクトに変換

JSON.parse('{"name": "Yamada", "age": 30}')
// → { name: "Yamada", age: 30 } というJavaScriptオブジェクトになる

JSON.stringify：オブジェクトを文字列に変換

// 第3引数がインデントのスペース数
JSON.stringify({ name: "Yamada", age: 30 }, null, 4)
// →
// {
//     "name": "Yamada",
//     "age": 30
// }

// インデントを0にすると1行に圧縮（Minify）
JSON.stringify({ name: "Yamada", age: 30 }, null, 0)
// → {"name":"Yamada","age":30}

第2引数の null は何？

JSON.stringify の第2引数は「replacer」と呼ばれ、特定のキーだけを出力したりカスタム変換したりするための関数を渡せます。今回は何もしないので null を渡しています。「フォーマット」と「圧縮（Minify）」の切り替えは第3引数の数字を変えるだけで実現できます。

4. エラー検出の実装

JSONが不正だった場合、JSON.parse は例外（エラー）を投げます。これを try...catch で捕まえます：

function processJSON(spaces) {
  const raw = inputArea.value.trim();

  try {
    const parsed = JSON.parse(raw);              // ここで構文チェックも行われる
    outputArea.value = JSON.stringify(parsed, null, spaces);
    statusBanner.className = '... bg-green-500'; // 成功 → 緑色バー
    errorMsg.classList.add('hidden');

  } catch (e) {
    outputArea.value = '';
    statusBanner.className = '... bg-red-500';   // 失敗 → 赤色バー
    errorMsg.textContent = `❌ 無効なJSONです: ${e.message}`;
    errorMsg.classList.remove('hidden');
  }
}

try...catch とは何か？

「試してみて（try）、エラーが起きたら捕まえる（catch）」という構文です。JSON.parse に壊れたJSONを渡すと例外が発生してプログラムが止まってしまうので、try...catch でその例外を受け取り、ユーザーにメッセージを表示する処理に切り替えます。エラーが起きてもプログラムが止まらないようにする基本的な手法です。

5. UIで気をつけたこと

ステータスバナー（色の帯）

出力エリアの上部に、成功なら緑、エラーなら赤の細い帯が表示されます。

// 成功
statusBanner.className = '... bg-green-500';
// エラー
statusBanner.className = '... bg-red-500';

なぜ色の帯をつけたのか？

テキストメッセージだけでは、エラーに気づくのが遅れることがあります。色は瞬時に「成功/失敗」を伝えられます。特にJSONのデバッグ中は何度も試行錯誤するため、結果を素早く視認できることが重要です。信号機と同じ「赤＝止まれ、緑＝進め」という直感的な意味を利用しています。

IntegratとMinifyの両方を提供する理由

「整形（Format）」ボタンだけでなく「圧縮（Minify）」ボタンも実装しています。

なぜMinifyも必要なのか？

逆のニーズもあるからです。きれいに整形されたJSONを、APIリクエストのボディや環境変数に貼り付ける際は1行に圧縮したい場面があります。また、「整形 → 確認 → 圧縮 → 貼り付け」というワークフローを1つのツールで完結させることで、他のサイトを行き来する手間をなくせます。

6. 実際の使い場面

エンジニアとしての仕事でJSONフォーマッターが活躍するシーンを紹介します：

① APIのレスポンスを調べるとき

curl https://api.example.com/users/1
# → {"id":1,"name":"Yamada","roles":["admin","editor"],"created_at":"2026-01-01"}

このレスポンスをそのままフォーマッターに貼り付ければ、どんなデータが返ってきているか確認できます。

② AWSのIAMポリシーを書くとき

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-bucket/*"
    }
  ]
}

AWSのポリシーはJSONで記述します。構文ミスがあるとポリシーが適用されないため、バリデーション機能が役立ちます。AWSのバッチ処理を定期実行する場合は、CronジェネレーターでEventBridgeのスケジュール式を作成するのもおすすめです。

③ package.jsonなどの設定ファイルを編集するとき Node.jsプロジェクトの package.json もJSON形式です。手で編集した後にフォーマッターで確認すると、うっかりミスを事前に防げます。

7. まとめ：JSONフォーマッターから学べること

知識の種類	学べる内容
データフォーマット	JSONの仕様・XMLとの違い・厳格なルール
JavaScript	JSON.parse・JSON.stringify・try…catch
UI設計	色によるフィードバック・双方向操作（整形↔圧縮）
実務知識	APIデバッグ・AWSポリシー・設定ファイル管理

JSON.parse と JSON.stringify という2つの組み込み関数の組み合わせだけで、整形・圧縮・バリデーションの3つの機能が実現できます。これは「シンプルな部品を組み合わせてツールを作る」というプログラミングの本質を体現した好例です。

ぜひAPIを触るときにこのツールを手元に置いてみてください。

→ JSONフォーマッター・バリデーターを使ってみる

ツール解説シリーズ：第1回・IP計算機 | 第2回・Base64エンコーダー | 第3回・chmod計算機 | 今ここ（第4回・JSONフォーマッター） | 第5回・Cronジェネレーター

JSONフォーマッターをJavaScriptで作った話｜JSON.parseとJSON.stringifyだけで整形できる理由

1. JSONとは何か

2. JSONの厳格なルール

ルール一覧

3. JavaScriptの実装：たった2行の核心

JSON.parse：文字列をオブジェクトに変換

JSON.stringify：オブジェクトを文字列に変換

4. エラー検出の実装

5. UIで気をつけたこと

ステータスバナー（色の帯）

IntegratとMinifyの両方を提供する理由

6. 実際の使い場面

7. まとめ：JSONフォーマッターから学べること

関連記事

クリエイター・個人事業主が今すぐ導入すべき無料業務効率化ツール5選【IT苦手でもOK】

MarkdownプレビューをJavaScriptで作った話｜`#`と`**`がHTMLになる仕組み

正規表現テスターをJavaScriptで作った話｜`.\d+.` が読めるようになる

CHECK IT OUT

サブスク加入者限定の
コンテンツを配信中

「これ自動化できないかな？」
そのアイデア、ITで実現できます。

サブスク加入者限定の
コンテンツを配信中

1. JSONとは何か

2. JSONの厳格なルール

ルール一覧

3. JavaScriptの実装：たった2行の核心

JSON.parse：文字列をオブジェクトに変換

JSON.stringify：オブジェクトを文字列に変換

4. エラー検出の実装

5. UIで気をつけたこと

ステータスバナー（色の帯）

IntegratとMinifyの両方を提供する理由

6. 実際の使い場面

7. まとめ：JSONフォーマッターから学べること

関連記事

クリエイター・個人事業主が今すぐ導入すべき無料業務効率化ツール5選【IT苦手でもOK】

MarkdownプレビューをJavaScriptで作った話｜`#`と`**`がHTMLになる仕組み

正規表現テスターをJavaScriptで作った話｜`.*\d+.*` が読めるようになる

CHECK IT OUT

サブスク加入者限定の コンテンツを配信中

「これ自動化できないかな？」 そのアイデア、ITで実現できます。

正規表現テスターをJavaScriptで作った話｜`.\d+.` が読めるようになる

サブスク加入者限定の
コンテンツを配信中

「これ自動化できないかな？」
そのアイデア、ITで実現できます。