TL;DR
このページでは、Date() コンストラクターの活用法について解説しますね。一言でいうとDate()コンストラクターとは、JavaScript で日付や時間を扱うためのオブジェクトを生成するためのものです。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.4 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
Date() コンストラクターとは？
JavaScript のDate()コンストラクターは、日付や時間を扱うための Date オブジェクトを生成します。Date オブジェクトは、1970 年 1 月 1 日 00:00:00 UTC（協定世界時）からのミリ秒単位での経過時間を表します。
具体的な使用方法は以下の通りです。
// 現在の日時を取得する
const now = new Date()
console.log(now) // 現在の日付と時間が表示されます
// 特定の日時を設定する
const specificDate = new Date('2023-06-29T12:00:00')
console.log(specificDate) // '2023-06-29T12:00:00'の日時が表示されます
このように、new Date()をそのまま使用すると現在の日付と時間を取得でき、引数に特定の日時を指定するとその日時の Date オブジェクトが生成されます。
また、Date オブジェクトには様々なメソッドが用意されており、年や月、日、時間、分、秒を個別に取得したり設定したりすることも可能です。
const now = new Date()
// 年を取得する
const year = now.getFullYear()
console.log(year) // 現在の年が表示されます
// 月を取得する（0〜11で表され、0が1月、11が12月）
const month = now.getMonth()
console.log(month) // 現在の月が表示されます
以上が、Date()コンストラクターの基本的な使い方となります。
現在の日付を表示する
それでは、Next.js のアプリケーションで Date() コンストラクターを活用してみましょう。具体的には、現在の日付を表示するコンポーネントを作成します。
ソースコードのファイル名: /components/ShowDate.tsx
import { useEffect, useState } from 'react'
type Props = {
locale?: string
}
const ShowDate = ({ locale = 'ja-JP' }: Props) => {
const [date, setDate] = useState(new Date())
useEffect(() => {
const timer = setInterval(() => {
setDate(new Date())
}, 1000)
return () => {
clearInterval(timer)
}
}, [])
return <div>現在の日時: {date.toLocaleString(locale)}</div>
}
export default ShowDate
このコンポーネントでは、React のuseStateとuseEffectフックを使って、現在の日時を管理しています。
useState フックで日付を管理するための state（date）を作成し、初期値として現在の日時（new Date()）を設定しています。そして、useEffect フックを使って 1 秒ごとにsetDate関数を呼び出し、dateの値を更新しています。
表示する部分では、date.toLocaleString(locale)を使って日時を文字列に変換しています。toLocaleStringメソッドは、Date オブジェクトの日時を指定されたロケールに基づいてフォーマットした文字列を返します。ここではプロパティで受け取ったロケール（デフォルトは'ja-JP'）を指定しています。
コンポーネント ShowDate では、現在の日付と時間が毎秒更新されて表示されます。このコンポーネントを日本語環境で使用すると、出力は次のようになります（実際の日付と時間によります）。
現在の日時: 2023年6月29日 12:00:00次の 1 秒後、結果は以下のように更新されます。
現在の日時: 2023年6月29日 12:00:01そして、それが続けて表示されます。
toLocaleDateString()
toLocaleDateString() は、JavaScript の Date オブジェクトのメソッドで、その日付を文字列として表現します。このメソッドは、ホスト環境の地域設定（ロケール）を使用して日付を書式化します。
このメソッドは、引数をとることもできます。最初の引数には、特定の地域設定を表す文字列（例えば "en-US" や "ja-JP" など）を指定できます。二つ目の引数には、日付の書式を制御するオプションのオブジェクトを指定できます。
以下に一部の使用例を示します。
const date = new Date()
// 日本のロケールを使用
console.log(date.toLocaleDateString('ja-JP'))
// 出力： "2023/6/29" （実行した日によります）
// アメリカのロケールを使用
console.log(date.toLocaleDateString('en-US'))
// 出力： "6/29/2023" （実行した日によります）
// オプションを指定して、年月日と曜日を表示
console.log(date.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }))
// 出力： "2023年6月29日木曜日" （実行した日によります）
なお、ロケールとオプションは指定しなくても、デフォルトのロケール（通常はユーザーの OS の設定に基づく）とデフォルトのオプションを使用して日付を書式化します。
したがって、toLocaleDateString()メソッドは、日付をユーザーの地域や言語に応じて適切に表示するのに非常に便利なツールです。
toLocaleTimeString()
toLocaleTimeString()というメソッドもあります。このメソッドは、Date オブジェクトを表現する際に現地の時間を文字列で返すものです。その使い方は以下の通りです。
import { useEffect, useState } from 'react'
const DisplayJapaneseTime = () => {
const [now, setNow] = useState(new Date())
useEffect(() => {
const timerId = setInterval(() => {
setNow(new Date())
}, 1000)
// クリーンアップ関数を返す
return () => {
clearInterval(timerId)
}
}, [])
return <p>現在の時刻: {now.toLocaleTimeString('ja-JP')}</p>
}
export default DisplayJapaneseTime
このコンポーネントは、現在の時刻を日本の時間形式で表示します。また、1 秒ごとに時間を更新します。
たとえば、午後 12 時 30 分 15 秒に表示した場合、次のように表示されます。
現在の時刻: 12:30:15そして、この表示は 1 秒ごとに更新されます。このメソッドも、日付や時間を地域や言語に応じて適切に表示するのに非常に便利です。
Date() コンストラクターをより深く理解する
先程は現在の日付と時間を表示する基本的な例を見ましたが、ここではDate() コンストラクターをより高度に活用した例を紹介します。具体的には、特定の日時までのカウントダウンタイマーを作成します。
ソースコードのファイル名: /components/CountdownTimer.tsx
import { useEffect, useState } from 'react';
type Props = {
targetDate: string;
};
const CountdownTimer = ({ targetDate }: Props) => {
const calculateTimeLeft = () => {
const difference = +new Date(targetDate) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
return timeLeft;
};
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
useEffect(() => {
const timer = setTimeout(() => {
setTimeLeft(calculateTime
Left());
}, 1000);
return () => clearTimeout(timer);
});
return (
<div>
{Object.entries(timeLeft).map(([unit, value]) => (
<div key={unit}>
{unit}: {value}
</div>
))}
</div>
);
};
export default CountdownTimer;
このコンポーネントでは、Date() コンストラクターを使って特定の日時までの残り時間を計算しています。calculateTimeLeft 関数では、目標の日時から現在の日時を引いて、その差をミリ秒単位で取得しています。
また、useState と useEffect フックを活用して、1 秒ごとに残り時間を再計算し、その値を更新しています。
表示部分では、計算した残り時間（timeLeft）をObject.entriesを使って配列に変換し、各時間単位（日、時間、分、秒）とその値を列挙して表示しています。
CountdownTimerコンポーネントでは、特定の日付までの残り時間が表示されます。たとえば、ターゲット日付を2023年7月1日 00:00:00とすると、その 1 日と 12 時間前（2023年6月29日 12:00:00）には、次のような結果が得られます。
days: 1
hours: 12
minutes: 0
seconds: 0次の 1 秒後、結果は以下のように更新されます。
days: 1
hours: 11
minutes: 59
seconds: 59そして、これが続けて表示されます。ターゲット日付が到来すると、全ての値が 0 になります。
以上が、Date() コンストラクターの基本的な使い方と、その高度な活用法についての説明です。JavaScript のDate() コンストラクターは、日時に関する処理を行う際の重要なツールですので、ぜひマスターしてみてください。