JavaScriptで月初を取得する5つの方法（date-fns、Moment.js、Luxonなど）

date-fns の Month Helpers と startOfMonth

startOfMonth は、指定された日付の月初めに設定された新しい Date オブジェクトを返します。例えば、2024年3月14日を渡すと、2024年3月1日の0時0分0秒を返します。

const date = new Date(2024, 2, 14); // 2024年3月14日
const startOfMonthDate = startOfMonth(date); // 2024年3月1日

console.log(startOfMonthDate); // 2024-03-01T00:00:00.000Z

startOfMonth は以下の引数を受け取ります。

• date: 月の開始を取得したい日付オブジェクト

オプションとして以下の引数も受け取ります。

• locale: 使用するロケール。デフォルトは 'en-US'
• options: 以下のオプションを受け取るオブジェクト
  • weekStartsOn: 週の開始曜日。デフォルトは '0' (日曜日)

const startOfMonthDate = startOfMonth(date, {
  locale: 'ja-JP',
  options: {
    weekStartsOn: 1, // 月曜日から始まる週
  },
});

• startOfMonth は、新しい Date オブジェクトを返します。元の Date オブジェクトは変更されません。
• startOfMonth は、常に0時0分0秒を返します。

Month Helpers の他の関数

startOfMonth 以外にも、Month Helpers には以下の関数があります。

• endOfMonth: 月の最後に設定された新しい Date オブジェクトを返す
• getDaysInMonth: 指定された月の日数を返す
• isWithinMonth: 指定された日付が指定された月内にあるかどうかを返す
• getDate: 月の日付を取得する
• getMonth: 月のインデックスを取得する
• getYear: 年を取得する

これらの関数は、startOfMonth と同様に使用できます。

startOfMonth は、"date-fns" の Month Helpers で提供される関数の一つです。指定された日付の月初めに設定された新しい Date オブジェクトを返します。startOfMonth 以外にも、Month Helpers には月に関する操作を行う様々な関数が用意されています。

これらの関数を活用することで、JavaScript で日付操作を簡単に、分かりやすく行うことができます。

startOfMonth のサンプルコード

今月の月初を取得する

const startOfMonthDate = startOfMonth(new Date());

console.log(startOfMonthDate); // 2024-03-01T00:00:00.000Z

2023年12月の月初を取得する

const startOfMonthDate = startOfMonth(new Date(2023, 11));

console.log(startOfMonthDate); // 2023-12-01T00:00:00.000Z

ロケールを指定して月初を取得する

const startOfMonthDate = startOfMonth(new Date(), {
  locale: 'ja-JP',
});

console.log(startOfMonthDate); // 2024年3月1日 00:00:00

週の開始曜日を指定して月初を取得する

const startOfMonthDate = startOfMonth(new Date(), {
  options: {
    weekStartsOn: 1, // 月曜日から始まる週
  },
});

console.log(startOfMonthDate); // 2024年3月5日 00:00:00

startOfMonth を使ってカレンダーを作成する

const month = new Date().getMonth();
const year = new Date().getFullYear();

const startOfMonthDate = startOfMonth(new Date(year, month));
const endOfMonthDate = endOfMonth(new Date(year, month));

// カレンダーの各日を表示する処理

JavaScriptで月初を取得する他の方法

Date オブジェクトのメソッドを使う

Date オブジェクトには、以下のメソッドを使って月初を取得することができます。

• setDate(1): 日付を1に設定する
• setMonth(month): 月を指定する

const date = new Date(2024, 2, 14); // 2024年3月14日

date.setDate(1);
const startOfMonthDate = new Date(date);

console.log(startOfMonthDate); // 2024-03-01T00:00:00.000Z

ループを使う

以下のコードのように、ループを使って月初を取得することもできます。

const date = new Date(2024, 2, 14); // 2024年3月14日

while (date.getDate() !== 1) {
  date.setDate(date.getDate() - 1);
}

const startOfMonthDate = new Date(date);

console.log(startOfMonthDate); // 2024-03-01T00:00:00.000Z

ライブラリを使う

date-fns 以外にも、Moment.js や Luxon などのライブラリを使って月初を取得することができます。

// Moment.jsを使う場合
const moment = require('moment');

const startOfMonthDate = moment(new Date(2024, 2, 14)).startOf('month').toDate();

console.log(startOfMonthDate); // 2024-03-01T00:00:00.000Z

// Luxonを使う場合
const luxon = require('luxon');

const startOfMonthDate = luxon.DateTime.fromJSDate(new Date(2024, 2, 14)).startOf('month').toJSDate();

console.log(startOfMonthDate); // 2024-03-01T00:00:00.000Z

• 简单的に月初を取得したい場合は、Date オブジェクトのメソッドを使うのが最も簡単です。
• 複雑な処理を行う場合は、date-fns などのライブラリを使うと便利です。
• 処理速度が重要な場合は、ループを使う方法が最も効率的です。

JavaScriptで月初を取得するには、いくつかの方法があります。それぞれ