JSON5 から JSONC まで：より柔軟な JSON フォーマット体験を手に入れる

厳格な JSON のせいで カンマ一つ が原因のデバッグに深夜まで付き合わされた経験はありませんか？そろそろ、もっと寛容な仲間たち — JSON5 と JSON with Comments (JSONC) — に出会うときかもしれません。

JSON5 とは？

JSON5 は ECMAScript 5.1 の機能を取り入れた JSON の拡張で、引用符なしのキー、末尾カンマ、シングルクォート文字列、コメント、16 進数をサポートします。コミュニティによって管理されており、手書きの設定ファイルを厳格な JSON より読みやすく寛容にすることを目的としています。

JSONC とは？

JSONC（JSON with Comments）は、標準 JSON に単一行（//）およびブロック（/* */）コメントと末尾カンマのサポートを追加した最小限の拡張です。Microsoft が管理しており、VS Code の設定ファイルや tsconfig.json などの TypeScript 設定ファイルのネイティブフォーマットです。

なぜ「寛容な」JSON が必要なのか

可読性の壁：標準 JSON ではコメント、末尾カンマ、シングルクォートなどが禁止されており、設定ファイルやデモでの意図の伝達が困難です。
チーム開発の課題：巨大な JSON ファイルにインラインコメントが一切書けないと、メンテナンスが難しくなり、ちょっとした編集でファイル全体が壊れることも。
DevOps の現実：Kubernetes や CI/CD パイプラインでは JSON の動的なマージや生成が日常的。寛容な構文なら手動修正の手間を大幅に削減できます。

JSON5 vs. JSONC 比較表

特徴	JSON（厳格）	JSON5	JSONC
`//` 単行コメント	不可	可	可
`/* */` 複数行コメント	不可	可	可
末尾カンマ	不可	可	可
シングルクォート文字列	不可	可	不可
クォートなしのキー	不可	可	不可
数値の符号 `+` / `-`	不可	可	不可
16 進数/2 進数リテラル	不可	可	不可
仕様策定者	ECMA	コミュニティ (A. Rauschmayer)	Microsoft / VS Code

一言でまとめると：JSON5 は JavaScript のオブジェクトリテラルに近い書き心地、JSONC は標準 JSON にコメント機能を追加しただけのものです。

構文の例

標準 JSON（厳格）

{
  "name": "Go Tools",
  "features": ["Base64", "JSON Formatter"]
}

JSON5 の例

// プロジェクト設定
{
  name: 'Go Tools',      // シングルクォート & クォートなしキー
  features: [
    'Base64',
    'JSON Formatter',    // 末尾カンマ
  ],
  version: 1.0,          // 文字列以外の数値もOK
}

JSONC の例

{
  // プロジェクト名
  "name": "Go Tools",
  // 機能一覧
  "features": [
    "Base64",
    "JSON Formatter", // 末尾カンマ
  ]
}

フォーマット・パースのツールサポート

利用場面	JSON5	JSONC	推奨ライブラリ/ツール
ブラウザ	`JSON5.parse()` polyfill、Prettier 内蔵 json5 パーサー (>= v1.13)	VS Code `settings.json` ネイティブ対応	—
Node.js	`json5` npm パッケージ	`comment-json`, `jsonc-parser`	CLI フォーマット & AST パース対応
IDE	VS Code、WebStorm 拡張	VS Code ネイティブ、WebStorm プラグイン	Prettier でフォーマット統一
CI / Lint	`eslint-plugin-json5`	`eslint-plugin-jsonc`	Husky & lint-staged と連携
オンラインツール	Go Tools JSON Formatter（JSON5/JSONC の整形 & バリデーション）	同左	JSON フォーマッター

VS Code でのフォーマット設定

settings.json に以下を追加します：

"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

あとは Alt + Shift + F で JSONC ファイルを一発整形できます。

実践的なヒントと注意点

1. 本番環境にデプロイする前に変換する

ブラウザの JSON.parse は依然として厳格な JSON しか受け付けません。
ビルドステップで rollup-plugin-json5 やカスタムスクリプトを使い、JSON5/JSONC を純粋な JSON に変換しましょう。

2. セキュリティと信頼性

寛容な構文は不正なフィールドを見逃すリスクがあります。API をリリースする前に JSON Schema や zod で必ずバリデーションしましょう。

3. チームの規約を定める

README やコントリビューションガイドで「*.json5 は設定ファイル専用、リリースパッケージは厳格な .json を使う」と明記します。
Prettier のルールを統一して、フォーマットの違いによる無意味な diff を防ぎましょう。

4. パフォーマンス

JSON5/JSONC のパースには追加の依存関係とわずかなオーバーヘッドが発生します。CLI や開発ツールでは問題ありませんが、本番環境では計測を行いましょう。

よくある質問

JSON5 と JSONC の違いは何ですか？

JSON5 は JavaScript ライクな構文で JSON を拡張しています：クォートなしのキー、末尾カンマ、単行・ブロックコメント、16 進数、複数行文字列に対応。JSONC はよりシンプルで、標準 JSON に単行（//）とブロック（/* */）コメントを追加しただけです。コメント機能だけで十分なら JSONC を、より豊富な構文が必要なら JSON5 を選びましょう。

JSON5 や JSONC を本番 API で使用できますか？

いいえ——JSON5 と JSONC は設定ファイル向けに設計されており、データ交換には適していません。API では最大限の相互運用性のために標準 JSON（RFC 8259）を使用すべきです。JSON5/JSONC は tsconfig.json、.vscode/settings.json などのローカル設定ファイルに限定し、機械的なパースより人間の可読性が重要な場面で使いましょう。

VS Code は JSON5 をネイティブサポートしていますか？

VS Code は JSONC をネイティブサポートしています（自身の設定ファイルが JSONC を使用）が、JSON5 はデフォルトではサポートしていません。JSON5 を使うには、VS Code マーケットプレイスから「JSON5 syntax」などの専用拡張機能をインストールしてください。設定で .json5 ファイルを JSON5 言語モードに関連付けることも可能です。

JSON5 を標準 JSON に変換するにはどうすればよいですか？

json5 npm パッケージを使います：JSON5.parse() で JSON5 を読み込み、JSON.stringify() で標準 JSON を出力します。CLI では npx json5 < input.json5 > output.json を実行します。Go Tools の JSON フォーマッターなどのオンラインツールでも、変換後の出力を検証して正確性を確認できます。

JSONC は JSON with Comments と同じものですか？

はい——JSONC は「JSON with Comments」の略称で、VS Code、TypeScript（tsconfig.json）、その他の Microsoft ツールが使用するフォーマットです。標準 JSON 仕様に // と /* */ コメントのみを追加したものです。パーサーは処理前にコメントを除去するため、結果のデータ構造は標準 JSON と完全に同一です。

Base64 エンコーディング、ハッシュ生成、タイムスタンプ変換など、ブラウザベースの開発者ツールについては開発者必携ツールガイドをご覧ください。

まとめ

可読性と厳密性のバランスを取ることは、開発者にとって永遠のテーマです。JSON5 と JSONC は記述体験を大幅に改善してくれます。適切なビルドパイプラインとバリデーション機構を組み合わせれば、「寛容な JSON」のメリットを安全に享受できます。

JSON5 から JSONC まで：より柔軟な JSON フォーマットガイド