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

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

  • マイナビニュース
  • 更新日:2022/08/06
No image

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

JSも便利なGoogle ColabをPDF生成ツールとして使ってみよう!

○JSONCとは

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

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

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

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

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

JSONデータにコメントが書けるに加えて、JSONではリストの末尾の要素にカンマ「,」をつけることはできませんが、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アプリでは、サーバーとクライアント間でのデータのやりとりにも活用されています。

○JSONCの親戚JSON5について

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

○JSONCを扱うライブラリ

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

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

npm install jsonc-parser

.

クジラ飛行机

この記事をお届けした
グノシーの最新ニュース情報を、

でも最新ニュース情報をお届けしています。
  • このエントリーをはてなブックマークに追加