diffletはJavaScriptオブジェクトの差分を表示するライブラリです。コンソール上に色分けして表示してくれるのが便利です。

インストールはnpmで行います。

テキストのみ。

こちらが結果。異なる部分のみ抽出されています。

さらに色々なデータを入れています。

こちらが結果。関数やバッファーもチェックできます。

結果をカスタマイズしてみます。

こちらが結果。差分結果をHTMLタグで表示しています。classにgやaが使われています（これは指定可能です）。

表示のカスタマイズもできます。

こちらが結果。結果の表示が異なります（カンマが頭についています）。

diffletを使うとキーは一緒ながら値が異なる部分や、キーがなくなっている、または追加されている部分が色分けして表示されます。青が値の変更された箇所、緑が追加、赤が削除されたキーとなっています。

diffletはJavaScript/node.js製のオープンソース・ソフトウェア（MIT License）です。

MOONGIFTはこう見る

ユーザがコンテンツを作成する、いわゆるCGMが主流になればなるほど、差分表示に対する需要は高まっていくでしょう。テキストの差分がメインではありますが、それ以外にも画像や動画もあります。今回はJavaScriptオブジェクトです。データの差分や類似度といったデータが可視化できると、さらに面白い使い方が見つかるかも知れません。

例えばYouTubeでは違法な動画を見つける際に動画IDと呼ばれるものを使ってマッチしている動画を弾く仕組みをとっています。今後、画像で問題のあるものを排除したりするニーズも出るでしょう。一定のアルゴリズムでやるのも良いですし、問題のある画像とのマッチ度というやり方も考えられるでしょう。

substack/difflet - GitHub