JSON is a pure data exchange format. そのシンプルさと柔軟性により、JSON はさまざまなシナリオでの使用に適しています. たとえば、JSON 形式は、構成ファイルやインターフェイスによって返されるデータで使用されます.ただし、JSON には明らかな欠点があります。つまり、JSON はプログラミング言語のようにコメントを追加できず、JSON のコンテンツはすべてデータの一部と見なされます。

コメントが許可されていない理由は、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 オブジェクトを作成できます。

「 JSON コメント」についてわかりやすく解説!絶対に観るべきベスト2動画

【Pythonプログラミング入門】JSONを解説!( jsonモジュール ) 〜VTuberと学習〜 【初心者向け】
[Bài 08] JSON và làm việc với JSON trong Javascript

Share via
Copy link