JavaScriptで月の初日と末日を取得する

2024-09-10

JavaScriptとjQueryで現在の月の初日と末日を取得する

JavaScript

function getFirstAndLastDayOfMonth() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();

  // 初日
  const firstDay = new Date(year, month, 1);
  // 末日
  const lastDay = new Date(year, month + 1, 0);

  return { firstDay, lastDay };
}

const { firstDay, lastDay } = getFirstAndLastDayOfMonth();
console.log("初日:", firstDay);
console.log("末日:", lastDay);

jQuery

jQueryはJavaScriptのライブラリなので、JavaScriptの機能を利用します。そのため、上記のJavaScriptコードをそのまま使用することができます。

解説

new Date()で現在の日時を取得します。
getFullYear()とgetMonth()で現在の年の数値と月の数値を取得します。
new Date(year, month, 1)で月の初日を取得します。
取得した初日と末日をオブジェクトとして返します。

注意

jQueryはJavaScriptのライブラリなので、jQueryの機能を直接使用して初日と末日を取得する方法はありません。
getMonth()は0から11までの数値を返すので、末日の計算ではmonth + 1を使用しています。

JavaScriptで月の初日と末日を取得するコードの解説

コードの目的

これらのコードは、JavaScriptを使って、現在の月の初日と末日を日付オブジェクトとして取得することを目的としています。

コードの解説

new Date()

現在の日時を取得
JavaScriptの組み込みオブジェクトであるDateのコンストラクタを使って、現在のシステム日時を表すDateオブジェクトを作成します。

getFullYear(), getMonth()

年と月を取得
- getFullYear(): Dateオブジェクトから年を取得します。
- getMonth(): Dateオブジェクトから月を取得します。ただし、月の値は0から11で表されるため、注意が必要です（0: 1月、 1: 2月、 ...、 11: 12月）。

new Date(year, month, 1)

月の初日

月の末日
- 月の末日を求めるために少しトリッキーな方法です。
- month + 1とすることで、翌月の値を指定します。
- 日付を0にすることで、前月の末日（つまり、指定した月の末日）を表すDateオブジェクトになります。

コード全体の流れ

現在の日時を取得します。
取得した日時から、年と月を取り出します。
年、月、1日の値を使って、月の初日のDateオブジェクトを作成します。
作成した2つのDateオブジェクトを返します。

例

function getFirstAndLastDayOfMonth() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();

  // 初日
  const firstDay = new Date(year, month, 1);
  // 末日
  const lastDay = new Date(year, month + 1, 0);

  return { firstDay, lastDay };
}

const { firstDay, lastDay } = getFirstAndLastDayOfMonth();
console.log("初日:", firstDay);
console.log("末日:", lastDay);

jQueryとの関係

jQueryはJavaScriptのライブラリであり、日付の操作に関しては、JavaScriptの組み込み機能であるDateオブジェクトを利用します。そのため、上記のコードはjQueryの機能を特別に使うことなく、JavaScript単体で動作します。

応用

データの絞り込み
特定の期間のデータだけを抽出したい場合に、取得した初日と末日を使って条件を絞り込むことができます。
期間の計算
2つの日付の差から、期間を計算することができます。
カレンダーの作成
取得した初日と末日を使って、カレンダーの表示を生成できます。

このコードは、JavaScriptで日付を扱う上で非常に基本的な部分であり、様々な場面で活用することができます。特に、カレンダー機能や、期間を指定してデータ処理を行うようなアプリケーションでは、頻繁に利用されるテクニックです。

日付のフォーマット
取得したDateオブジェクトを、任意の形式の文字列に変換する場合は、toLocaleDateStringやtoISOStringなどのメソッドを使用します。
タイムゾーン
Dateオブジェクトは、システムの設定されているタイムゾーンの影響を受けます。

ライブラリを活用する

(1) Moment.js

Moment.jsは、JavaScriptで日付と時間を操作するための強力なライブラリです。Moment.jsを使うと、日付の計算やフォーマットを非常に簡単に記述できます。

const moment = require('moment');

// 現在の月の初日
const firstDayOfMonth = moment().startOf('month');
// 現在の月の末日
const lastDayOfMonth = moment().endOf('month');

endOf('month'): 月の末日に設定します。

(2) Luxon

Luxonは、Moment.jsの後継として開発されたライブラリで、より現代的なJavaScriptの機能を活用しています。

const { DateTime } = require('luxon');

// 現在の月の初日
const firstDayOfMonth = DateTime.local().startOf('month');
// 現在の月の末日
const lastDayOfMonth = DateTime.local().endOf('month');

Moment.jsと同様に、startOf('month')とendOf('month')メソッドで、月の初日と末日を取得できます。

ES6+ の機能を活用する

(1) `Date`オブジェクトのメソッド

ES6以降では、Dateオブジェクトに新しいメソッドが追加されています。

toISOString()
- ISO 8601形式の文字列として日付をフォーマットします。
toLocaleDateString()
- 特定のロケールに基づいた文字列として日付をフォーマットします。

これらのメソッドを使って、日付を文字列に変換し、必要な部分だけ抽出することも可能です。

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1; // 月は0から始まるので+1

// 月の初日
const firstDayOfMonth = new Date(year, month - 1, 1);
// 月の末日
const lastDayOfMonth = new Date(year, month, 0);

console.log(firstDayOfMonth.toLocaleDateString());
console.log(lastDayOfMonth.toLocaleDateString());