Javascript での日付の操作: new Date() vs Day.js vs Moment.js

目次を読むには、元の投稿 https://devaradise.com/date-in-javascript-dayjs-momentjs/ をチェックしてください

日付と時刻の処理は、JavaScript 開発における一般的なタスクです。 JavaScript のネイティブ Date オブジェクトは日付を操作するためのさまざまなメソッドを提供しますが、Day.js や Moment.js などの外部ライブラリを使用することでワークフローを簡素化し、より堅牢なソリューションを提供できるシナリオもあります。

この記事では、JavaScript のネイティブ Date オブジェクトによって解決できる一般的なケースと、外部ライブラリによって最適に処理されるケースについて説明します。また、ニーズに合った適切なツールを選択できるよう、Day.js と Moment.js を比較します。

ネイティブ JS の日付によって解決できる一般的なケース

ネイティブ JavaScript Date オブジェクトは、日付と時刻を操作するためのさまざまなメソッドを提供します。ネイティブ Date オブジェクトで十分な一般的な使用例をいくつか示します:

1. 日付の作成

const now = new Date(); // Current date and time
const specificDate = new Date('2024-07-16'); // Specific date

2. 日付と時刻のコンポーネントの取得

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // Months are zero-indexed
const day = now.getDate();

const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

3. 日付と時刻のコンポーネントの設定

const now = new Date();

now.setFullYear(2025);
now.setMonth(11); // December
now.setDate(25);

now.setHours(10);
now.setMinutes(11);
now.setSeconds(12);

4. 日付演算

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

5. 日付の書式設定

const now = new Date();
const dateString = now.toDateString(); // Example: 'Tue Jul 16 2024'
const timeString = now.toTimeString(); // Example: '14:12:34 GMT+0200 (Central European Summer Time)'

6. 日付の解析

const parsedDate = new Date(Date.parse('2024-07-16T14:12:34Z'));

7. 日付の比較

const date1 = new Date('2024-07-16');
const date2 = new Date('2024-07-17');
const isSame = date1.getTime() === date2.getTime(); // false
const isBefore = date1.getTime() < date2.getTime(); // true

8. 曜日の取得

const dayOfWeek = now.getDay(); // 0 for Sunday, 1 for Monday, etc.

9. UTC および ISO 文字列への変換

const now = new Date();
const isoDate = now.toISOString(); // 2024-07-22T11:30:59.827Z
const utcDate = now.toUTCString(); // Mon, 22 Jul 2024 11:30:42 GMT

日付の差の計算

const date1 = new Date('2024-01-01');
const date2 = new Date('2024-12-31');
const differenceInTime = date2 - date1;
const differenceInDays = differenceInTime / (1000 * 3600 * 24);
console.log(differenceInDays);

Day.js や Moment.js などの外部ライブラリによって最もよく解決されるケース

ネイティブ Date オブジェクトは基本的な日付操作をカバーしますが、特定のタスクは Day.js や Moment.js などの外部ライブラリによってより効率的に処理されます。これらのライブラリが優れた効果を発揮するいくつかのシナリオを次に示します。

1. 高度な書式設定

// Day.js
const Day.jsDate = Day.js().format('YYYY-MM-DD HH:mm:ss');

// Moment.js
const momentDate = moment().format('YYYY-MM-DD HH:mm:ss');

2. 相対時間

// Day.js
Day.js.extend(relativeTime); // require RelativeTime plugin
Day.js('2024-01-01').from(Day.js('2023-01-01')); // a year ago

// Moment.js
moment('2024-01-01').from(moment('2023-01-01')); // a year ago

3. タイムゾーンの取り扱い

Day.js.extend(utc);
Day.js.extend(timezone);
Day.js('2024-07-16 14:12:34').tz('America/New_York');

// Moment.js with moment-timezone
moment.tz('2024-07-16 14:12:34', 'America/New_York');

4. 国際化 (i18n)

// Day.js
Day.js.locale('fr');
const frenchDate = Day.js().format('LLLL'); // dimanche 15 juillet 2012 11:01

// Moment.js
moment.locale('fr');
const frenchMomentDate = moment().format('LLLL'); // dimanche 15 juillet 2012 11:01

5. 無効な日付の処理

// Day.js
const invalidDay.js = Day.js('invalid date');
if (!invalidDay.js.isValid()) {
    console.log('Invalid date');
}

// Moment.js
const invalidMoment = moment('invalid date');
if (!invalidMoment.isValid()) {
    console.log('Invalid date');
}

6. 複雑な日付形式の解析

// Day.js with customParseFormat plugin
Day.js.extend(customParseFormat);
const complexDate = Day.js('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z');

// Moment.js
const complexMoment = moment('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z');

7. 期間の操作

// Day.js
Day.js.extend(duration);
const durationDay.js = Day.js.duration(5000); // 5 seconds
console.log(durationDay.js.asMinutes()); // 0.083333...
const humanizedDurationDay.js = Day.js.duration(5000).humanize(); // 'a few seconds'

// Moment.js
const durationMoment = moment.duration(5000); // 5 seconds
console.log(durationMoment.asMinutes()); // 0.083333...
const humanizedDurationMoment = moment.duration(5000).humanize(); // 'a few seconds'

Day.js と Moment.js: 詳細な比較

Day.js と Moment.js は、JavaScript での日付操作によく使用される 2 つのライブラリです。どちらも同じ目的を果たしますが、パフォーマンス、機能、使いやすさの点で明確な違いがあります。この比較は、どのライブラリがプロジェクトにより適しているかを判断するのに役立ちます。

Day.js

長所

• 軽量: Day.js のサイズはわずか 2KB で、Moment.js よりも大幅に小さいため、パフォーマンス重視のアプリケーションに最適です。
• 不変: Day.js は不変性を促進します。つまり、すべての操作が新しいインスタンスを返し、日付操作に関連するバグを減らします。
• プラグイン アーキテクチャ: Day.js にはモジュール式のプラグイン システムがあり、必要な機能のみを含めることができます。これにより、バンドルのサイズが最小限に抑えられます。
• 最新の構文: Day.js は最新の JavaScript 構文に従っており、最新のコードベースとの統合が容易になります。
• 互換性: Day.js は、同様の API を備えた Moment.js のドロップイン代替品となるように設計されています。

短所

• 組み込み機能が少ない: Day.js の組み込み機能は、Moment.js と比べて少ないです。高度な機能には追加のプラグインが必要です。
• 限定的なタイムゾーンのサポート: Day.js は包括的なタイムゾーンのサポートのためにサードパーティのプラグインに依存していますが、Moment.js には Moment タイムゾーンがあります。
• 成熟度の低いエコシステム: 新しいライブラリである Day.js は、確立された Moment.js と比較して統合やコミュニティ サポートが少ないです。

モーメント.js

長所

• 豊富な機能: Moment.js は、ほぼすべての日付と時刻の操作タスクに対応する包括的な機能セットを提供します。
• 成熟したエコシステム: Moment.js は 2011 年から存在しており、広範なコミュニティ サポート、プラグイン、統合が行われています。
• タイムゾーンの処理: Moment.js は、Moment Timezone プラグインを使用して堅牢なタイムゾーンのサポートを提供するため、複数のタイムゾーンを処理する必要があるアプリケーションに最適です。
• 詳細なドキュメント: Moment.js には詳細でよく管理されたドキュメントがあり、開発者がヘルプや例を見つけやすくなっています。

短所

• 大きいサイズ: Moment.js は Day.js よりも大幅に大きいため、特にクライアント側アプリケーションのパフォーマンスに影響を与える可能性があります。
• 可変操作: Moment.js 操作は元の日付オブジェクトを変更するため、慎重に管理しないと予期しない動作が発生する可能性があります。
• 非推奨: Moment.js チームはライブラリを非推奨にし、新しいプロジェクトには Day.js などの代替案を推奨しています。

比較表

機能 Day.js Moment.js

Feature	Day.js	Moment.js
Size	~2KB	~70KB
Immutability	Yes	No
Plugin Architecture	Yes	Limited
Feature Set	Basic (extensible via plugins)	Comprehensive
Timezone Support	Limited (via plugins)	Extensive (Moment Timezone)
Ecosystem	Growing	Mature
Documentation	Good	Extensive
Modern Syntax	Yes	No
API Compatibility	Similar to Moment.js	N/A
Status	Actively maintained	Deprecated

サイズ ~2KB ~70KB

不変性

はい いいえ

プラグインのアーキテクチャ

はい 限定

機能セット

基本 (プラグイン経由で拡張可能) 包括的

タイムゾーンのサポート

限定的 (プラグイン経由) 広範囲 (瞬間タイムゾーン)

エコシステム

成長中 成人 ドキュメント 良い 広範囲 最新の構文

はい いいえ

API の互換性

Moment.js に似ています 該当なし ステータス アクティブにメンテナンスされています 非推奨 結論

JavaScript で日付を操作する場合、タスクに適したツールを選択することが重要です。基本的な日付操作タスクにはネイティブ JavaScript Date オブジェクトで十分ですが、より高度な操作の場合は、Day.js や Moment.js などのライブラリが強力で便利な機能を提供します。

Day.js と Moment.js のどちらを選択するかを決定するときは、プロジェクトの具体的なニーズを考慮してください。

モジュール機能を備えた軽量で最新の不変のライブラリが必要な場合は、Day.js を選択してください。これは、すぐに使用できる広範なタイムゾーン処理を必要としない、パフォーマンス重視のアプリケーションやプロジェクトに最適です。 包括的なタイムゾーンのサポートと成熟したエコシステムを備えた機能豊富なライブラリが必要な場合は、Moment.js を選択してください。ただし、Moment.js は非推奨であることに留意してください。新しいプロジェクトの場合は、Day.js のような代替案を検討することをお勧めします。 結局のところ、どちらのライブラリにもそれぞれの長所があり、さまざまな種類のプロジェクトに適しています。プロジェクトの要件を慎重に評価して、情報に基づいた決定を下してください。これらのツールを次のプロジェクトに統合して、JavaScript での日付処理の容易さを体験してください。 コーディングを楽しんでください!

以上がJavascript での日付の操作: new Date() vs Day.js vs Moment.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。