読み込み中...

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

JavaScript Dateオブジェクトの使い方イメージ JS
2023.04.07
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptのDateオブジェクトは、ウェブ開発において日付と時刻を扱う上で欠かせない存在です。

本記事では、Dateオブジェクトの基本的な使い方から応用例まで、初心者の方にも理解しやすいよう丁寧に解説していきます。

サンプルコードも豊富に用意しましたので、実際に手を動かしながら学んでいただけます。

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

Dateオブジェクトは、JavaScriptに組み込まれた日付と時刻を操作するための機能です。

単純な日付の表示から複雑な日時計算まで、幅広いニーズに対応しています。

Dateオブジェクトを使いこなせば、カレンダーアプリやスケジュール管理システムなど、時間に関連するさまざまなアプリケーションの開発が可能になります。

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

Dateオブジェクトの使い方を理解するには、まず基本的な操作から始めるのが良いでしょう。

ここでは、日付の取得や設定といった基本的なタスクを行うためのコード例を紹介します。

○現在の日付と時刻を取得する

まずは、現在の日付と時刻を取得する方法から見ていきましょう。

次のコードを実行すると、現在の日時が表示されます。

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

このコードでは、new Date()を使って新しいDateオブジェクトを生成しています。

引数なしでnew Date()を呼び出すと、現在の日時が設定されたオブジェクトが作成されます。

○特定の日付を設定する

次に、特定の日付を設定する方法を見てみましょう。

次のコードでは、2023年4月7日の15時30分を指定しています。

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

このように、文字列形式で日付と時刻を指定することで、任意の日時を持つDateオブジェクトを作成できます。

ISO 8601形式の文字列を使用すると、日付と時刻を明確に指定できて便利です。

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

基本的な使い方を理解したら、次は応用例を見ていきましょう。

実際のプロジェクトでよく使われるシナリオを想定したコード例を紹介します。

○カウントダウンタイマーを作成する

イベントまでの残り時間を表示するカウントダウンタイマーは、ウェブサイトでよく見かける機能です。

次のコードで、簡単なカウントダウンタイマーを作成できます。

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秒ごとに残り時間を計算し、表示しています。

目標日時に達すると、”Happy New Year!”というメッセージが表示されます。

○経過日数を計算する

2つの日付の間の日数を計算することも、Dateオブジェクトを使えば簡単です。

次のコードで、指定した2つの日付間の経過日数を計算できます。

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つのDateオブジェクトの差分をミリ秒単位で求め、それを日数に変換しています。

Math.floorを使用して小数点以下を切り捨てることで、整数の日数を得ています。

○曜日を取得する

特定の日付の曜日を取得するのも、Dateオブジェクトの機能を使えば簡単です。

次のコードで、現在の曜日を日本語で表示できます。

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

getDay()メソッドは0（日曜日）から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日ずつ日付を進めながら、各日付を表示しています。

setDate()メソッドを使って日付を1日ずつ増やしています。

○日付のフォーマットを変更する

Dateオブジェクトから取得した日付を、特定のフォーマットで表示したい場合があります。

次のコードで、日付を”YYYY-MM-DD”形式でフォーマットできます。

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));

このformatDate関数では、年、月、日をそれぞれ取得し、2桁の数字になるように調整しています。

月は0から始まるため、1を加えています。

○月末日を取得する

カレンダーを作成する際など、各月の最終日を知る必要がある場合があります。

次のコードで、指定した年月の月末日を取得できます。

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 + "日です");

この関数では、次の月の0日目（つまり前月の最終日）を指定することで、月末日を取得しています。

○祝日判定を行う

特定の日付が祝日かどうかを判定したい場合があります。

次のコードでは、2023年の日本の祝日を例として、祝日判定を行う関数を作成しています。

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) ? "です" : "ではありません"));

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

実際のアプリケーションでは、より複雑な祝日判定ロジックが必要になる場合があります。

○指定した日数後の日付を取得する

特定の日付から指定した日数後の日付を取得したい場合があります。

次のコードで、そのような計算を行うことができます。

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()メソッドを使って指定された日数を現在の日付に加算しています。

新しいDateオブジェクトを作成することで、元の日付を変更せずに計算を行っています。

●注意点と対処法

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;
}

この関数は、グレゴリオ暦におけるリープ年の規則に基づいて判定を行います。

●カスタマイズ方法

Dateオブジェクトの基本的な機能を拡張して、より柔軟な日付処理を行うことができます。

ここでは、カスタマイズの例をいくつか紹介します。

○独自の日付フォーマット関数を作成する

特定のフォーマットで日付を表示したい場合、次のような関数を作成できます。

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日"));

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

○特定の曜日に最も近い日付を取得する

特定の曜日に最も近い日付を取得したい場合、次のような関数を作成できます。

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が土曜日）を使用して、最も近い日付を計算しています。

まとめ

本記事では、JavaScriptのDateオブジェクトについて、基本的な使い方から応用例、注意点、カスタマイズ方法まで幅広く解説しました。

Dateオブジェクトは、ウェブアプリケーションにおける時間関連の処理において非常に重要な役割を果たします。

JavaScriptのDateオブジェクトは非常に柔軟で強力なツールですが、同時に細かな注意点も多いです。

本記事で紹介した基本的な使い方や応用例、注意点を押さえた上で、実際のプロジェクトで活用していくことをお勧めします。