Javascript オブジェクトの浅い/深いコピー #JavaScript

Javascript オブジェクトの浅い/深いコピー

概要

Javascript でオブジェクトをコピーしたい場合、Object.assign()メソッドが使えます。Object.assign()メソッドはいわゆる浅いコピーとなっていて、注意が必要です。
浅いコピーで何が問題になるのかを説明します。

浅いコピーの問題点

ゲーム制作を例に取り上げましょう。
出現するモンスターの特徴をJavascript のオブジェクトで管理しているとします。
モンスターの名前はスライム、色は青です。モンスターには武器を複数持たせることができて、今回はダメージが100の剣を装備しています。

const monster = {
  name: "スライム",
  color: "青", 
  weapons:[
    {name:"剣", damage:100}
  ]
}

絵柄を使い回すこともありますので、コピーして闇スライムをつくりましょう。

const monster = {
  name: "スライム",
  color: "青", 
  weapons:[
    {name:"剣", damage:100}
  ]
}
const darkMonster = Object.assign({},monster);
darkMonster.name = "闇スライム";
darkMonster.color = "黒";

console.log(monster);
/*
{
  "name":"スライム",
  "color":"青",
  "weapons":[{"name":"剣","damage":100}]
}
*/
console.log(darkMonster);
/*
{
  "name":"闇スライム",
  "color":"黒",
  "weapons":[{"name":"剣","damage":100}]
}

闇スライムは魔法を使えそうなので、魔法の杖を装備させます。

const monster = {
  name: "スライム",
  color: "青", 
  weapons:[
    {name:"剣", damage:100}
  ]
}
// 浅いコピー
const darkMonster = Object.assign({},monster);
darkMonster.name = "闇スライム";
darkMonster.color = "黒";
darkMonster.weapons[0] = {name:"魔法の杖", damage: 200}; // 追加

console.log(monster);
/*
{
  "name":"スライム",
  "color":"青",
  "weapons":[{name:"魔法の杖", damage: 200};]
}
*/
console.log(darkMonster);
/*
{
  "name":"闇スライム",
  "color":"黒",
  "weapons":[{name:"魔法の杖", damage: 200};]
}

問題発生です！！！
闇スライムの武器を変更したら、つられて通常スライムの武器まで変更されてしまいました。
通常スライムの武器は変更していないにもかかわらず、です。
これはObject.assign()が浅いコピーであることが原因です。
浅いコピーでは、オブジェクトが保有する直接の値しかコピーされません。
nameプロパティ、colorプロパティはそのままコピーされますが、
weaponsプロパティは配列への参照を持っているだけなので、参照がコピーされます。
(weaponsプロパティの値は、結局はスライムも闇スライムも同じ場所を見ることになる)
要するにObject.assing()でのコピーは、オブジェクトの浅い部分までは面倒みるけど、深いところまではいちいちコピーしないからね！ということなのです。

深いコピー

深いコピーをするためにはJSON.stringify() メソッドと、JSON.parse() メソッドを上手く使います。JSON.stringify() は、javasctiptのオブジェクトをJSON文字列に変換するメソッドで、JSON.parse() はその逆です。

const monster = {
  name: "スライム",
  color: "青", 
  weapons:[
    {name:"剣", damage:100}
  ]
}
// 深いコピー
const darkMonster = JSON.parse(JSON.stringify(monster));
darkMonster.name = "闇スライム";
darkMonster.color = "黒";
darkMonster.weapons[0] = {name:"魔法の杖", damage: 200}; // 追加

console.log(monster);
/*
{
  "name":"スライム",
  "color":"青",
  "weapons":[{name:"剣", damage:100};]
}
*/
console.log(darkMonster);
/*
{
  "name":"闇スライム",
  "color":"黒",
  "weapons":[{name:"魔法の杖", damage: 200};]
}

これで上手くいきました！

lodash で深いコピー

lodash は、便利な関数を集めたライブラリです。実際にJavascript のプロジェクトにはよく導入されている気がします。lodash で深いコピーをするには以下のようになります。

// 深いコピー
const darkMonster = _.cloneDeep(monster);

まとめ

Object.assign() は浅いコピー(直接保有の値までしかコピーされない)
深いコピーをするにはJSON.stringify() とJSON.parce() を上手く使う
深いコピーをするにはlodash を使う