JavaScriptによる日時処理JavaScriptのコードの説明

Posted on by

avaScriptを使って日時を処理する方法は、ウェブアプリケーション開発において非常に重要です。この記事では、日時を取得・表示・フォーマットし、さらに日時を計算する方法を詳しく解説します。具体的なコード例を通じて、その動作と仕組みを理解しましょう。

現在の日時を表示する

まず、現在の日時を取得し、HTMLに表示する方法を紹介します。

HTML構造

以下の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>

JavaScriptコード

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

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

showDate();
setInterval(showDate, 1000);

コードの説明

  1. showDate関数: この関数は現在の日時を取得して表示します。
    • new Date(): 現在の日付と時刻を取得します。
    • toLocaleDateString(): 日付をローカル形式で文字列に変換します。
    • toLocaleTimeString(): 時刻をローカル形式で文字列に変換します。
    • document.getElementById('dateDisplay').textContent: HTML要素に日時を表示します。
  2. showDate関数の呼び出し: ページが読み込まれたときに日時を表示します。
  3. setIntervalメソッド: showDate関数を1秒ごとに実行し、日時をリアルタイムで更新します。

日時のフォーマットを変更する

日時を特定のフォーマットで表示する方法を見てみましょう。

JavaScriptコード

以下のコードを date.js に追加します。

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);

コードの説明

  1. formatDate関数: 日時を特定の形式（YYYY/MM/DD HH:MM:SS）にフォーマットします。
    • getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds(): 日時の各部分を取得します。
    • return: フォーマットされた文字列を返します。
  2. showFormattedDate関数: 現在の日時をフォーマットして表示します。
    • formatDate(now): 現在の日時をフォーマットします。
    • document.getElementById('dateDisplay').textContent: フォーマットされた日時を表示します。
  3. showFormattedDate関数の呼び出しとsetIntervalメソッド: showDate関数と同様に、1秒ごとに日時を更新します。

日時の計算

次に、特定の日付から数日後の日付を計算する方法を紹介します。

JavaScriptコード

以下のコードを date.js に追加します。

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();

コードの説明

  1. addDays関数: 指定された日数を現在の日付に追加し、新しい日付を返します。
    • new Date(date): 現在の日付をコピーして新しい日付オブジェクトを作成します。
    • setDate(result.getDate() + days): 現在の日付に指定された日数を追加します。
  2. showFutureDate関数: 現在の日付から7日後の日付を計算し、フォーマットして表示します。
    • addDays(now, 7): 現在の日付に7日を追加します。
    • formatDate(futureDate): 新しい日付をフォーマットします。
    • document.getElementById('futureDateDisplay').textContent: フォーマットされた日付を表示します。

まとめ

この記事では、JavaScriptを使って日時を取得、表示、フォーマットし、さらに日時を計算する方法を学びました。これらの基本的なスキルは、インタラクティブで動的なウェブアプリケーションを作成するために非常に役立ちます。実際のプロジェクトでこれらの技術を試してみてください。