【JS応用｜実務向け】JavaScriptのDate.prototype.setDateでカレンダーロジックを攻略する

2026.07.31

導入

フロントエンド開発において、日付の操作は避けて通れない課題です。特に「翌月の同じ日を取得する」「月末日を算出する」といった処理は、ライブラリを使わずに実装しようとするとバグの温床になりがちです。JavaScript標準のDate.prototype.setDateは、こうした日付操作をシンプルかつ安全に行うための非常に重要なメソッドです。本記事では、このAPIの特性を理解し、実務で安心して使いこなすためのTipsを解説します。

基礎知識

Date.prototype.setDateは、Dateオブジェクトが保持する「日（1〜31）」を指定した値に設定するメソッドです。最大の特徴は、「自動繰り上げ・繰り下げ機能（自動正規化）」を持っている点です。例えば、1月31日に「setDate(32)」を実行すると、自動的に2月1日へと日付が調整されます。この特性を理解しておくと、複雑な日付計算を驚くほど簡単に記述できます。

実装/解決策

実務で最も頻出する「月末日を取得する」という処理を例に解説します。ある月が何日まであるかを判定するには、翌月の「0日目」を指定するのが定石です。Dateオブジェクトにおいて「日」を0にすると、その月の前月末日を指すという仕様を利用します。このロジックを使えば、うるう年を考慮するような複雑な条件分岐を自力で書く必要がなくなります。

サンプルプログラム

以下のコードは、指定した年月からその月の最終日を取得する実用的な関数です。

/

    

  • 指定した年月の月末日を取得する関数
    • 

  • @param {number} year - 年
    • 

  • @param {number} month - 月 (1-12)
    • 

  • @returns {number} 月末の日付
    • 


 /
function getEndOfMonth(year, month) {
  // 月は0から始まるため、入力値から1を引く
  // 翌月の0日目を指定することで、当月末日を取得できる
  const date = new Date(year, month, 0);
  
  // getUTCDateではなくgetDateで日を取得する
  return date.getDate();
}

// 使用例: 2024年2月の月末日を取得（うるう年判定）
console.log(getEndOfMonth(2024, 2)); // 29 と出力される

応用・注意点

実務で扱う際に注意すべき点が2つあります。
1つ目は、「月は0から始まる」という仕様です。setDateやコンストラクタを使用する際、第2引数（月）には「0が1月、11が12月」を指定する必要があります。このオフセットを忘れると、1ヶ月ずれた結果になりバグの原因となります。
2つ目は、「ミュータブル（破壊的変更）」である点です。setDateは元のDateオブジェクト自体を書き換えます。Reactのstate管理や関数型プログラミングで扱う場合は、必ず事前に `new Date(originalDate)` でインスタンスをコピーしてから操作するようにしましょう。不用意な書き換えを防ぐことが、安定したフロントエンド構築の第一歩です。

スポンサーリンク
タイトルとURLをコピーしました