昨日行き詰まっていたところでどうしようか考えて、結局はjkr2255/sorted-json-stringifyなんてものを作ってしまいました。

オブジェクトの管理に依存せず並べ替える

突然ですが、JSON.stringify({'30': 'a', '5': 'b'})はどうなると思いますか？多くのブラウザでは、'{"5":"b","30":"a"}'という結果となります。実際、他の値を入れてみた感触でも、数値キーに関しては別枠でハンドリングしているような、妙な挙動を示しました。

実際にこのようなブラックボックスに遭遇してしまった以上、デフォルトのJSON.stringifyでは、順番がどうなるかなんてわかりません。とはいえ、JSON.stringify全部を再実装するのも面倒だし、出来上がったJSONのパースも色々考えると複雑そうだし…みたいなことを考えていました。

`JSON.stringify`の仕様を見ていて

そんな中でMDNを見ていると、JSON.stringifyには3つの引数があると書いてありました。

replacer…ルールに従ってオブジェクトを置き換える
space…見栄えをよくするために、JSONにスペースを挿入する

つまり、spaceでインデントをかけた上で、そのインデントを数える、という手法を取れば、改めて大掛かりにパースしなくてもJSONの入れ子構造を抽出できるということがわかりました。

実際に作ってみた

ということで、

space = 1で、デフォルトのJSON.stringifyを使って、改行＆インデントありのJSONを生成する
行ごとに区切って、インデントのスペースの数を数えておく
インデント位置で構造を把握しつつ、JSONを並べ替えていく
最後にインデントなどを調整して、最終型のJSONを作る

このような流れで実装することができました。なお、ハマった箇所としては、space=0のときは"foo":"bar"のようにキーと値が密着するのに対して、spaceが入る場合には"foo": "bar"とスペースが1つ入る、となっていて、そこの差で一度コケました。

なお、今回これを作るのにあたって、Mocha、Chai、Rollupと言ったライブラリをはじめて使ってみました。