TypeScriptでオブジェクトと配列を安全かつ効率的にコピーする方法：深いコピー、浅いコピー、そしてパフォーマンスまで徹底解説

TypeScriptで開発を行う際、オブジェクトや配列のコピーは頻繁に行う処理の一つです。しかし、JavaScriptのコピーの仕組みは一見単純に見えて、実は奥が深いものがあります。浅いコピーと深いコピーの違いを理解せずに実装すると、意図しないバグを生み出す原因になりかねません。

この記事では、TypeScriptにおけるオブジェクトと配列のコピーについて、以下のポイントを徹底的に解説します。

• 浅いコピー（Shallow Copy）と深いコピー（Deep Copy）の違い: なぜコピーの種類を意識する必要があるのか？
• TypeScriptでオブジェクトと配列をコピーする様々な方法: スプレッド構文、Object.assign()、JSON.parse(JSON.stringify())、ライブラリの利用など、それぞれのメリット・デメリット
• パフォーマンス: 大量のデータを扱う場合の効率的なコピー方法
• コピー時の注意点: 型情報、循環参照、関数などの特殊なデータの扱い
• 具体的なコード例: 実践的なコピーのテクニックをTypeScriptのコードで解説

この記事を読めば、TypeScriptにおけるオブジェクトと配列のコピーに関するあらゆる疑問が解消され、より安全で効率的なコードを書けるようになるでしょう。

なぜオブジェクトと配列のコピーが重要なのか？

JavaScript（そしてTypeScript）において、オブジェクトと配列は参照型のデータです。これは、変数にオブジェクトや配列を代入する際、その実体（データ）がコピーされるのではなく、その実体が格納されているメモリ上のアドレス（参照）がコピーされることを意味します。

const originalObject = { name: "太郎", age: 30 };
const copiedObject = originalObject; // コピーしたつもり

copiedObject.age = 35;

console.log(originalObject.age); // 35  <- originalObjectまで変更されてしまった！

この例では、copiedObjectのageを変更しただけなのに、元のoriginalObjectのageまで変更されてしまいました。これは、copiedObjectとoriginalObjectが同じメモリ上のアドレスを参照しているためです。つまり、copiedObjectを通してoriginalObjectの実体を直接変更してしまったのです。

このような事態を避けるためには、オブジェクトや配列をコピーする際に、元のデータとは異なる新しいメモリ領域にデータを複製する必要があります。これが、浅いコピーや深いコピーと呼ばれる技術です。

浅いコピー（Shallow Copy）とは？

浅いコピーは、オブジェクトや配列の最上位のプロパティのみをコピーする方法です。つまり、オブジェクトの中にさらにオブジェクトや配列が含まれている場合、それらはコピーされず、元のオブジェクトへの参照がコピーされます。

const originalObject = {
  name: "太郎",
  address: {
    prefecture: "東京都",
    city: "新宿区",
  },
};

const copiedObject = { ...originalObject }; // スプレッド構文で浅いコピー

copiedObject.name = "次郎";
copiedObject.address.city = "渋谷区";

console.log(originalObject.name); // 太郎  <- 最上位のプロパティはコピーされた
console.log(originalObject.address.city); // 渋谷区  <- addressオブジェクトは参照がコピーされたため、変更が反映される

この例では、copiedObjectのnameを変更してもoriginalObjectには影響しませんが、address.cityを変更するとoriginalObjectにも影響が出てしまいます。これは、addressプロパティがオブジェクトへの参照を保持しており、浅いコピーではその参照だけがコピーされるためです。

浅いコピーの方法

TypeScript（JavaScript）で浅いコピーを行うには、主に以下の方法があります。

• スプレッド構文（...）: 最も簡潔で一般的な方法です。

  const copiedObject = { ...originalObject };
  const copiedArray = [...originalArray];
  

• Object.assign(): オブジェクトをコピーする際に利用できます。

  const copiedObject = Object.assign({}, originalObject);
  

• Array.prototype.slice(): 配列をコピーする際に利用できます。

  const copiedArray = originalArray.slice();
  

浅いコピーのメリット・デメリット

メリット:

• 高速: 比較的短い時間でコピーできます。
• シンプル: コードが簡潔で理解しやすい。

デメリット:

• ネストされたオブジェクトや配列は参照がコピーされる: 意図しないデータの変更が発生する可能性がある。
• 深いコピーが必要な場合には不向き: ネストされた構造を持つデータのコピーには適さない。

深いコピー（Deep Copy）とは？

深いコピーは、オブジェクトや配列に含まれるすべてのプロパティを、再帰的に新しいメモリ領域にコピーする方法です。つまり、ネストされたオブジェクトや配列も、元のデータとは完全に独立した状態で複製されます。

const originalObject = {
  name: "太郎",
  address: {
    prefecture: "東京都",
    city: "新宿区",
  },
};

// JSON.parse(JSON.stringify())で深いコピー（簡易的な方法）
const copiedObject = JSON.parse(JSON.stringify(originalObject));

copiedObject.name = "次郎";
copiedObject.address.city = "渋谷区";

console.log(originalObject.name); // 太郎  <- 変更されない
console.log(originalObject.address.city); // 新宿区  <- 変更されない

この例では、copiedObjectのnameとaddress.cityのどちらを変更しても、originalObjectには影響が出ません。これは、addressオブジェクトを含むすべてのデータが新しいメモリ領域にコピーされたためです。

深いコピーの方法

TypeScript（JavaScript）で深いコピーを行うには、主に以下の方法があります。

• JSON.parse(JSON.stringify()): 最も手軽な方法ですが、いくつか制限があります。

  const copiedObject = JSON.parse(JSON.stringify(originalObject));
  

• 再帰的な関数: 複雑なオブジェクトや配列に対応できますが、実装がやや複雑になります。
• ライブラリの利用: Lodashの_.cloneDeep()や、immerなどが利用できます。

深いコピーのメリット・デメリット

メリット:

• 完全に独立したコピー: 元のデータへの影響を気にせずにデータを変更できる。
• 複雑なオブジェクトや配列に対応可能: ネストされた構造を持つデータのコピーに適している。

デメリット:

• 遅い: 浅いコピーに比べて時間がかかる。特に、大規模なデータを扱う場合はパフォーマンスに注意が必要。
• JSON.parse(JSON.stringify())には制限がある: 関数、循環参照、Dateオブジェクト、undefinedなどを正しくコピーできない。
• 再帰的な関数は実装が複雑になる: エラー処理やパフォーマンスを考慮する必要がある。

JSON.parse(JSON.stringify())の制限について

JSON.parse(JSON.stringify())は、手軽に深いコピーを実現できる便利な方法ですが、いくつかの制限があります。

• 関数: 関数はコピーされず、undefinedになります。
• 循環参照: 循環参照がある場合、エラーが発生します。
• Dateオブジェクト: Dateオブジェクトは文字列に変換されてしまいます。
• undefined: undefinedはコピーされず、削除されます。
• 正規表現: 正規表現は空のオブジェクト {} に変換されます。

これらの制限を考慮し、コピー対象のデータ構造によっては、他の方法を選択する必要があります。

再帰的な関数による深いコピーの実装例

function deepCopy<T>(obj: T): T {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  const copiedObj: any = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copiedObj[key] = deepCopy(obj[key]);
    }
  }

  return copiedObj as T;
}

const originalObject = {
  name: "太郎",
  address: {
    prefecture: "東京都",
    city: "新宿区",
  },
  hobbies: ["読書", "映画鑑賞"],
  birthday: new Date(1993, 0, 1) // Dateオブジェクト
};

const copiedObject = deepCopy(originalObject);

copiedObject.address.city = "渋谷区";
copiedObject.hobbies.push("旅行");
copiedObject.birthday.setFullYear(1995);

console.log(originalObject.address.city); // 新宿区
console.log(originalObject.hobbies); // [ '読書', '映画鑑賞' ]
console.log(originalObject.birthday.getFullYear()); // 1993

この例では、再帰的な関数deepCopyを使って、オブジェクトのすべてのプロパティを再帰的にコピーしています。Dateオブジェクトも正しくコピーされていることが確認できます。

ライブラリの利用

より複雑なデータ構造や特殊な要件に対応するために、ライブラリを利用することも有効です。

• Lodash: _.cloneDeep()メソッドを使うと、簡単に深いコピーができます。循環参照にも対応しています。
• Immer: イミュータブルなデータ構造を効率的に扱うためのライブラリです。オブジェクトの一部分だけを変更しても、元のオブジェクトは変更されません。

パフォーマンス

大量のデータをコピーする場合、パフォーマンスは重要な考慮事項です。

• 浅いコピーは高速: 浅いコピーは参照のコピーのみを行うため、高速に処理できます。
• 深いコピーは低速: 深いコピーはすべてのデータを複製するため、時間がかかります。特に、JSON.parse(JSON.stringify())は、JSONへのシリアライズとパースを行うため、他の方法に比べて遅くなる傾向があります。
• 大規模な配列のコピー: 大規模な配列をコピーする場合、Array.prototype.slice()よりも、ループ処理を使って要素を一つずつコピーする方が高速な場合があります。

パフォーマンスを最適化するためには、コピー対象のデータ構造やサイズ、そして要件に応じて、適切なコピー方法を選択する必要があります。

コピー時の注意点

• 型情報: TypeScriptでは、オブジェクトの型情報を保持したままコピーすることが重要です。asキーワードを使って型アサーションを行うことで、型情報を維持できます。
• 循環参照: 循環参照があるオブジェクトをコピーする場合、JSON.parse(JSON.stringify())は使用できません。再帰的な関数やライブラリを利用する必要があります。
• 関数: 関数はコピーできないため、特別な処理が必要です。関数自体をコピーするのではなく、関数を実行するための情報をコピーする方法もあります。
• プロトタイプチェーン: プロトタイプチェーンはコピーされません。コピー後のオブジェクトは、元のオブジェクトとは異なるプロトタイプを持ちます。

まとめ

TypeScriptにおけるオブジェクトと配列のコピーは、一見単純に見えて、実は奥が深いものです。浅いコピーと深いコピーの違いを理解し、コピー対象のデータ構造や要件に応じて、適切な方法を選択することが重要です。

この記事で解説した内容を参考に、より安全で効率的なTypeScriptコードを記述し、意図しないバグを未然に防ぎましょう。

この記事で紹介したコピー方法のまとめ:

この情報が、あなたのTypeScript開発の一助となれば幸いです。