JavaScriptでカレンダー的な日付処理を行う方法｜初心者でもわかる日付操作
先生と生徒の会話形式で理解しよう
生徒
「先生、JavaScriptでカレンダーみたいに日付を操作する方法はありますか？」
先生
「もちろんです。Dateオブジェクトを使うと、日付の加算や減算、曜日の取得、月末の日付確認など、カレンダー的な操作が簡単にできます。」
生徒
「日付を足したり引いたりするって、どうやるんですか？」
先生
「基本はgetDate()とsetDate()を組み合わせて行います。今日はその方法を順番に説明していきます。」
1. 日付の加算・減算
日付を足したり引いたりするときは、getDate()で現在の日を取得し、setDate()で加算や減算を行います。
const today = new Date();
console.log("今日の日付:", today);
// 5日後の日付
const futureDate = new Date(today);
futureDate.setDate(today.getDate() + 5);
console.log("5日後の日付:", futureDate);
// 3日前の日付
const pastDate = new Date(today);
pastDate.setDate(today.getDate() - 3);
console.log("3日前の日付:", pastDate);
今日の日付: Tue Nov 18 2025 ...
5日後の日付: Sun Nov 23 2025 ...
3日前の日付: Sat Nov 15 2025 ...
このように簡単に未来や過去の日付を計算できます。
2. 曜日の取得
カレンダー的な操作では曜日の取得もよく使います。getDay()を使うと、0が日曜日、1が月曜日、…6が土曜日として取得できます。
const dayOfWeek = today.getDay();
const weekDays = ["日","月","火","水","木","金","土"];
console.log("今日の曜日:", weekDays[dayOfWeek]);
今日の曜日: 火
3. 月末の日付を取得する
月末の日付は翌月の1日から1日引くことで簡単に求められます。
const year = today.getFullYear();
const month = today.getMonth(); // 0-11
const lastDayOfMonth = new Date(year, month + 1, 0);
console.log("今月の月末の日付:", lastDayOfMonth);
今月の月末の日付: Sun Nov 30 2025 ...
4. 月初の日付を取得する
月初は単純にsetDate(1)で設定できます。
const firstDayOfMonth = new Date(today);
firstDayOfMonth.setDate(1);
console.log("今月の月初の日付:", firstDayOfMonth);
今月の月初の日付: Sat Nov 01 2025 ...
5. 日付の範囲でループ処理
カレンダーアプリでは、月の全日を表示することもあります。forループを使って日付を順番に生成できます。
const daysInMonth = lastDayOfMonth.getDate();
for(let d = 1; d <= daysInMonth; d++){
const date = new Date(year, month, d);
const weekDay = weekDays[date.getDay()];
console.log(`${d}日(${weekDay})`);
}
1日(土)
2日(日)
3日(月)
...
30日(日)
この方法で月のカレンダーをプログラムで作成することが可能です。
6. 応用：週の開始日や終了日を取得する
例えば今週の月曜日と日曜日を取得する場合は以下のようにします。
const dayIndex = today.getDay(); // 0:日曜 ... 6:土曜
const monday = new Date(today);
monday.setDate(today.getDate() - (dayIndex === 0 ? 6 : dayIndex - 1));
const sunday = new Date(monday);
sunday.setDate(monday.getDate() + 6);
console.log("今週の月曜日:", monday);
console.log("今週の日曜日:", sunday);
今週の月曜日: Mon Nov 17 2025 ...
今週の日曜日: Sun Nov 23 2025 ...
これにより、特定の週の範囲も簡単に計算できます。
7. 注意点：タイムゾーンと時間の影響
日付を扱うときはタイムゾーンや時間部分による誤差に注意しましょう。日だけを扱いたい場合は時間を0:00に揃えると計算が安全です。
const safeToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
こうすることで、日付計算で予期せぬズレを防ぐことができます。
