JavaScriptで日付や時刻を扱う場合、Dateオブジェクトが非常に便利です。この記事では、その使用方法をいくつかのセクションに分けて解説します。
現在の日付と時刻を取得する
JavaScriptで現在の日付と時刻を取得する最もシンプルな方法は、new Date()を使うことです。
const now = new Date();
console.log(now);これによりコンソールに現在の日付と時刻が出力されます。
特定の日付を設定する
Dateオブジェクトを使用して特定の日付を設定することも可能です。これは文字列、数値、または他のDateオブジェクトを引数に取ることができます。
const specificDate = new Date('2023-08-17T12:00:00');
console.log(specificDate);日付の各コンポーネントを取得する
Dateオブジェクトから年、月、日、時間、分、秒、ミリ秒を個別に取得するメソッドも用意されています。
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate();
const day = now.getDay();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
console.log(year, month, date, day, hours, minutes, seconds, milliseconds);日付のコンポーネントを設定する
Dateオブジェクトは、日付の各コンポーネントを個別に設定するためのメソッドも提供しています。
const now = new Date();
now.setFullYear(2024);
now.setMonth(11);
now.setDate(25);
now.setHours(12);
now.setMinutes(0);
now.setSeconds(0);
now.setMilliseconds(0);
console.log(now);タイムスタンプを取得・設定する
JavaScriptでは、1970年1月1日00:00:00 UTCからの経過ミリ秒をタイムスタンプとして取得できます。
const now = new Date();
const timestamp = now.getTime();
console.log(timestamp);タイムスタンプからDateオブジェクトを生成することも可能です。
const timestamp = 1689902400000;
const dateFromTimestamp = new Date(timestamp);
console.log(dateFromTimestamp);日付をフォーマットする
日付を人間が読める形式の文字列に変換するために、toLocaleDateStringやtoLocaleTimeStringメソッドを使うことができます。
const now = new Date();
const formattedDate = now.toLocaleDateString('ja-JP');
const formattedTime = now.toLocaleTimeString('ja-JP');
console.log(formattedDate);
console.log(formattedTime);サンプルコード シンプルなカウントダウンタイマー
この実例では、HTMLで表示用の要素を作成し、JavaScriptでカウントダウンのロジックを実装しています。
これを実行すると、指定した未来の日付までの残り時間を、ウェブページ上に日、時間、分、秒の形式でリアルタイムで表示するカウントダウンタイマーができます。
このシンプルなカウントダウンタイマーの例を参考に、より複雑な日付や時間に関する機能をJavaScriptで実装する際のヒントにしてください！
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマー</title>
</head>
<body>
<h1>カウントダウンタイマー</h1>
<div id="countdown">
<span id="days"></span>日
<span id="hours"></span>時間
<span id="minutes"></span>分
<span id="seconds"></span>秒
</div>
<script src="countdown.js"></script>
</body>
</html>カウントダウンの日数、時間、分、秒を表示するためのspan要素を作成しています。
JavaScript (countdown.js)
// 目標の日付を設定 (例: 2023年12月31日 23:59:59)
const targetDate = new Date('2023-12-31T23:59:59');
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
function updateCountdown() {
// 現在の日付と時刻を取得
const now = new Date();
// 目標の日付までの残り時間（ミリ秒）を計算
const remainingTime = targetDate - now;
// 残り時間を日、時間、分、秒に変換
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// 各要素に値をセット
daysElement.textContent = days;
hoursElement.textContent = hours;
minutesElement.textContent = minutes;
secondsElement.textContent = seconds;
}
// 1秒ごとにupdateCountdown関数を実行
setInterval(updateCountdown, 1000);- targetDateにカウントダウンする目標の日時を設定します。この例では、2023年12月31日 23:59:59に設定しています。
- updateCountdown関数は、現在の時間から目標の時間までの差（残り時間）を計算し、それを日、時間、分、秒に分解して、HTMLに表示します。
- setInterval(updateCountdown, 1000)は、updateCountdown関数を1秒（1000ミリ秒）ごとに実行し、カウントダウンを更新します。
まとめ
JavaScriptのDateオブジェクトは、日付と時刻に関する多くのタスクを簡単に処理できる強力なツールです。これを使えば、現在の日付の取得、特定の日付の設定、日付の成分の取得・設定、そして人間が読める形式での日付の出力が可能になります。
これからJavaScriptで日付を扱う際には、このDateオブジェクトをぜひ活用してみてください！
