カテゴリ: 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
TypeScript
TypeScriptでPromiseの型推論をマスター!非同期処理とasync/awaitの基礎講座
New2
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
New3
JavaScript
JavaScriptのBigInt型とは?大きな整数の扱い方と活用例
New4
JavaScript
JavaScriptでスクロール位置を取得・操作する方法を完全解説!scrollTopなどDOM操作入門
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのクロージャーとは?仕組みと実践例をやさしく解説
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptで新しい要素を作成する方法(createElement, appendChildなど)
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptのプロジェクトをtscでビルドする基本操作を解説!初心者にもわかるステップバイステップ
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptでフォーム要素を操作するDOMテクニックを初心者向けに徹底解説
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで親要素・子要素・兄弟要素を取得する方法を初心者向けに徹底解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptでnull・undefinedを型ガードするテクニックを徹底解説!初心者でも理解できる安全なコードの書き方
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】