ゼロからはじめるJavaScript(18) 可読性と表現力の高いデータ形式「JSONC」を活用しよう

最近、よく目にするデータフォーマットに「JSONC」があります。これはJavaScriptでお馴染みのJSON形式にコメントを記述できるよう拡張したものです。Visual Studio Codeでも採用されており、設定ファイルとして利用されることが増えています。そこで、JSONCの記法やJavaScriptから使う方法を確認してみましょう。

JSONCは可読性の高いデータフォーマット

JSONCとは

「JSONC(JSON with comments)」とはJSONにJavaScriptスタイルのコメントを記述できるようにしたデータフォーマットです。そのため、基本的にデータフォーマットのJSONなのですが、そこにJavaScript風のコメントである「// コメント」と「/* コメント */」を記述できるようにしたものです。

冒頭で紹介したように、プログラミング用のエディタ「Visual Studio Code」の設定ファイルをはじめ、TypeScriptの設定ファイルや、ESLintの設定ファイルなどで使われています。新しいJavaScriptの実行エンジンdenoでは、標準ライブラリにもjsoncが追加されています。このように、いろいろな場面で利用されることが増えています。

Visual Studio Codeの設定ファイル

ちなみに、GitHubに「json-c」というプロジェクトがありますが、これは、C言語でJSONを利用するためのライブラリです。データフォーマットのJSONCとは関係がありません。

JSONCの具体的なデータを見てみよう

例えば、以下は果物の商品データをJSONCで表現したものです。JSONデータにJavaScript風のコメントが入っているのがポイントです。

/**
 * 果物の商品データをJSONCで記述したもの
 * JSONCのサンプル
 */
[
    // マンゴー
    {"名称": "沖縄マンゴー", "値段": 3240, "産地": "沖縄"},
    // ミカン
    {"名称": "愛媛ミカン", "値段": 3200, "産地": "愛媛"},
    // 梨
    {"名称": "鳥取梨", "値段": 4100, "産地": "鳥取"},
]

JSONデータにコメントが書けるに加えて、JSONではリストの末尾の要素にカンマ「,」をつけることはできませんが、JSONCでは問題なく指定できるのもJSONCの便利な点です。

見たままではありますが、上記JSONCの構造を図にすると次のようになります。

上記JSONCデータの構造を図で表したもの

このように、JSONCにはコメントを付けられるので、データに説明をつけることができます。設定ファイルなどで利用すれば、後から人間がエディタで開いて内容を修正できるので便利です。

JSONの復習

それでも「JSONC」は「JSON」にコメントを追加しただけのものです。そのため、最初にJSONフォーマットについて復習しておきましょう。

JSONフォーマットは、昨今さまざまな場面で活用されています。元々はJavaScriptのオブジェクト記法（オブジェクトリテラル）から派生して生まれたデータフォーマットですが、多くのプログラミング言語から利用できるようになりました。インターネット技術の標準化を行うIETFによって発行されているRFC 8259や、JavaScriptの標準仕様を規定しているECMAによって標準化されたECMA-404 2ndなど仕様も厳密に定められています。

とても簡潔に複雑な構造のデータを記述できるのが特徴です。文字列、数値、ヌル(null)、真偽型(true/false)、配列(Array)、オブジェクト(Object)と6種類のデータ型を組み合わせることで構成されます。

その記述能力の高さと、JS/Python/Ruby/PHPなどのスクリプト言語との相性の良さから一気に普及しました。Webアプリでは、サーバーとクライアント間でのデータのやりとりにも活用されています。

ECMAによって標準化されたECMA-404 2nd Editionの仕様書

JSONCの親戚JSON5について

なお、以前よりJSONの欠点として、データの中にコメントを入れることができないという点が指摘されていました。そのため、以前にもJSONを拡張したデータフォーマットが提案されたことがあります。その代表が「JSON5 (JSON for Humans)」です。JSON5もJSONデータ内にコメントが記述できるようにしたものという点で、JSONCとほとんど同じデータフォーマットです。