Jsonデータというのは、JSONフォーマットにコメント(Comment)を付与できる拡張フォーマットです。
最近簡単なホームページでも、jsonファイルで内部の簡単なデータをセットしておくだけで、わざわざデータベースを作成しなくても便利に扱えてしまうので、
さほど数が多くないマスターデータで、セキュリティ的に問題なさそうなデータは、json管理で行うのが便利だと思って使っています。
そして、管理している時に、コメントを残しておきたい場合も多く、Jsoncというフォーマットを知ったので、自分で使いやすいソースを作っておくことにしました。
Jsoncについて理解する
正確には、JSONC(JSON with comments)の略らしいです。
ちなみに、すでにパーサーを作っているモノもあるらしく、以下のリンク(github)で取得できます。
https://github.com/Microsoft/node-jsonc-parser
通常のjsonデータ
{
"id" : 1,
"name" : "hoge",
"memo" : "sample"
}
１行コメントの書き方
{
// ユニークID
"id" : 1,
// 名称
"name" : "hoge",
// 覚書
"memo" : "sample"
}
複数行コメントの書き方
/**
* このjsonファイルの説明書きなどが書き込めます。
* 複数行かけるので、プログラミングチックな扱いも可能です。
*/
{
"id" : 1,
"name" : "hoge",
"memo" : "sample"
}
ファイル拡張子について
通常のJSONデータは、.jsonという拡張子で使いますが、jsoncデータは、.jsoncとするようです。
jsonとして使うと、コメント部分がエラーになるので、拡張子はちゃんと変えたほうがいいかもですね。
でも、お使いのテキストエディタ(IDE)などが、jsoncに対応しているかどうかは微妙なので、プラグインなどで対応している場合は、インストールする必要があります。
ソースコード
export class Jsonc{
constructor(options){
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
if(options.file){
this.load(options.file)
}
else if(options.data){
this.set_jsonc(options.data)
}
})
}
load(filepath){
const xhr = new XMLHttpRequest()
const dt = (+new Date()) // キャッシュ回避
xhr.open("get" , `${filepath}?${dt}` , true)
xhr.setRequestHeader("Content-Type", "text/json")
xhr.onload = this.loaded.bind(this)
xhr.send()
}
loaded(e){
this.set_jsonc(e.target.response)
}
set_jsonc(jsonc){
jsonc = this.convert(jsonc)
this.json = this.parse(jsonc)
this.finish()
}
convert(jsonc){
// 複数行コメントの排除
jsonc = jsonc.replace(/\/\*.*?\*\//gms , '')
// コメント行の排除
jsonc = jsonc.replace(/\/\/.*?$/gm , '')
return jsonc
}
parse(jsonc){
try{
return JSON.parse(jsonc)
}
catch(err){
console.warn(jsonc,err)
return null
}
}
finish(){
this.resolve(this.json)
}
}
使い方
今回作ったソースコードは、module=typeで使ってください。
その中で、クラス読み込みとして手軽に使えます。
読み込み
import { Jsonc } from "./jsonc.js"
ファイル読み込みの場合
new Jsonc({
file : "sample.jsonc"
}).promise.then(json =>{
console.log(json)
})
読み込み済みのjsoncデータを変換する場合
const json = new Jsonc({
data : jsonc_data
}).json
あとがき
非常に簡単なコードで書いたので、改造するのも簡単なハズです。
お好きな感じに編集してお使いください。
あと、ファイル読み込みの場合、sync対応も出来ているので、promise.then(...)として手軽に使えます。
