時刻・タイマー処理: JavaScriptによる日時処理

Posted on by

JavaScriptは、日時を扱うための豊富な機能を提供しています。
この記事では、日時を操作する基本的な方法や、表示・フォーマット・計算を行う方法を解説します。

日時の表示

JavaScriptのDateオブジェクトを使用して現在の日時を取得し、表示する方法を見ていきます。

現在の日時の取得と表示

まず、現在の日時を取得し、HTMLに表示するコードを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>日時の表示</title>
</head>
<body>
    <div id="dateDisplay"></div>

    <script src="date.js"></script>
</body>
</html>

date.js ファイルに以下のJavaScriptコードを記述します。

function showDate() {
    const now = new Date();
    const dateString = now.toLocaleDateString();
    const timeString = now.toLocaleTimeString();
    document.getElementById('dateDisplay').textContent = `今日の日付: ${dateString}, 現在の時刻: ${timeString}`;
}

showDate();
setInterval(showDate, 1000);

このコードでは、showDate 関数が現在の日付と時刻を取得し、dateDisplay の div 要素に表示します。setInterval を使用して、この関数を1秒ごとに呼び出し、表示を更新します。

日時のフォーマット

JavaScriptで日時を特定のフォーマットで表示する方法を見ていきます。

日時のフォーマットの変更

以下のコードは、日時を特定のフォーマットで表示する例です。

function formatDate(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月は0から始まるため+1
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
}

function showFormattedDate() {
    const now = new Date();
    const formattedDate = formatDate(now);
    document.getElementById('dateDisplay').textContent = formattedDate;
}

showFormattedDate();
setInterval(showFormattedDate, 1000);

このコードでは、formatDate 関数が Date オブジェクトを受け取り、
YYYY/MM/DD HH:MM:SS の形式で日時を返します。

日時の計算

日時を計算する方法について学びます。
例えば、特定の日付から数日後の日付を求める場合などです。

日時の計算例

以下のコードは、現在の日付から7日後の日付を計算する例です。

function addDays(date, days) {
    const result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

function showFutureDate() {
    const now = new Date();
    const futureDate = addDays(now, 7);
    const formattedFutureDate = formatDate(futureDate);
    document.getElementById('futureDateDisplay').textContent = `7日後の日付: ${formattedFutureDate}`;
}

showFutureDate();

このコードでは、addDays 関数が現在の日付に指定された日数を追加し、新しい日付を返します。showFutureDate 関数が7日後の日付を計算し、フォーマットして表示します。

まとめ

JavaScriptを使用して日時を操作する方法について学びました。
現在の日時の表示、日時のフォーマットの変更、
日時の計算を行う基本的な方法を理解することで、より複雑な日時処理が可能になります。
これらの技術を活用して、インタラクティブで動的なウェブアプリケーションを作成しましょう。