Day.js を使用してアプリケーションで日付と時刻の操作を簡単に処理する

導入

JavaScript での日付と時刻の操作は、特に特定の形式が必要な場合に困難になることがあります。この複雑さにより、アプリケーション内の日付と時刻の不一致が生じることがよくあります。その結果、開発者はこれらの操作を簡単かつ正確に管理するために、Day.js などの外部ツールやライブラリを利用するようになります。

この記事では、Day.js とは何か、その基本機能、プロジェクトでの使用方法、プラグインで機能を拡張する方法、ブラウザのサポートについて説明します。

Day.jsとは何ですか?

Day.js は、使いやすい軽量の JavaScript ライブラリであり、幅広い日付と時刻の操作を処理するように設計されており、Web アプリケーション内で読みやすい形式で表示できるようになります。

このライブラリは、クライアント側 (ブラウザ) 環境とサーバー側 (Node.Js) 環境の両方で使用できます。

現代の Web 開発では、開発者はアプリケーションを構築する際に速度とパフォーマンスを優先しようとします。大規模なインポートとかさばるライブラリ ファイルは、これらの属性の 2 つの一般的な阻害要因です。

幸いなことに、Day.js はわずか 2KB というコンパクトなファイル サイズでこれらの問題に対処しており、アプリケーションのパフォーマンスを損なうことなく日付と時刻の操作を管理するのに理想的な選択肢となっています。

インストール

アプリケーションで Day.js ライブラリの使用を開始するには、まずそれを含める必要があります。

クライアント側でライブラリを使用するには、 に次のスクリプトを含めます。 HTML ドキュメントのタグ。

<script src="path/to/dayjs/dayjs.min.js"></script>

または、jsdeliver CDN などの CDN 経由でライブラリにアクセスできます。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

アプリケーションに依存関係としてライブラリをインストールするには、次のコマンドを実行します。

npm install dayjs

次に、dayjs を JavaScript ファイルにインポートします。

import dayjs from 'dayjs';

新しい Day.js インスタンスを作成するには、dayjs() 関数を呼び出します。引数が渡されない場合は、現在の日付と時刻を表すオブジェクトを返します:

const currentDate = dayjs();

このオブジェクトを参照して、日付と時刻に対してさまざまな操作を実行できます。

Day.js オブジェクトは不変であるため、オブジェクトを変更する操作はすべて、更新された日付と時刻を持つ新しいインスタンスを返します。

ISO 日時形式

日付と時刻を効果的に操作するには、まず ISO とその DateTime 形式文字列について理解する必要があります。

ISO (国際標準化機構) は、さまざまな業界にわたる国際標準を開発および発行し、世界中で一貫性と品質を保証する世界的な非政府組織です。

ISO によって提供される標準の 1 つは、日付と時刻をグローバルに表すための形式です。

一般的な ISO DateTime 形式の文字列は次のようになります:

<script src="path/to/dayjs/dayjs.min.js"></script>

• 日と時間の間の T は、文字列内の日付と時間を区切る区切り文字として機能します。
• 文字列の末尾の Z は Zulu を表し、時間が UTC (協定世界時) であることを示します。

ネイティブ JavaScript Date オブジェクトは、ランダムな日付を ISO 文字列に変換するのに役立つ toISOString() メソッドを提供します。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

ISO DateTime 形式を理解したところで、Day.js ライブラリの主要な機能をいくつか見てみましょう。

Day.js の主な機能を調べる

Day.js ライブラリにはさまざまな機能が付属しており、その一部は日付と時刻の書式設定、解析、操作、クエリ、検証に使用できます。これらの主要な機能をどのように活用できるかを見てみましょう。

解析中

解析機能を使用すると、特定の日付と時刻を指定して新しい Day.js オブジェクトを作成する簡単な方法が提供されます。これは、ネイティブ JavaScript Date オブジェクト、日付文字列、または Unix タイムスタンプを dayjs() 関数に渡すことで実行できます。

npm install dayjs

書式設定

書式設定機能を使用すると、日付と時刻を特定の形式で表示できます。日付と時刻の書式設定を行うには、次のメソッドが使用されます。

• format(): これはフォーマット文字列を受け取り、そのカスタマイズされたフォーマットで日付と時刻を返します。

import dayjs from 'dayjs';

操作する

操作機能を使用すると、さまざまな方法で日付と時刻を調整できます。これは次の方法を使用して実行できます。

• add(number, timeUnit): 指定された時間を日付に加算します。

const currentDate = dayjs();

• subtract(number, timeUnit): 日付から指定された時間を減算します。

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

• startOf(timeUnit): 日付を、日、週、月の始まりなど、特定の時間単位の開始に設定します。

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• endOf(timeUnit): 日付を、日、週、月の終わりなど、特定の時間単位の終わりに設定します。

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

クエリを実行する

クエリ機能を使用すると、日付と時刻を確認および比較できます。これは、ブール値を返す次のメソッドを使用して実行できます。

• isBefore(date): 日付が指定された日付より前かどうかを確認します。

<script src="path/to/dayjs/dayjs.min.js"></script>

• isAfter(date): 日付が指定された日付より後であるかどうかを確認します。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• isSame(date): 日付が指定された日付と同じかどうかを確認します。

npm install dayjs

• isBetween(date1, date2): 日付が指定された 2 つの日付の間にあるかどうかを確認します。

import dayjs from 'dayjs';

• isLeap Year(): 日付の年がうるう年かどうかを確認します。

const currentDate = dayjs();

検証中

検証機能は、提供された日付の形式が有効かどうかを確認する方法を提供します。これは次のメソッドを使用して実行できます:

• isValid(): 日付が正しく解析されたかどうかを示すブール値を返します。

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

プラグインによる機能の拡張

Day.js ライブラリは、基本機能を拡張するために使用できるさまざまな独立したプラグインを提供します。これにより、開発者はアプリケーションでさらに複雑な日付と時刻の書式設定を簡単に実行できるようになります。

プラグインを使用するには、まずプラグインをインクルードし、次に extend() メソッドを使用して dayjs を拡張する必要があります。

• CDN 経由でプラグインを含めるには:

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• プラグインを使用して dayjs を拡張するには:

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

• ES6 構文を使用してプラグインを組み込み、拡張するには:

const formattedDate = dayjs().format("HH:mm:ss DD-MM-YYYY");
console.log(formattedDate); // '19:57:36 17-08-2024'

次に、アプリケーションで利用可能な 2 つのプラグインを使用する方法を見てみましょう。

カレンダープラグイン

カレンダー プラグインは、日付と時刻を人間が読みやすい形式で表示する便利な方法を提供します。イベントリマインダー、プロジェクト管理、タスクプランナーなどのアプリケーションでの使用に最適です。

イベント リマインダー アプリでこのプラグインを使用する方法の簡単な例を見てみましょう。

始めるには、CDN 経由で Day.js ライブラリとカレンダー プラグインを含める必要があります。

const futureDate = dayjs().add(5, 'days'); // Adds 5 days to the current date
console.log(futureDate.format()); // Returns the added date in an ISO date format

次に、JavaScript ファイル内で、カレンダー プラグインを使用して dayjs を拡張し、dayjs() 関数を呼び出して新しい Day.js インスタンスを作成します。

const pastDate = dayjs().subtract(2, 'months');  // Subtracts 2 months from the current date
console.log(pastDate.format()); // Returns the subtracted date in an ISO date format

カレンダー プラグインには、日付と時刻をどのように表示するかをフォーマットするためのカスタマイズ オプションが用意されています。次の正確なプロパティを持つオブジェクトを使用してカスタム形式を定義できます:

const startOfMonth = dayjs().startOf('month'); // Sets the date to the start of the month
console.log(startOfMonth.format()); // Returns the current date from the start of the month in an ISO date format

オブジェクトでは、文字列値内の単語を角かっこ [] で囲んでエスケープします。

このオブジェクトを使用して、イベント リマインダー アプリにイベントの日付と時刻を表示します。

const endOfMonth = dayjs().endOf('month'); // Sets the date to the end of the month
console.log(endOfMonth.format()); // Returns the current date from the end of the month in an ISO date format

この例では、eventDate は今日から数か月先の日付に設定されます。その場合、日付は、customFormat オブジェクトの SameElse プロパティで提供される形式を使用して表示されます。

イベントの日付が最終的に過去の日付 (前の週の日など) になった場合は、次のようになります。

<script src="path/to/dayjs/dayjs.min.js"></script>

日付は、customFormat オブジェクトの lastWeek プロパティで指定された形式を使用して表示されます。

相対時間プラグイン

RelativeTime プラグインは、ユーザー インターフェイスで日付と時刻の差を相対ステートメントとして表示するために一般的に使用される day.js プラグインです。

このプラグインは、過去と未来の時間を表示するための 4 個の異なる API を提供します。

• .from(date, [withoutSuffix]): 呼び出された日付が指定された日付からどれだけ離れているかを説明する相対時間文字列を返します。 withoutSuffix 引数が true の場合、出力から「ago」接尾辞が削除されます。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• .to(date, [withoutSuffix]): 指定された日付が呼び出された日付からどれだけ離れているかを示す相対時間文字列を返します。 withoutSuffix 引数が true の場合、出力から「in」プレフィックスが削除されます。

npm install dayjs

• .fromNow([withoutSuffix]): 呼び出された日付が現在の日付と時刻からどれだけ離れているかを説明する相対時間文字列を返します。 withoutSuffix 引数が true の場合、出力から「ago」接尾辞が削除されます。

import dayjs from 'dayjs';

• .toNow([withoutSuffix]): 現在の日時が呼び出された日付からどれだけ離れているかを示す相対時間文字列を返します。 withoutSuffix 引数が true の場合、出力から「in」プレフィックスが削除されます。

const currentDate = dayjs();

RelativeTime プラグインを使用して、アプリケーションのコメント セクションに投稿されたコメントのタイムスタンプを表示する方法の簡単な例を見てみましょう。

いつものように、最初のステップは、次のように dayjs とrelativeTime プラグインを含めることです。

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

次に、relativeTime プラグインを使用して dayjs を拡張します。

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

その後、コメントが投稿された時刻を現在の時刻と関連付けて表示できます。

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

上記のコードが実行された時点で、commentPostedTime 変数は現在時刻に設定され、その結果、コメントに次の相対時間文字列が出力されました。

ブラウザのサポートと開発者の人気

Day.js ライブラリは、最新のすべての Web ブラウザでサポートされています。 NPM のダウンロード数は 1,900 万 を超え、活発なコミュニティがあります。

このライブラリは、46,000 人を超える github スターと 330 の寄稿者によって積極的に保守されており、常に最新の状態に保たれ、最新の JavaScript 標準との互換性が保たれています。

結論

結論として、Day.js ライブラリを利用してアプリケーションで日付と時刻の操作を処理すると、速度とパフォーマンスが維持されるだけでなく、フォーマットやクエリに簡単に使用できるすぐに使える関数が提供されるため、時間の節約にもなります。 、日付と時刻を操作、解析、検証します。

以上がDay.js を使用してアプリケーションで日付と時刻の操作を簡単に処理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。