Yet Another JSONなJSON5の紹介とそれのjsxバインドを作ったこと

javascript jsx json5

さて、JSON5についての紹介です、みんなjsonを使って色んなリソースを表現すると思いますが、jsonって色々と不便ですよね。

よく挙げられるjsonの不満：

  • ケツカンマが使えない
  • コメントが入れられない
  • keyに必ずquoteが必要

などなど。

この手の話はよくあるんですが、これは仕様で決まってしまっていることなのでどうしようもないです。

この手の話が出る度に色んな解決策があります。jsonじゃなくてyaml使おうとか、csonいいよ、とか、jsonでparseできなかったらevalしてjavascriptオブジェクトにしちゃおうとか。

んで、もう一つの解決策として、JSON5っていうYet AnotherなJSON形式があるわけです。
これ使うと普通のJSONはJSONとしても読み込めるし、上にある、コメントやケツカンマ、ダブルクオートの問題も解決されます。どうしてもコメント入れたい場合やケツカンマを入れたい時は使うのもいいのかな、という紹介です。

// コメントが書ける
{
    // ダブルクオート不要
    foo: 'bar',
    while: true,

    // 複数行の文字列も\で区切って書ける
    this: 'is a \
multi-line string',

    here: 'is another', // インラインコメントも

    /* 
       ブロックコメントも可能
      */

    // 16進数入れたり (内部的に10進数に変換される)
    hex: 0xDEADbeef,
    // 小数点の0を省いたり
    half: .5,
    // 明示的に+-を書いたり
    delta: +10,
    to: Infinity,   // Infinityもいける

    finally: 'a trailing comma',

    // もちろん配列書いたり
    oh: [
        "we shouldn't forget",
        'arrays can have',
        'trailing commas too',  // ケツカンマも対応。
    ], //ここにもケツカンマ、ちなみに日本語もコメントも可
}

使い方は簡単で、npmで入れたりbowerで入れれば後は普通のJSONと同じ。

  // parseする時
  var obj = JSON5.parse(json5);
  // 文字列化する時
  var str = JSON5.stringify(obj);

JSON5のjsxバインド

JSON5のbindingとか簡単にjsxで作れそうなので、一瞬で作ってnpmで公開しました。

GitHub: https://github.com/yosuke-furukawa/json5x
npm : https://www.npmjs.org/package/json5x

使い方
$ npm install json5x
import "json5x/json5.jsx";
class _Main {
     static function main(args:string[]):void {
         var testData = """
// コメントが書ける
{
    // ダブルクオート不要
    foo: 'bar',
    while: true,

    // 複数行の文字列も\で区切って書ける
    this: 'is a \
multi-line string',

    here: 'is another', // インラインコメントも

    /*
       ブロックコメントも可能
      */

    // 16進数入れたり (内部的に10進数に変換される)
    hex: 0xDEADbeef,
    // 小数点の0を省いたり
    half: .5,
    // 明示的に+-を書いたり
    delta: +10,
    to: Infinity,   // Infinityもいける

    finally: 'a trailing comma',

    // もちろん配列書いたり
    oh: [
        "we shouldn't forget",
        'arrays can have',
        'trailing commas too',  // ケツカンマも対応。
    ],
}
         """;
         var testJson = JSON5.parse(testData);
         log testJson;
     }
}

ちなみに、JSXの新しいバージョン(0.9.77)以降ではデフォルトでnode_modules/libの下を検索対象にしてくれるようになったので、命名規則さえ守れば簡単にnpmからモジュールとして使えます。