Yaml比較ツールを作った

Programming

サマリー

Yaml比較ツールを作りました

仕組み

Yamlをまずオブジェクト化し、そのオブジェクトをキーでソートします（子の要素についてもソートします） その後オブジェクトを再度Yamlにし、比較します

構成

Vue.js + 一部JQuery(差分表示のdiff2htmlのため) Yamlのソートや差分の表示など、すべての処理をブラウザ上で行います。バックエンドでは何も処理を行っていません。 ホスティングはおなじみNetlify

これをつくったきっかけ

API Gatewayを使っているのですが、コンソールからエクスポートできるAPI GatewayのSwagger定義ファイルが、 エクスポートするタイミングによってキーや値の位置がずれているのです。 そのため、API Gateway更新後にSwaggerファイルで差分を確認しようとしても、 単純にdiffを取るだけだと関係ない箇所で大量に差分が出てきてしまい、面倒でした。

このツールでは、キーをソートしてから差分を見るため、内容が同じならば差分は出てこないようになっています。