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

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

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

JSONCとは

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

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

  • Visual Studio Codeの設定ファイル

    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データの構造を図で表したもの

このように、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の仕様書

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

JSONCの親戚JSON5について

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

  • JSON5のWebサイト

    JSON5のWebサイト

JSONCを扱うライブラリ

それでは、実際にJSONCをJavaScriptで読み込んでみましょう。Visual Studio Codeの設定ファイルで利用できるようになっている事から想像できるかもしれませんが、マイクロソフトがオープンソースで、JSONCを読み書きするライブラリを公開しています。

  • マイクロソフトによるJSONCパーサーのGitHub

    マイクロソフトによるJSONCパーサーのGitHub

ここでは、JavaScriptの実行エンジンにNode.jsを使うものとします。JSONCパーサをインストールするには、ターミナル(WindowsならPowerShell)を開いて、次のようなコマンドを実行します。

npm install jsonc-parser

先ほど紹介した果物の商品データのJSONCを「fruits.jsonc」という名前で保存しましょう。こちらにアップロードしてあるのでご利用ください。

そして、次のようなプログラムを記述します。以下のプログラムを「test_jsonc.mjs」という名前で保存しましょう。

import { parse } from 'jsonc-parser'
import fs from 'fs'

// ファイルからJSONCを読み込む --- (*1)
const jsoncStr = fs.readFileSync('fruits.jsonc').toString()
// JSONCのデータを表示
console.log('--- 元データ:JSONC ---')
console.log(jsoncStr)

// 文字列をJSONCとしてパース --- (*2)
const data = parse(jsoncStr)
// 結果を出力
console.log('--- パース後 --- ')
console.log(data)
// データの一部を取り出して表示
console.log(data[0]['名称'])

プログラムを確認してみましょう。(＊1)でファイルからJSONCのデータを取り出します。そして、(＊2)の部分でJSONCをパースします。ライブラリを取り込んで、parseメソッドを呼ぶだけなので簡単です。

さて、プログラムを実行するには、ターミナル上で次のようにコマンドを実行します。

node test_jsonc.mjs

実行すると、次のように表示されます。

  • 実行したところ

    実行したところ

まとめ

以上、今回はJSONCのデータフォーマットについて、またJSONCファイルをライブラリ「jsonc-parser」を利用して読み込む方法を紹介しました。JSONCはJSONのメリットである表現力の高さに加えて、可読性やメンテナンス性にも配慮した「JSONC」は便利なデータフォーマットです。

今のところ、JSONCは標準化されたものではないのですが、JSONにJavaScript風コメントを付けただけのシンプルなものであるため利用に際して悩むことはないでしょう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。