JavaScriptのDateオブジェクト活用法10選！初心者でも使いこなせるサンプルコード付き解説

1. はじめに
●2. JavaScriptのDateオブジェクトとは
●3. Dateオブジェクトの基本的な使い方
- ○サンプルコード1：現在の日付と時刻を取得する
- ○サンプルコード2：特定の日付を設定する
●4. Dateオブジェクトの応用例
●5. 注意点と対処法
●6. カスタマイズ方法
- ○サンプルコード11：独自の日付フォーマット関数を作成する
- ○ サンプルコード12：特定の曜日に最も近い日付を取得する
7. まとめ

1. はじめに

この記事を読めば、JavaScriptのDateオブジェクトを使いこなすことができるようになります。

初心者でも理解しやすいように、基本的な使い方から応用例まで徹底解説していきます。

サンプルコードも付いているので、すぐに活用できます。

●2. JavaScriptのDateオブジェクトとは

Dateオブジェクトは、JavaScriptで日付や時刻を扱うためのオブジェクトです。

簡単な日付操作から、複雑な日付計算まで幅広く対応しています。

●3. Dateオブジェクトの基本的な使い方

Dateオブジェクトを使って、日付や時刻を操作する方法を学びましょう。

下記のサンプルコードを参考に、基本的な使い方をマスターしましょう。

○サンプルコード1：現在の日付と時刻を取得する

let currentDate = new Date();
console.log(currentDate);

このコードは、現在の日付と時刻を取得して表示します。

new Date()を使ってDateオブジェクトを生成すると、現在の日付と時刻が設定されます。

○サンプルコード2：特定の日付を設定する

let specificDate = new Date("2023-04-07T15:30:00");
console.log(specificDate);

このコードは、特定の日付と時刻を設定したDateオブジェクトを作成します。

文字列で日付と時刻を指定することができます。

●4. Dateオブジェクトの応用例

ここでは、Dateオブジェクトを使った応用例をいくつか紹介します。

下記のサンプルコードを参考に、実践的な使い方を身に付けましょう。

○サンプルコード3：カウントダウンタイマーを作成する

let targetDate = new Date("2024-01-01T00:00:00");
let countdown = setInterval(function() {
  let currentDate = new Date();
  let remainingTime = targetDate - currentDate;
  
  if (remainingTime <= 0) {
    clearInterval(countdown);
    console.log("Happy New Year!");
  } else {
    let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    let hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
    
    console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
  }
}, 1000);

このコードは、指定された日付までのカウントダウンタイマーを作成します。

setInterval関数を使って、1秒ごとに残り時間を更新し、表示します。

○サンプルコード4：経過日数を計算する

let startDate = new Date("2023-01-01");
let endDate = new Date("2023-04-07");
let elapsedDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
console.log("経過日数：" + Math.floor(elapsedDays) + "日");

このコードは、2つの日付間の経過日数を計算します。

日付オブジェクトの差分をミリ秒単位で求め、それを日単位に変換して表示します。

○サンプルコード5：曜日を取得する

let today = new Date();
let dayOfWeek = today.getDay();
let days = ["日", "月", "火", "水", "木", "金", "土"];
console.log("今日は" + days[dayOfWeek] + "曜日です");

このコードは、現在の曜日を取得して表示します。

getDayメソッドを使って曜日のインデックス（0: 日曜, 1: 月曜, … 6: 土曜）を取得し、それに対応する曜日名を表示します。

○サンプルコード6：特定の期間内にある日付をリストアップする

let startDate = new Date("2023-04-01");
let endDate = new Date("2023-04-30");
let currentDate = startDate;

while (currentDate <= endDate) {
  console.log(currentDate);
  currentDate.setDate(currentDate.getDate() + 1);
}

このコードは、指定された期間内の日付をリストアップします。

whileループを使って、開始日から終了日まで1日ずつ日付を増やしながら表示します。

○サンプルコード7：日付のフォーマットを変更する

function formatDate(date) {
  let year = date.getFullYear();
  let month = ("0" + (date.getMonth() + 1)).slice(-2);
  let day = ("0" + date.getDate()).slice(-2);
  return year + "-" + month + "-" + day;
}

let today = new Date();
console.log("今日の日付（フォーマット変更）：" + formatDate(today));

このコードは、日付のフォーマットを変更して表示します。

年、月、日をそれぞれ取得し、結果を文字列として結合して表示します。

○サンプルコード8：月末日を取得する

function getLastDateOfMonth(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

let currentDate = new Date();
let year = currentDate.getFullYear();
let month = currentDate.getMonth();
let lastDate = getLastDateOfMonth(year, month);
console.log("今月の月末日は" + lastDate + "日です");

このコードは、指定された年と月の月末日を取得します。

○サンプルコード9：祝日判定を行う

function isHoliday(date) {
  // ここでは、2023年の祝日をサンプルとして扱います。
  const holidays = [
    "2023-01-01", "2023-01-02", "2023-01-09", "2023-02-11",
    "2023-02-12", "2023-02-23", "2023-03-20", "2023-04-29",
    "2023-05-03", "2023-05-04", "2023-05-05", "2023-07-17",
    "2023-08-11", "2023-09-18", "2023-09-23", "2023-10-09",
    "2023-11-03", "2023-11-23", "2023-12-23"
  ];

  let formattedDate = formatDate(date);
  return holidays.includes(formattedDate);
}

let today = new Date();
console.log("今日は祝日" + (isHoliday(today) ? "です" : "ではありません"));

このコードは、指定された日付が祝日かどうかを判定します。

祝日の日付を配列に格納し、その中に指定された日付が含まれているかどうかで判定します。

○サンプルコード10：指定した日数後の日付を取得する

function getFutureDate(date, days) {
  let futureDate = new Date(date);
  futureDate.setDate(futureDate.getDate() + days);
  return futureDate;
}

let currentDate = new Date();
let daysToAdd = 10;
let futureDate = getFutureDate(currentDate, daysToAdd);
console.log(daysToAdd + "日後の日付：" + formatDate(futureDate));

このコードは、指定された日数後の日付を取得します。

setDateメソッドを使って、日付に指定された日数を加算し、結果を返します。

●5. 注意点と対処法

JavaScriptのDateオブジェクトを扱う際の注意点や対処法をいくつか紹介します。

タイムゾーンの問題

JavaScriptのDateオブジェクトは、ブラウザのローカルタイムゾーンを基準として処理されます。

異なるタイムゾーン間で日付や時刻を正しく扱う場合は、UTC（協定世界時）を使うことが推奨されます。

月のインデックス

JavaScriptのDateオブジェクトでは、月のインデックスが0から始まります（0: 1月, 1: 2月, … 11: 12月）。

月の値を取得・設定する際には、この点に注意してください。

リープ年の扱い

Dateオブジェクトは、リープ年を自動的に考慮してくれますが、リープ年を判定する際には注意が必要です。

例えば、下記のコードでリープ年を判定できます。

function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

●6. カスタマイズ方法

ここでは、JavaScriptのDateオブジェクトをカスタマイズする方法をいくつか紹介します。

○サンプルコード11：独自の日付フォーマット関数を作成する

function customFormatDate(date, format) {
  let year = date.getFullYear();
  let month = ("0" + (date.getMonth() + 1)).slice(-2);
  let day = ("0" + date.getDate()).slice(-2);

  return format.replace("YYYY", year).replace("MM", month).replace("DD", day);
}

let today = new Date();
console.log("今日の日付（カスタムフォーマット）：" + customFormatDate(today, "YYYY年MM月DD日"));

このコードは、独自の日付フォーマット関数を作成し、指定されたフォーマットで日付を表示します。

文字列の置換を使って、指定されたフォーマットに従って日付を整形します。

○ サンプルコード12：特定の曜日に最も近い日付を取得する

function getNearestDateByDayOfWeek(date, targetDayOfWeek) {
  let dayOfWeek = date.getDay();
  let diff = targetDayOfWeek - dayOfWeek;
  let nearestDate = new Date(date);
  nearestDate.setDate(nearestDate.getDate() + diff);
  return nearestDate;
}

let today = new Date();
let targetDayOfWeek = 5; // 金曜日
let nearestFriday = getNearestDateByDayOfWeek(today, targetDayOfWeek);
console.log("最も近い金曜日：" + formatDate(nearestFriday));

このサンプルコードでは、特定の曜日に最も近い日付を取得する関数を作成しています。

引数で与えられた日付と曜日（0: 日曜日, 1: 月曜日, …, 6: 土曜日）を使って、最も近い日付を計算し、その日付を返します。