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

JSONCとは、JSONフォーマットにコメント記述などができる、少し便利に扱えるデータファイルフォーマットです。参考: 可読性と表現力の高いデータ形式「JSONC」を活用しようライブラリなどもいくつか存在するが、JavascriptのAjax読み込みをして、JSONパースを行う過程で対応できる簡単コードを作ったので、掲載しておく。

ソースコード

jsonc.js

export class Jsonc{
  constructor(jsonc){
    jsonc = this.convert(jsonc)
    this.jsonc = jsonc
    this.json = this.parse(jsonc)
  }
  convert(jsonc){
		// 複数行コメントの排除
		jsonc = jsonc.replace(/\/\*.*?\*\//gms , '')

		// コメント行の排除
    jsonc = jsonc.replace(/\/\/.*?$/gm , '')
    
    return jsonc
  }

  parse(jsonc){
    try{
      return JSON.parse(jsonc)
    }
    catch(err){
      console.warn(this.jsonc,err)
			return null
    }
  }
}

使い方

scriptタグをtype="module"で読み込んでいかのコードで使ってみてください。

import { Jsonc } from "./jsonc.js"

class Main{
	constructor(){
		const xhr = new XMLHttpRequest()
		xhr.withCredentials = true;
		xhr.open('GET' , 'test.json' , true)
		xhr.setRequestHeader("Content-Type", "text/json");
		xhr.onload = this.loaded.bind(this)
		xhr.send()
	}

	loaded(e){
		const json = e.target.response
		const jsonc = new Jsonc(json)
		console.log(jsonc.json)
	}

	json_parse(str){
		try{
			return JSON.parse(str)
		}
		catch(err){
			console.warn(err)
			return null
		}
	}
}

test.json

/**
 * JSONC読み込みテスト
 */
{
	// test
	"name":"sample",

	// list
	"list":[
		1,2,3,4,5,6,7,8,9,10
	]
}

あとがき

思う存分コメントを書いて、管理を便利なjsonデータで扱っていきましょう。