JavaScriptで日付を取得・操作する方法

JavaScriptで日付や時刻を扱う場合、Dateオブジェクトが非常に便利です。この記事では、その使用方法をいくつかのセクションに分けて解説します。

現在の日付と時刻を取得する
特定の日付を設定する
日付の各コンポーネントを取得する
日付のコンポーネントを設定する
タイムスタンプを取得・設定する
日付をフォーマットする
サンプルコードシンプルなカウントダウンタイマー
1. HTML
2. JavaScript (countdown.js)
よくある質問（FAQ）
まとめ

現在の日付と時刻を取得する

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ミリ秒）ごとに実行し、カウントダウンを更新します。

よくある質問（FAQ）

Q. Dateオブジェクトで2つの日付の差分（日数）を計算するにはどうすればよいですか？

A. const diffMs = date2 - date1;でミリ秒差分が得られます（Dateオブジェクトは数値演算可能）。日数に変換：const days = Math.floor(diffMs / (1000 * 60 * 60 * 24))。月・年の差分には注意が必要で、ライブラリ（date-fns等）を使うと正確です。

Q. 日付のタイムゾーン問題を回避するにはどうすればよいですか？

A. new Date()はローカルタイムゾーンで動作します。UTC基準の処理にはDate.UTC()またはdate.getUTC**()系メソッドを使います。現代ではIntl.DateTimeFormatAPIやdate-fnsのtzサポートでタイムゾーン変換を行うことが推奨されます。

Q. 日付文字列をDateオブジェクトに変換するにはどうすればよいですか？

A. new Date("2024-04-01")でISO 8601形式の文字列を変換できます。ただし”2024/04/01″のスラッシュ形式はブラウザによって挙動が異なる場合があります。安全なのはISO形式（ハイフン区切り）か、new Date(year, month-1, day)で直接指定する方法です。

まとめ

JavaScriptのDateオブジェクトは、日付と時刻に関する多くのタスクを簡単に処理できる強力なツールです。これを使えば、現在の日付の取得、特定の日付の設定、日付の成分の取得・設定、そして人間が読める形式での日付の出力が可能になります。

これからJavaScriptで日付を扱う際には、このDateオブジェクトをぜひ活用してみてください！