この記事はプログラミング学習者がアプリ開発中に躓いた内容を備忘録として記事におこしたものです。内容に不備などあればご指摘頂けると助かります。
0. 前提条件
この記事は以下の技術スタックを使用してGoogle Calendarを模したアプリを作った時に遭遇したエラーを解説するものです。
技術スタック
React ver 19.2.3
Next.js ver 16.1.6
TypeScript ver 5
tailwindCSS ver 4.1.8
使用したライブラリ
date-fns
完成したアプリはVercelにデプロイして閲覧できるようにしました。
1. 記事の投稿目的
カレンダーアプリを月・週の単位で指定の日付を表示できるように実装しました。
該当月・該当週で表示する時にその月や週には含まれないが、週単位で見た時に前月・前週と次月・次週の日付が1週間の日付を埋めるために必要なことがあります。
※具体例は以下のスクリーンショット内の赤枠日付を参照
今回はそれらの日付を取得する方法を紹介していきます。
月表示のサンプル
週表示のサンプル
2. 実装内容
取得したい日付の設定・月版
仮に当月を2026年4月と設定した場合、月表示でいうと3/29〜3/31と5/1〜5/2の日付を含めた表示用の日付データが必要になります。
日付のリストを取得する場合、date-fnsライブラリのeachDayOfInterval関数を使用します。
使用例
const currentDates: Date[] = eachDayOfInterval({
start: 日付データ
end: 日付データ,
});
このコードでは最初と最後の日付データを引数として与えることでその範囲に含まれる日付の配列データを取得します。
それでは、まず4月1日(水)の日付データを取得します。
const firstDate = new Date(2026, 3, 1);
上記のコードで4月1日の日付データを取得できるのですが、今回は年、月、日を数値で指定しています。
Date関数で指定の日付を生成する場合、日付の指定方法は３つあります。
1, 数値
2, 文字列
3, タイムスタンプ
そして、数値で日付を指定する場合、月の部分は0〜11の数値で指定する必要があるので注意してください。
※0は1月、11が12月を表します。今回は3で4月を表します。
次に4月30日(木)の日付データを取得します。
const lastDate: Date = lastDayOfMonth(firstDate)
lastDayOfMonthはdate-fnsの関数で引数の日付が含まれる月で最後の日付を取得しています。
これで4月1日〜4月30日の日付からなる配列を取得する準備ができました。
const currentDates: Date[] = eachDayOfInterval({
start: firstDate,
end: lastDayOfMonth(firstDate),
});
次に4月以外の日付も含めて取得できるようにコードを修正していきます。
4月の初日と最終日の曜日を再度確認します。
4月1日(水)
4月30日(木)
どちらも週の半ばで中途半端な位置ですね。
カレンダーを日曜日スタートで作成しているので、月初は日、月、火が不足していて、月末は金、土が不足しています。
date-fnsには週の初日、最終日を取得する関数があります。
startOfWeekとendOfWeekです。
これを使うと
const currentDates: Date[] = eachDayOfInterval({
start: startOfWeek(firstDate),
end: endOfWeek(lastDayOfMonth(firstDate)),
});
このコードで3/29(日)から5/2(土)までの日付の配列を取得することができます。
取得した日付の設定・週版
週間カレンダーを作る場合も見ていきましょう。
仮に現在の日付を2026年4月1日(水)で週の初めを日曜日とした場合、3/29(日)〜4/4(土)を含む日付の配列が必要です。
月版に倣って、4月1日(水)を基準にstartOfWeekとendOfWeekを使うことで取得することもできますが、別の方法でやってみましょう。
4月1日(水)の日付データをDate関数を使って数字で指定した場合、
const firstDate = new Date(2026, 3, 1);
となります。
ここで日付を表す1の部分をマイナス1するとどうなるでしょうか。
const firstDate = new Date(2026, 3, 0);
この場合、3月31日の日付を取得することができます。
日付部分を初日よりもマイナスすると前月の日付、最終日を超過する日付は次月の日付になるんですね。
const currentDates: Date[] = eachDayOfInterval({
start: new Date (2026, 3, 1 - 3),
end: new Date ( 2026, 3, 1 + 3),
});
日付部分について変数などを使えば、取得できる日付の幅が広がると思いますので試してください。
最後まで読んでいただきありがとうございました。