JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript入門】日付を1日前に戻す(デクリメントする)方法をわかりやすく解説

JavaScriptでは、Dateオブジェクトが持つgetDate()メソッドとsetDate()メソッドを組み合わせることで、現在の日付から簡単に1日(あるいは任意の日数)を減算することができます。

この記事では、ボタンをクリックすると表示中の日付が1日前に戻るサンプルプログラムを紹介します。

実装例

以下のコードは、日付を1日デクリメント(前日に戻す)するシンプルなHTML+JavaScriptのプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>日付を1日デクリメントする</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptで日付を1日前に戻すプログラム</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">Decrement</button>
<h3>上のボタンをクリックすると、日付が1日前に戻ります</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let date = new Date();
    sampleEle.innerHTML = date;
    document.querySelector(".Btn").addEventListener("click", () => {
        date.setDate(date.getDate() - 1);
        resEle.innerHTML = "新しい日付 = " + date;
    });
</script>
</body>
</html>

コードの解説

このプログラムのポイントは以下の部分です。

  • new Date():現在の日時を持つDateオブジェクトを生成し、画面に初期値として表示します。
  • date.getDate():現在設定されている「日」(1〜31の数値)を取得します。
  • date.setDate(date.getDate() - 1):取得した「日」から1を引いた値を再度セットすることで、日付を1日前に更新します。

setDate()の便利な点は、月をまたいでも自動的に正しい日付に調整してくれることです。たとえば「3月1日」に対してこの処理を行うと、「2月28日」や「2月29日(うるう年の場合)」といった前月の最終日が自動的に計算されます。同様に、年をまたぐ場合も問題なく動作します。

なお、逆に日付を進めたい(インクリメントしたい)場合は、date.setDate(date.getDate() + 1)のように「+1」とすればOKです。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

【JavaScript入門】日付を1日前に戻す(デクリメントする)方法をわかりやすく解説

「Decrement」ボタンをクリックすると、日付が1日前に更新されます。

【JavaScript入門】日付を1日前に戻す(デクリメントする)方法をわかりやすく解説

まとめ

JavaScriptで日付を操作する際は、getDate()で現在の「日」を取得し、setDate()で計算後の値を再設定するのが基本のアプローチです。月末・年末をまたぐ場合でも自動的に補正されるため、日数の加減算処理を安全かつ簡単に実装できます。

  1. JavaScriptのDateコンストラクタープロパティとは？使い方を実例で解説

    JavaScriptのDateコンストラクタープロパティは、その日付オブジェクトを生成した元となるコンストラクター関数（Date()）を返すプロパティです。すべてのJavaScriptオブジェクトが持つconstructorプロパティの一つで、Dateオブジェクトに対して使用すると、function Date() { [native code] }という形式の関数定義が出力されます。 このプロパティを活用することで、あるオブジェクトが本当にDateインスタンスであるかを確認したり、動的に新しいDateオブジェクトを生成したりすることができます。以下に、実際の動作を確認できるサンプルコードを紹介

  2. JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

    JavaScriptでは、DateオブジェクトのsetDate()メソッドを使うことで、日付の「日」（1〜31）を設定・変更できます。この記事では、実際のコード例と実行結果をもとに、setDate()の基本的な使い方をわかりやすく解説します。 setDate()メソッドとは setDate()は、Dateオブジェクトの「日」の値だけを変更するためのメソッドです。年や月はそのままに、日にちだけを差し替えたい場合に便利です。引数には1〜31の整数を指定しますが、範囲外の値を渡してもエラーにはならず、自動的に月をまたいだ日付へと調整されます。また、このメソッドは元のDateオブジェクト自体を書き換え