jsoncフォーマットを読み込む便利ライブラリ

2024年3月23日

Javascript Tool

eyecatch 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" }

1行コメントの書き方

{ // ユニーク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(...)として手軽に使えます。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。