JSONとJSONCの違い｜コメントが使える場所・使えない場所

30秒結論

用途	JSONC（コメント付き）	標準JSON
VSCode設定	✅ OK	✅ OK
tsconfig.json	✅ OK	✅ OK
API通信	❌ エラー	✅ OK
JSON.parse()	❌ エラー	✅ OK
データ保存・交換	❌ 避ける	✅ OK

JSONCは「人が読む設定ファイル専用」。外に出すときは標準JSONに変換。

---

JSONCとは

JSONC（JSON with Comments）は、コメントと末尾カンマを許容する拡張仕様。

{
  // 単一行コメント
  "editor.fontSize": 14,
  /*
   * 複数行コメント
   */
  "editor.tabSize": 2,  // ← 末尾カンマもOK
}

主にVSCodeの設定ファイルで使われている。

---

使える場所・使えない場所

✅ JSONCが使える場所

ファイル	用途
settings.json	VSCode設定
tsconfig.json	TypeScript設定
launch.json	デバッグ設定
devcontainer.json	Dev Container設定
.vscode/*.json	VSCode関連全般

これらはエディタがJSONCとして処理するので、コメントを書いても動く。

❌ JSONCが使えない場所

場面	結果
API通信	パースエラー
JSON.parse()	SyntaxError
外部サービスへのデータ送信	エラー
package.json	一部ツールで動かない

---

事故パターン：JSONCをそのままAPIに送る

何が起きるか

// VSCodeからコピーした設定
const config = `{
  // APIエンドポイント
  "url": "https://api.example.com",
  "timeout": 3000,
}`;

// これをそのまま送ると...
fetch('/api', {
  headers: { 'Content-Type': 'application/json' },
  body: config,  // ← サーバー側でパースエラー
});

サーバーの JSON.parse() はコメントを理解しない。

対処法

送信前にコメントを除去する。

方法1: JSON Formatter の「コメント除去」をONにして変換

方法2: コードで処理

import stripJsonComments from 'strip-json-comments';

const json = stripJsonComments(jsonc);
const data = JSON.parse(json);

---

事故パターン：JSON.parse()でJSONCを読む

何が起きるか

JSON.parse('{"a": 1 // comment}');
// → SyntaxError: Unexpected token '/' at position 8

ブラウザやNode.jsの標準APIはコメント非対応。

対処法

JSONC対応のパーサーを使う。

// jsonc-parser パッケージ
import { parse } from 'jsonc-parser';

const data = parse('{"a": 1 // comment}');
// → { a: 1 }

---

判断フローチャート

JSONにコメントを書きたい
    ↓
そのファイルは外部と共有する？
    ├── Yes → 標準JSONを使う（コメントは別ドキュメントに）
    └── No → JSONCでOK
             ↓
         APIに送信する？
             ├── Yes → 送信前にコメント除去
             └── No → そのまま使う

---

末尾カンマの扱い

JSONCでは末尾カンマも許容されることが多い。

{
  "a": 1,
  "b": 2,  // ← 標準JSONではエラー
}

便利だが、これもAPIに送る前には除去が必要。

---

まとめ

ポイント	内容
JSONCの用途	人が読む設定ファイル専用
使える場所	VSCode設定、tsconfig.json など
使えない場所	API通信、JSON.parse()、外部連携
事故を防ぐには	外に出す前にコメント除去

👉 JSON Formatter の「コメント除去」で標準JSONに変換できる