概要

JavaScriptのオブジェクトは単なる「プロパティの集まり」ではない。
それは**“参照による共有とミューテーションによる副作用を同時に孕む、設計上の管理対象”**である。

オブジェクトを扱う上で問題となるのは、ミューテーション（状態変更）の予測不能性と構造の不整合である。
不用意な変更はバグを引き起こし、想定外の振る舞いをもたらす。

本稿では、オブジェクトの構造設計・参照制御・ミューテーション管理の原則とその実践を体系的に解説する。

1. オブジェクトは「参照型」であることを常に意識する

const original = { name: 'Taro' };
const copy = original;

copy.name = 'Jiro';

console.log(original.name); // ❌ 'Jiro'（意図せず変更される）

❌ コピーのつもりで参照を渡している
✅ clone（構造的コピー）かどうかを常に意識

2. 浅いコピー vs 深いコピー：その差異と戦略

// 浅いコピー（shallow copy）
const shallow = { ...original };

// 深いコピー（deep copy）
const deep = JSON.parse(JSON.stringify(original));

✅ 浅いコピーは 一階層のみ複製
✅ 深いコピーは ネスト構造全体を再帰的に複製
❌ 循環参照がある場合、JSON方式は使えない

3. ミューテーションを避ける「不変構造設計」

// ❌ ミューテーションあり
user.age++;

// ✅ 不変設計
const updatedUser = { ...user, age: user.age + 1 };

✅ 状態を「上書きする」のではなく「再生成する」構造
✅ 再現性・テスト容易性・時間的整合性が向上

4. ネストされたオブジェクトの部分更新戦略

const state = {
  profile: {
    name: 'Taro',
    contact: {
      email: 'taro@example.com'
    }
  }
};

// ✅ ネストを破壊せず更新
const updatedState = {
  ...state,
  profile: {
    ...state.profile,
    contact: {
      ...state.profile.contact,
      email: 'jiro@example.com'
    }
  }
};

✅ 状態ツリーの中で変更箇所のみを差し替える
✅ Redux等の状態管理とも親和性が高い構造

5. 参照と比較：構造の等価性と参照の一致を区別する

const a = { x: 1 };
const b = { x: 1 };

console.log(a === b); // ❌ false（参照が異なる）

// 比較のためにはdeepEqual等を使用

✅ === は「参照の一致」のみを判定
✅ オブジェクトの内容を比較する場合はdeepEqual的戦略が必要

設計判断フロー

① 状態は参照で共有されていないか？（予期しない変更の元）

② コピーは必要か？ → 浅いコピーで十分か、深いコピーが必要か？

③ オブジェクトの更新は破壊的に書かれていないか？

④ 差分更新は最小限のスコープで行われているか？

⑤ 比較は参照一致と構造等価性の違いを認識しているか？

よくあるミスと対策

❌ 同じオブジェクトを複数箇所で使い回し、副作用が発生

→ ✅ 必要なときに構造コピー / イミュータブルな構造に置き換える

❌ ネストオブジェクトを直接書き換えて状態整合性を破壊

→ ✅ 変更箇所だけを分離し、上位構造とmergeする

❌ 比較が `a === b` で常に false、バグの温床に

→ ✅ 参照と構造の差異を理解し、適切な比較戦略を選択

結語

JavaScriptのオブジェクトは「柔軟で便利」な反面、
その構造と参照性がバグの温床になりやすい極めて強力なデータ表現である。

ミューテーションは原則禁止
変更は常に「構造を再生成する」設計思想で
オブジェクトは「意味のある構造として設計されるべき」

JavaScriptにおけるオブジェクト設計とは、
“データの構造と状態を安全に保ち、予測可能な変化を支えるための構造戦略”である。