コメントが許可されていない理由は、JSON は主にデータの格納に使用されるため、コメントが多すぎるとデータの可読性に影響を与えるだけでなく、データ量が増加し、データの送信と分析の速度に影響を与えます。
ただし、シナリオによっては、注釈を使用する必要があります。例えば、JSON形式の設定ファイルでは設定情報をコメントで説明したり、インターフェースが返すJSONデータではコメントなどでデータの意味を説明したりしたいと考えています。では、JSON データにコメントを追加するにはどうすればよいでしょうか。ここにいくつかの方法があります。
特別なキー名を使用する
JSON にコメントを追加するには、追加するキーと値のペアの前 (または後) に同じ名前のキーを追加し、キー名に@
、 #
、 ?
、 _
などの特殊文字を追加して区別します。 、 /
などを入力し、キーに対応する値にコメントの内容を定義します。
注: キー名に特殊文字を追加する場合は、 :
、 {
、 }
、 [
、 ]
および JSON のその他の一般的な文字を避けるようにしてください。
簡単な例を使用して、特別なキー名を使用して JSON にコメントを追加する方法を示しましょう。
{
"@name": "ウェブサイト名",
"name": "IT基礎",
"_url": "ウェブサイトURL",
"url": "https://it-kiso.com/",
"course": "JSONチュートリアル",
"@charge": "0=有料; 1=無料",
"charge": 1,
"#list": "チュートリアル目次",
"list": [
"JSONデータの種類",
"JSONオブジェクト",
"JSON配列"
],
"message": {
"code": 0,
"message": "OK",
"#data": {
"#id": "ユーザーID",
"#type": "0=正常; 1=異常",
"#name": "名前",
"#createTime": "作成日(yyyy-MM-dd)"
},
"data": {
"id": "12345",
"type": 0,
"name": "私の名前",
"createTime": "2020-05-20"
}
}
}
キー名に特殊文字を追加するだけでなく、次の例に示すように、キー名として「comment」、「_comment」、または「__comment」を使用してコメントを直接定義することもできます。
{
"_comment": "IT基礎(https://it-kiso.com/)—— オンラインでプログラミングを学ぶためのウェブサイト",
"course": {
"name": "JSONチュートリアル",
"url": "https://it-kiso.com/json/index.html"
}
}
JSON5
JSON5 は、開発者によって作成され、GitHub ( GitHub ) で公開されている JSON の非公式な標準であり、JSON のアップグレード版と見なすことができます。 JSON5 は主に、ECMAScript5.1 のいくつかの機能を導入することによって JSON 構文を拡張し、JSON のいくつかの制限を軽減し、既存の JSON 形式と互換性があります。
JSON と比較して、JSON5 は次の変更を行いました。
- オブジェクトまたは配列の末尾 (つまり、最後のキーと値のペアまたは値) にコンマを追加できます。
- 文字列は一重引用符を使用して定義できます。
- 文字列にはエスケープ文字を含めることができ、複数行にまたがることができます。
- 16 進数を定義できます。
- 数値には、先頭または末尾の小数点を含めることができます。
- 数値の前にプラス記号またはマイナス記号を追加して、正数または負数を示すことができます。
-
//
を使用して単一行のコメントを定義し、/* ... */
して複数行のコメントを定義できます。
次の例に示すように:
{
"name": "IT基礎",
"url": "https://it-kiso.com/",
"course": "JSONチュートリアル",
"charge": 1,
"list": [
"JSONデータの種類",
"JSONオブジェクト",
"JSON配列"
],
"message": {
"code": 0,
"message": "OK",
"data": {
"id": "12345",
"type": 0,
"name": "私の名前",
"createTime": "2020-05-20"
}
}
}
JSON5 を使用するのは非常に簡単です。フロント エンドで使用する場合は、次の例に示すように、js ファイルを直接インポートできます。
<script src=”https://unpkg.com/json5@^2.0.0/dist/index.min.js”></script>
上記で紹介した js ファイルは、グローバルな JSON5 オブジェクトを作成します。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
<script>
var arr = {
// ウェブサイト名
"name": "IT基礎",
// ウェブサイトURL
"url": "https://it-kiso.com/",
"course": "JSON チュートリアル",
// 0=有料; 1=無料
"charge": 1,
// チュートリアルリスト
"list": [
"JSONデータの種類",
"JSONオブジェクト",
"JSON配列"
],
"message": {
"code": 0,
"message": "OK",
/*
id = ユーザーID
type = 0=正常; 1=異常
name = 名前
createTime = 作成日時(yyyy-MM-dd)
*/
"data": {
"id": "12345",
"type": 0,
"name": "私の名前",
"createTime": "2020-05-20"
}
}
};
var str = JSON5.stringify(arr);
console.log(arr)
</script>
</body>
</html>
さらに、Node.js を介して JSON5 をインストールすることもできます。インストール コマンドは次のとおりです。
npm install json5
インストールが正常に完了したら、次の例に示すように、 const JSON5 = require('json5')
を使用してグローバル JSON5 オブジェクトを作成できます。