本文へスキップ

JSON 入門：整形と構造を理解する

・対象: 初学者,Web エンジニア・タグ: tool:json-formatter, json, debug

API レスポンスや設定ファイルで日常的に使うJSON。でも、カンマやクォートのミスで赤エラー…は"あるある"です。 本記事では、JSON の基礎と整形（フォーマット）/検証の違いをシンプルに解説します。

1. 導入：よくある悩み・初心者の疑問

「API レスポンスや設定ファイルで JSON エラーが出て原因が分からない…」そんな悩みはありませんか？ この記事では、JSON の基礎と整形・検証の違い、よくある落とし穴・対策を短時間で解説します。 まずは関連ツール「JSON Formatter」で実際に試してみましょう。

2. 基本の構造（定義と構文）

**JSON（JavaScript Object Notation）**は、キーと値でデータを表現するテキスト形式。主な型は、オブジェクト{}、配列[]、文字列、数値、真偽値、null。

1. 導入：よくある悩み・初心者の疑問

  • どこがエラーなのか分からない
  • 整形すると何が嬉しいの？
    「API レスポンスや設定ファイルで JSON エラーが出て原因が分からない…」そんな悩みはありませんか？ この記事では、JSON の基礎と整形・検証の違い、よくある落とし穴・対策を短時間で解説します。 まずは関連ツール「JSON Formatter」で実際に試してみましょう。

    1. 基本の構造（定義と構文）


    JSON（JavaScript Object Notation）は、キーと値でデータを表現するテキスト形式です。 主な型はオブジェクト{}、配列[]、文字列、数値、真偽値、nullです。
    型例
    オブジェクト{ "name": "Alice" }
    配列"JS", "API"
    文字列"Hello"
    数値123
    真偽値true, false
    nullnull

    2. 実例（整形と検証の違い）


    整形（フォーマット）はインデントや改行を入れて読みやすくします。 検証（validate）は構文が正しいかパースして確認します。 最小化（minify）は逆に空白を削って軽量化します。

    3. 落とし穴（❌ 失敗 →✅ 対策）

    • ❌ 末尾カンマ（trailing comma）を入れてしまう
    • ✅ JSON では末尾カンマは不可です。必ず削除しましょう
    • ❌ シングルクォートやコメントを使う
    • ✅ JSON はダブルクォートのみ、コメント不可です
    • ❌ 数値先頭の 0 や NaN を使う
    • ✅ 数値は 10 進数のみ、NaN は使えません

    4. 手を動かす（3 手で検証）

    1. JSON Formatter でデータを整形します
    2. 検証タブで構文チェックを行います
    3. エラー箇所を確認し、修正します

    5. クイズ

    1. JSON で使える主な型は？
    2. 末尾カンマがあるとどうなる？
    3. JSON でコメントは使えますか？

    答え

    1. オブジェクト、配列、文字列、数値、真偽値、null
    2. 構文エラーになります
    3. 使えません

    6. まとめ

    • JSON は整形・検証・最小化の違いを理解しましょう
    • 末尾カンマやコメントは使えません
    • 構文エラーは検証タブで早めに発見しましょう
    • 関連ツール「JSON Formatter」も活用してください

    まずは「JSON Formatter」で自分のデータを整形・検証してみましょう。

**JSON（JavaScript Object Notation）**は、キーと値でデータを表現するテキスト形式。主な型は、オブジェクト{}、配列[]、文字列、数値、真偽値、null。

例：

      {
  "name": "Alice",
  "age": 20,
  "skills": ["JS", "API"]
}

3. 仕組み・構造：整形と検証

  • 整形（フォーマット）: インデントや改行を入れて読みやすくする
  • 最小化（minify）: 逆に空白を削って軽量化
  • 検証（validate）: 構文が正しいかパースして確認

4. よくあるつまずき／勘違い

  • 末尾カンマ（trailing comma） → JSON では不可
  • シングルクォート → JSON 文字列はダブルクォートのみ
  • コメント → JSON 規格にコメントは存在しない
  • 数値先頭の0やNaN → 非対応

5. 実例：具体的に使う場面

  • API レスポンスを読みやすく整形してデバッグ
  • 設定ファイルの差分確認（整形 → 比較）
  • JSON Schema と合わせた入力検証

6. セキュリティ・運用上の注意

  • 機密情報（トークン/パスワード）は貼り付けない
  • ブラウザ内処理であっても、共有端末では履歴に注意

7. 手を動かす：関連ツール /tools/json-formatter の紹介

  • /tools/json-formatter にアクセス
  • 入力欄に JSON を貼り付け → 「整形」または「最小化」
  • エラーメッセージを手掛かりに構文修正

8. 3 分クイズ

  • JSON と JS オブジェクトの違いは？ → 文字列形式/表現制限あり
  • 整形と検証の違いは？ → 見やすくする vs. 構文チェック
  • NG 記法は？ → 末尾カンマ/単引用符/コメント
クイズ（3問）
  1. JSON 文字列のクォートは？ → ダブルのみ
  2. コメントは書ける？ → いいえ
  3. 末尾カンマは OK？ → いいえ

9. 関連リンク

関連ツール: /tools/json-formatter