JSON5とは
JSON5とはJSONのスーパーセットでECMAScript 5.1のプロダクションを含むように構文を拡張し、JSONの制限を緩和することを目的としています。
JSON5ではJSONでは使用できなかった以下のようなことができる。
- コメント
- 末尾カンマ
- 改行文字のエスケープ
- 16進数 (0xFF)
- NaNやInfinityなどが入れられる
- シングルクォーテーション( ' )
JSON5のサンプル
{
/*
複数行コメント
キーは引用符を省略できます。
*/
// シングルクォートが使用可能
string: '文字列の\
改行文字をエスケープできる。',
// 16進数が使用可能
num: 0xFF,
// 末尾カンマが使用可能
object: {
"キー": "値",
},
// NaNやInfinityも入れられる
arr: [
NaN,
Infinity,
],
}
JSON5のVS Code拡張機能をインストール
JSON5はVS Codeで書く場合はJSON5 syntaxという拡張機能をインストールすればきれいに表示される。
言語モードをJSONで書こうとするときれいに表示されないので注意。
JavaScriptでJSON5を読み込む方法
JavaScriptのfetchでJSONを読み込む場合は以下のように書くが、JSON5はjson()メソッドで本文の内容を抽出できない。
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
そのためJSON5の場合はtext()でテキストを抽出してnpmかCDNであらかじめJSON5をインストールしておき、これを使用してパースする。
npm i -D json5
// Modules
import JSON5 from 'json5'
// or CommonJS
const JSON5 = require('json5')
<!-- CDN -->
<script src="https://unpkg.com/json5@2/dist/index.min.js"></script>
fetch('sample.json5')
.then(response => response.text())
.then(json5 => JSON5.parse(json5))
.then(data => console.log(data))
jQueryもJSON5.parse()が必要
jQueryでdatasetにjson5を指定してもテキストとして読み込まれるだけなので注意が必要。
jQueryもfetchのときと同様にJSON5.parse()を使用してください。
$.ajax({
url: 'sample.json5',
datatype: 'json5',
}).done(function (data) {
console.log(JSON5.parse(data))
})
