35
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

知らないうちにJSON5 in Babel

Posted at

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で書いても全く無問題です。

35
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?