【JavaScript】オブジェクト・配列をディープコピーする方法｜structuredClone・JSON・再帰コピー・浅いコピーとの違い

// プリミティブは値がコピーされる
let a = 10;
let b = a;
b = 20;
console.log(a); // 10（影響なし）

// オブジェクトは参照が共有される
const original = { count: 1 };
const copy = original;
copy.count = 99;
console.log(original.count); // 99（元まで変わる）

const original = {
  name: "山田",
  profile: { age: 30 }
};

// 浅いコピー（スプレッド構文）
const shallow = { ...original };
shallow.name = "佐藤";        // 外側はOK
shallow.profile.age = 99;     // 内側は共有されている

console.log(original.name);        // 山田（独立している）
console.log(original.profile.age); // 99（一緒に変わってしまった）

const source = { a: 1, nested: { b: 2 } };

// 以下はすべて浅いコピー
const s1 = { ...source };
const s2 = Object.assign({}, source);

const list = [{ id: 1 }, { id: 2 }];
const l1 = [...list];
const l2 = list.slice();
const l3 = Array.from(list);

// 外側は別物だが、nested や各要素は共有されたまま
console.log(s1.nested === source.nested); // true
console.log(l1[0] === list[0]);           // true

const state = {
  user: { name: "山田", tags: ["a", "b"] }
};

// 1段ネストを手動で展開して独立させる
const next = {
  ...state,
  user: {
    ...state.user,
    tags: [...state.user.tags]
  }
};

next.user.tags.push("c");
console.log(state.user.tags); // ["a", "b"]（独立）

const original = {
  name: "山田",
  profile: { age: 30, tags: ["js", "css"] },
  createdAt: new Date("2026-01-01"),
  scores: new Map([["math", 90]])
};

const copy = structuredClone(original);

copy.profile.age = 99;
copy.profile.tags.push("html");

console.log(original.profile.age);   // 30（独立している）
console.log(original.profile.tags);  // ["js", "css"]
console.log(copy.createdAt instanceof Date); // true（Dateのまま）
console.log(copy.scores instanceof Map);     // true（Mapのまま）

const node = { name: "root" };
node.self = node; // 循環参照

const copy = structuredClone(node);

console.log(copy.self === copy);       // true（循環構造を維持）
console.log(copy.self === node);       // false（元とは独立）

// 関数を含むと例外になる
try {
  structuredClone({ run: () => 1 });
} catch (error) {
  console.log(error.name); // DataCloneError
}

// クラスインスタンスはプレーンオブジェクトになる
class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi, ${this.name}`;
  }
}

const copy = structuredClone(new User("山田"));
console.log(copy.name);            // 山田（データは残る）
console.log(copy instanceof User); // false（型は失われる）
console.log(typeof copy.greet);    // undefined（メソッドは消える）

const original = {
  name: "山田",
  profile: { age: 30 }
};

const copy = JSON.parse(JSON.stringify(original));

copy.profile.age = 99;
console.log(original.profile.age); // 30（独立している）

const data = {
  date: new Date("2026-01-01"),
  fn: () => 1,
  undef: undefined,
  num: NaN,
  set: new Set([1, 2]),
  map: new Map([["a", 1]])
};

const copy = JSON.parse(JSON.stringify(data));

console.log(typeof copy.date); // string（Dateが文字列になる）
console.log("fn" in copy);     // false（関数は消える）
console.log("undef" in copy);  // false（undefinedは消える）
console.log(copy.num);         // null（NaNはnullになる）
console.log(copy.set);         // {}（Setは空オブジェクトに）
console.log(copy.map);         // {}（Mapは空オブジェクトに）

function deepClone(value, seen = new WeakMap()) {
  // プリミティブと関数はそのまま返す
  if (value === null || typeof value !== "object") {
    return value;
  }

  // すでにコピー済みなら同じ複製を返す（循環参照・共有参照対策）
  if (seen.has(value)) {
    return seen.get(value);
  }

  // Date は新しい Date を作る
  if (value instanceof Date) {
    return new Date(value.getTime());
  }

  // RegExp はパターンとフラグから作り直す
  if (value instanceof RegExp) {
    return new RegExp(value.source, value.flags);
  }

  // 配列
  if (Array.isArray(value)) {
    const result = [];
    seen.set(value, result);
    for (const item of value) {
      result.push(deepClone(item, seen));
    }
    return result;
  }

  // Map
  if (value instanceof Map) {
    const result = new Map();
    seen.set(value, result);
    for (const [key, val] of value) {
      result.set(deepClone(key, seen), deepClone(val, seen));
    }
    return result;
  }

  // Set
  if (value instanceof Set) {
    const result = new Set();
    seen.set(value, result);
    for (const item of value) {
      result.add(deepClone(item, seen));
    }
    return result;
  }

  // プレーンオブジェクト
  const result = {};
  seen.set(value, result);
  for (const key of Reflect.ownKeys(value)) {
    result[key] = deepClone(value[key], seen);
  }
  return result;
}

const original = {
  name: "山田",
  profile: { age: 30, tags: ["js"] },
  createdAt: new Date("2026-01-01")
};
original.self = original; // 循環参照

const copy = deepClone(original);

copy.profile.tags.push("css");
console.log(original.profile.tags); // ["js"]（独立）
console.log(copy.createdAt instanceof Date); // true
console.log(copy.self === copy);    // true（循環構造を維持）

import cloneDeep from "lodash/cloneDeep";

const copy = cloneDeep(original);