Help us understand the problem. What is going on with this article?

知らないうちにJSON5 in Babel

More than 1 year has passed since last update.

JSONは身近なフォーマットですが、手で書こうとすれば案外に書きにくいものです。実は、そういった問題をクリアするような「JSON5」というフォーマットがあって、しかも多くの人が利用可能な環境にあったりもします。

JSONの書きにくさ

JSONはJavaScriptのオブジェクトリテラルから派生したものですが、データ交換用のフォーマットという性格もあってか、JavaScriptと比べて制約もあります。

  • オブジェクトのキーは二重引用符で括る必要がある(一重引用符や、何も書かないのは禁止)
  • 文字列も二重引用符で括る必要がある(一重引用符は禁止)
  • ケツカンマ禁止
  • コメントは入れられない

うっかりしていてJSONとしてInvalidなものを作ってしまうことも多いし、設定ファイルにコメントを付けられないのもストレスの一因になったりします。

拡張した、JSON5

そんなJSONの使いにくさへの解決策として、ES5.1のオブジェクトリテラルに沿ってJSONを拡張したものがJSON5です。JSON5では、以下のような拡張が入っています。

  • オブジェクト
    • キーは一重引用符でも、識別子として使えるものならOK
    • ケツカンマOK
  • 配列
    • ケツカンマOK
  • 文字列
    • 一重引用符もOK
    • 文字列の途中で(バックスラッシュでエスケープすれば)改行OK
    • \x0fのようなエスケープシーケンスを使える
  • 数値
    • 0xabcdのような16進法でもOK
    • 16..23のような、小数点前後の片方だけ書くのもOK
    • +12のようなプラス記号も使える
    • InfinityNaNも値として受け付ける
  • コメント
    • /* ... */あるいは// (このあと行末まで)といったコメントを使える

なお、文法は純粋に拡張なので、通常のJSONを書いても、JSON5パーサーで問題なく処理可能です。

サイトにあった例を引用
{
  /*
    注: JSON5のシンタックスハイライトがないことと、
    JSONでかけるとInvalidになってしまうので、あえて指定なしにしています。
  */
  unquoted: 'and you can quote me on that',
  singleQuotes: 'I can use "double quotes" here',
  lineBreaks: "Look, Mom! \
No \\n's!",
  hexadecimal: 0xdecaf,
  leadingDecimalPoint: .8675309, andTrailing: 8675309.,
  positiveSign: +1,
  trailingComma: 'in objects', andIn: ['arrays',],
  "backwardsCompatible": "with JSON",
}

身近にあった実用例

ふつうのJSONであれば、JavaScriptにJSON.parseが組み込まれていますので、何も用意しなくても処理できます。一方で、(evalという禁断の技を使うのでなければ)JSON5のパーサーは標準で存在しないので、npmから入れる必要があります。

…ただ、多くの人のnode_modulesに、すでにjson5は存在しているかと思います。実は、babelがjson5に依存しているのです。

.babelrcなどはJSONで書く、と考えている人が多いかと思いますが、実はそうではなくてJSON5として解釈されています。なので、.babelrcでもコメントや一重引用符などの、JSON5の拡張構文を利用可能です(エディタなどが未対応で波線が出たりするかもしれませんが)。もちろん、ふつうのJSONで書いても全く無問題です。

jkr_2255
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした