カテゴリ: JavaScript 更新日: 2026/01/01

JavaScriptでカレンダー的な日付処理を行う方法|初心者でもわかる日付操作

JavaScriptでカレンダー的な日付処理を行う方法
JavaScriptでカレンダー的な日付処理を行う方法

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでカレンダーみたいに日付を操作する方法はありますか?」

先生

「もちろんです。Dateオブジェクトを使うと、日付の加算や減算、曜日の取得、月末の日付確認など、カレンダー的な操作が簡単にできます。」

生徒

「日付を足したり引いたりするって、どうやるんですか?」

先生

「基本はgetDate()setDate()を組み合わせて行います。今日はその方法を順番に説明していきます。」

1. 日付の加算・減算

1. 日付の加算・減算
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. 曜日の取得

2. 曜日の取得
2. 曜日の取得

カレンダー的な操作では曜日の取得もよく使います。getDay()を使うと、0が日曜日、1が月曜日、…6が土曜日として取得できます。


const dayOfWeek = today.getDay();
const weekDays = ["日","月","火","水","木","金","土"];
console.log("今日の曜日:", weekDays[dayOfWeek]);

今日の曜日: 火

3. 月末の日付を取得する

3. 月末の日付を取得する
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. 月初の日付を取得する

4. 月初の日付を取得する
4. 月初の日付を取得する

月初は単純にsetDate(1)で設定できます。


const firstDayOfMonth = new Date(today);
firstDayOfMonth.setDate(1);
console.log("今月の月初の日付:", firstDayOfMonth);

今月の月初の日付: Sat Nov 01 2025 ...

5. 日付の範囲でループ処理

5. 日付の範囲でループ処理
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. 応用:週の開始日や終了日を取得する

6. 応用:週の開始日や終了日を取得する
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. 注意点:タイムゾーンと時間の影響

7. 注意点:タイムゾーンと時間の影響
7. 注意点:タイムゾーンと時間の影響

日付を扱うときはタイムゾーンや時間部分による誤差に注意しましょう。日だけを扱いたい場合は時間を0:00に揃えると計算が安全です。


const safeToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());

こうすることで、日付計算で予期せぬズレを防ぐことができます。

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの配列から要素を削除する方法(pop, shift, spliceなど)完全ガイド
New2
JavaScript
JavaScriptで配列を作成する方法!リテラル表記とArrayコンストラクタを比較
New3
TypeScript
TypeScriptのUnion型とMapped Typesの活用法!初心者向け解説
New4
JavaScript
JavaScriptのデータ型の違いを表で比較しよう(一覧解説)
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptでJSONを文字列に変換する方法を初心者向けに解説!JSON.stringifyの使い方ガイド
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptでJSON操作の注意点を徹底解説!初心者でも安全に扱える方法
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptの配列の一部を切り出す(slice, spliceの使い方)
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptで関数の型を再利用!ParametersとReturnTypeの使い方を初心者向けに徹底解説
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで使える基本の型一覧(string, number, booleanなど)