Tips

今日の開発Tips(2025-06-10)

複雑なJavaScriptオブジェクトを簡単に比較したいと思ったことはありませんか? `JSON.stringify` を使うことで、オブジェクトの中身を文字列化し、差分を確認することができます。 このTipsでは、オブジェクトの比較を効率化する方法を紹介します。

オブジェクトの比較:JSON.stringify を活用した効率的な比較

JavaScriptでオブジェクトを比較する場合、===演算子だけでは参照の比較しかできません。オブジェクトの中身が同じでも、参照が異なればfalseが返ってきます。そこで、JSON.stringifyを使ってオブジェクトをJSON文字列に変換し、文字列比較することで、オブジェクトの内容を比較できます。

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(obj1 === obj2); // false (参照が異なるため)
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true (内容が同じため)
console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false (内容が異なるため)

注意点:

  • JSON.stringifyは循環参照を含むオブジェクトには使用できません。エラーが発生します。
  • オブジェクトにDateオブジェクトやRegExpオブジェクトなどのJSONシリアライズできないプロパティが含まれる場合、正しく比較できない場合があります。
  • 比較結果の精度を高めるために、JSON.stringifyのオプション(例えば、ソートされた順番で出力するなど)を調整する必要がある場合もあります。 JSON.stringify(obj, null, 2)のように、インデントを指定することで可読性を高めることができます。

おすすめポイント:

JSON.stringifyを使うことで、デバッグ時にオブジェクトの内容を簡単に確認し、比較することができるため、開発効率が向上します。 特に、APIレスポンスなどの複雑なオブジェクトを扱う際に役立ちます。