date-fnsにおけるMonth Helpers - startOfMonth 解説

使い方

import startOfMonth from 'date-fns';

const date = new Date(2024, 5, 10); // 2024年6月10日
const firstDayOfMonth = startOfMonth(date); // 2024年6月1日
console.log(firstDayOfMonth); // 2024-06-01T00:00:00.000Z

処理内容

指定された日付の年、月を取得します。
取得した年、月、1日を組み合わせた新しいDateオブジェクトを作成します。
新しいDateオブジェクトの時刻を00:00:00に設定します。
作成したDateオブジェクトを返します。

例

2024年6月10日に startOfMonth 関数を適用すると、2024年6月1日の00:00:00になります。

オプション

startOfMonth 関数はオプション引数を受け取り、日付の処理方法をカスタマイズできます。

options.locale: 使用するロケールを設定できます。
options.weekStartsOn: 週の開始曜日を設定できます。

startOfMonth 関数は、常にUTC時間で処理されます。
タイムゾーンの影響を受けたくない場合は、setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds などのメソッドを使用して、返されたDateオブジェクトの時刻を調整する必要があります。

特定の日付の月の最初の日を取得

import startOfMonth from 'date-fns';

const date = new Date(2024, 5, 10); // 2024年6月10日
const firstDayOfMonth = startOfMonth(date);
console.log(firstDayOfMonth); // 2024-06-01T00:00:00.000Z

import startOfMonth from 'date-fns';

const now = new Date();
const firstDayOfMonth = startOfMonth(now);
console.log(firstDayOfMonth); // 2024-06-01T00:00:00.000Z

オプションを使用してロケールと週の開始曜日を指定

import startOfMonth from 'date-fns';

const date = new Date(2024, 5, 10);
const firstDayOfMonth = startOfMonth(date, {
  locale: ja, // 日本語ロケールを設定
  weekStartsOn: 1, // 週の開始曜日を月曜日に設定
});
console.log(firstDayOfMonth); // 2024年6月1日T00:00:00.000Z

import startOfMonth from 'date-fns';

const targetDate = new Date(2024, 5, 25); // 2024年6月25日
const firstDayOfMonth = startOfMonth(targetDate);
console.log(firstDayOfMonth); // 2024-06-01T00:00:00.000Z

来月の最初の日を取得

import startOfMonth from 'date-fns';
import addMonths from 'date-fns';

const now = new Date();
const nextMonth = addMonths(now, 1);
const firstDayOfNextMonth = startOfMonth(nextMonth);
console.log(firstDayOfNextMonth); // 2024-07-01T00:00:00.000Z

"startOfMonth" の代替方法

手動で設定

最も単純な代替方法は、手動で日付を設定することです。例えば、2024年6月10日の月の最初の日を取得したい場合は、以下のコードとなります。

const date = new Date(2024, 5, 10);
const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
console.log(firstDayOfMonth); // 2024-06-01T00:00:00.000Z

利点:

コードがシンプルで分かりやすい

欠点:

閏年などの特殊なケースを考慮する必要がある
月によっては、日数が異なるため、記述が煩雑になる

JavaScript の標準ライブラリを使用

JavaScriptの標準ライブラリには、日付を操作するためのいくつかのメソッドが用意されています。例えば、以下のコードを使用して、2024年6月10日の月の最初の日を取得できます。

const date = new Date(2024, 5, 10);
date.setDate(1);
console.log(date); // 2024-06-01T00:00:00.000Z

date-fns を導入する必要がない

setDate メソッドは、日付のみを変更するため、時刻情報が失われます。

Moment.js などのライブラリを使用

Moment.js などのライブラリは、date-fns よりも多くの機能を提供しており、startOfMonth メソッドと同様の機能を提供しています。

const moment = require('moment');
const date = moment(2024, 5, 10);
const firstDayOfMonth = moment(date).startOf('month');
console.log(firstDayOfMonth.format('YYYY-MM-DD')); // 2024-06-01

date-fns よりも多くの機能を提供している
複雑な日付操作を簡単に行える

date-fns よりもライブラリが大きいため、読み込み速度が遅くなる可能性がある
別途ライブラリを導入する必要がある

最適な代替方法の選択

どの代替方法が最適かは、状況によって異なります。

コードがシンプルで分かりやすいことが重要であれば、手動で設定 がおすすめです。
閏年などの特殊なケースを考慮する必要がないことが重要であれば、JavaScript の標準ライブラリ を使用するのがおすすめです。
date-fns よりも多くの機能が必要であれば、Moment.js などのライブラリを使用するのがおすすめです。