JSON5とは
JSON5とはJSONのスーパーセットでECMAScript 5.1のプロダクションを含むように構文を拡張し、JSONの制限を緩和することを目的としています。
JSON5ではJSONでは使用できなかった以下のようなことができる。
- コメント
- 末尾カンマ
- 改行文字のエスケープ
- 16進数 (0xFF)
- NaNやInfinityなどが入れられる
- シングルクォーテーション( ' )
JSON5のサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { /* 複数行コメント キーは引用符を省略できます。 */ // シングルクォートが使用可能 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()メソッドで本文の内容を抽出できない。
1 2 3 | .then(response => response.json()) .then(json => console.log(json)) |
そのためJSON5の場合はtext()でテキストを抽出してnpmかCDNであらかじめJSON5をインストールしておき、これを使用してパースする。
npm i -D json5
1 2 3 4 5 | // Modulesimport JSON5 from 'json5' // or CommonJSconst JSON5 = require('json5') |
1 2 | <!-- CDN --> |
1 2 3 4 | 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()を使用してください。
1 2 3 4 5 6 | $.ajax({ url: 'sample.json5', datatype: 'json5',}).done(function (data) { console.log(JSON5.parse(data))}) |
