導(dǎo)入

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

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

Day.jsとは何ですか?

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

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

現(xiàn)代の Web 開(kāi)発では、開(kāi)発者はアプリケーションを構(gòu)築する際に速度とパフォーマンスを優(yōu)先しようとします。大規(guī)模なインポートとかさばるライブラリ ファイルは、これらの屬性の 2 つの一般的な阻害要因です。

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

インストール

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

クライアント側(cè)でライブラリを使用するには、 に次のスクリプトを含めます。 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>

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

npm install dayjs

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

import dayjs from 'dayjs';

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

const currentDate = dayjs();

このオブジェクトを參照して、日付と時(shí)刻に対してさまざまな操作を?qū)g行できます。

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

ISO 日時(shí)形式

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

ISO (國(guó)際標(biāo)準(zhǔn)化機(jī)構(gòu)) は、さまざまな業(yè)界にわたる國(guó)際標(biāo)準(zhǔn)を開(kāi)発および発行し、世界中で一貫性と品質(zhì)を保証する世界的な非政府組織です。

ISO によって提供される標(biāo)準(zhǔn)の 1 つは、日付と時(shí)刻をグローバルに表すための形式です。

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

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

• 日と時(shí)間の間の T は、文字列內(nèi)の日付と時(shí)間を區(qū)切る?yún)^(qū)切り文字として機(jī)能します。
• 文字列の末尾の Z は Zulu を表し、時(shí)間が UTC (協(xié)定世界時(shí)) であることを示します。

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

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

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

Day.js の主な機(jī)能を調(diào)べる

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

解析中

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

npm install dayjs

書(shū)式設(shè)定

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

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

import dayjs from 'dayjs';

操作する

操作機(jī)能を使用すると、さまざまな方法で日付と時(shí)刻を調(diào)整できます。これは次の方法を使用して実行できます。

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

const currentDate = dayjs();

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

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

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

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

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

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

クエリを?qū)g行する

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

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

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

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

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

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

npm install dayjs

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

import dayjs from 'dayjs';

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

const currentDate = dayjs();

検証中

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

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

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

プラグインによる機(jī)能の拡張

Day.js ライブラリは、基本機(jī)能を拡張するために使用できるさまざまな獨(dú)立したプラグインを提供します。これにより、開(kāi)発者はアプリケーションでさらに複雑な日付と時(shí)刻の書(shū)式設(shè)定を簡(jiǎn)単に実行できるようになります。

プラグインを使用するには、まずプラグインをインクルードし、次に 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 構(gòu)文を使用してプラグインを組み込み、拡張するには:

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

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

カレンダープラグイン

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

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

始めるには、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 ファイル內(nèi)で、カレンダー プラグインを使用して dayjs を拡張し、dayjs() 関數(shù)を呼び出して新しい 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

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

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

オブジェクトでは、文字列値內(nèi)の単語(yǔ)を角かっこ [] で囲んでエスケープします。

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

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 は今日から數(shù)か月先の日付に設(shè)定されます。その場(chǎng)合、日付は、customFormat オブジェクトの SameElse プロパティで提供される形式を使用して表示されます。

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

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

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

相対時(shí)間プラグイン

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

このプラグインは、過(guò)去と未來(lái)の時(shí)間を表示するための 4 個(gè)の異なる API を提供します。

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

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

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

npm install dayjs

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

import dayjs from 'dayjs';

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

const currentDate = dayjs();

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

いつものように、最初のステップは、次のように 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'

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

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

上記のコードが実行された時(shí)點(diǎn)で、commentPostedTime 変數(shù)は現(xiàn)在時(shí)刻に設(shè)定され、その結(jié)果、コメントに次の相対時(shí)間文字列が出力されました。

ブラウザのサポートと開(kāi)発者の人気

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

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

結(jié)論

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

以上がDay.js を使用してアプリケーションで日付と時(shí)刻の操作を簡(jiǎn)単に処理するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。