【徹底解説】JavaScriptにおけるDateオブジェクトの複製方法：用途に合わせた最適な方法とは？

JavaScript で Date オブジェクトを複製する方法

シャローコピーは、Date オブジェクトの参照を複製する方法です。つまり、元のオブジェクトと新しいオブジェクトは同じデータ構造を指し示します。元のオブジェクトの値を変更すると、新しいオブジェクトの値も変更されます。

シャローコピーを作成するには、次のいずれかの方法を使用できます。

• スプレッド構文

const originalDate = new Date();
const shallowCopy = { ...originalDate };

• Object.assign

const originalDate = new Date();
const shallowCopy = Object.assign({}, originalDate);

ディープコピーを作成するには、次のようなライブラリを使用する必要があります。

• lodash

const originalDate = new Date();
const deepCopy = _.cloneDeep(originalDate);

• structured-clone

const originalDate = new Date();
const deepCopy = structuredClone(originalDate);

どちらのコピー方法を使用するべきですか？

• シャローコピー は、元のオブジェクトと同じデータ構造を共有する必要がある場合に適しています。パフォーマンスも速くなります。
• ディープコピー は、元のオブジェクトとは独立したデータ構造が必要な場合や、元のオブジェクトの値を変更しても新しいオブジェクトに影響を与えたくない場合に適しています。

補足

• Date オブジェクトは、不変オブジェクトではありません。つまり、その値を変更できます。
• JavaScript では、プリミティブ型（number、string、boolean など）は値のコピーが自動的に行われます。オブジェクトの場合は、シャローコピーまたはディープコピーを行う必要があります。

JavaScript で Date オブジェクトを複製する方法：サンプルコード

シャローコピー

const originalDate = new Date();
console.log(originalDate); // 2024-05-16T03:14:00.000Z

const shallowCopy = originalDate;
console.log(shallowCopy); // 2024-05-16T03:14:00.000Z

originalDate.setDate(10);
console.log(originalDate); // 2024-05-10T03:14:00.000Z
console.log(shallowCopy); // 2024-05-10T03:14:00.000Z

ディープコピー

const originalDate = new Date();
console.log(originalDate); // 2024-05-16T03:14:00.000Z

const deepCopy = JSON.parse(JSON.stringify(originalDate));
console.log(deepCopy); // 2024-05-16T03:14:00.000Z

originalDate.setDate(10);
console.log(originalDate); // 2024-05-10T03:14:00.000Z
console.log(deepCopy); // 2024-05-16T03:14:00.000Z

説明

• originalDate は新しい Date オブジェクトです。
• shallowCopy は originalDate への参照を保持する新しい変数です。これはシャローコピーです。
• originalDate.setDate(10) は、originalDate の日付を 10 日に設定します。
• シャローコピーである shallowCopy の値も変更されます。これは、shallowCopy と originalDate が同じオブジェクトを参照しているためです。
• deepCopy は JSON.stringify を使用して originalDate を JSON 文字列に変換し、次に JSON.parse を使用してその文字列を新しい Date オブジェクトに変換します。これはディープコピーです。
• ディープコピーである deepCopy の値は変更されません。これは、deepCopy は originalDate とは独立した新しいオブジェクトであるためです。

この例は、シャローコピーとディープコピーの動作の違いを示しています。状況に応じて適切なコピー方法を選択することが重要です。

JavaScript で Date オブジェクトを複製するその他の方法

structured-clone は、JavaScript の新しい機能であり、オブジェクトのディープコピーを作成するためのネイティブな方法を提供します。これは、lodash や JSON.stringify と JSON.parse を使用するよりもパフォーマンスが優れている可能性があります。

const originalDate = new Date();
const deepCopy = structuredClone(originalDate);

手動で再構築する

単純な Date オブジェクトの場合は、新しい Date オブジェクトを作成し、元のオブジェクトのプロパティを手動でコピーすることで、ディープコピーを作成することができます。

const originalDate = new Date();
const deepCopy = new Date(
  originalDate.getFullYear(),
  originalDate.getMonth(),
  originalDate.getDate(),
  originalDate.getHours(),
  originalDate.getMinutes(),
  originalDate.getSeconds(),
  originalDate.getMilliseconds()
);

ライブラリを使用する

lodash や underscore などのライブラリには、オブジェクトのディープコピーを作成するためのユーティリティ関数が含まれています。

const originalDate = new Date();
const deepCopy = _.cloneDeep(originalDate); // lodashを使用する場合

最適な方法を選択する

使用する最適な方法は、ニーズと状況によって異なります。

• パフォーマンスが重要 な場合は、structured-clone または手動での再構築を使用するのが最善です。
• コードの簡潔性 が重要の場合は、Object.assign またはスプレッド構文を使用するのが最善です。
• ライブラリ を既に使用している場合は、そのライブラリのユーティリティ関数を使用するのが最善です。

JavaScript で Date オブジェクトを複製するには、さまざまな方法があります。それぞれの方法には長所と短所があるため、ニーズと状況に応じて最適な方法を選択することが重要です。