JavaScriptで日付操作！New Dateの使い方10選

はじめに

この記事を読めば、JavaScriptのNew Dateを使って日付操作ができるようになります。

初心者の方でも分かりやすい説明と、実用的なサンプルコードで日付操作の基本から応用までを網羅しています。

JavaScriptを使った日付操作に不安がある方も、この記事で解決できるでしょう。

●JavaScriptのNew Dateとは

New Dateは、JavaScriptで日付操作を行うためのオブジェクトです。

日付や時刻を取得、設定、加算・減算、フォーマット変更など、さまざまな日付操作が可能です。

○New Dateの基本

JavaScriptで日付操作を行うには、まずDateオブジェクトを生成します。

次のようにnew Date()を使用してDateオブジェクトを作成できます。

const now = new Date();
console.log(now); // 現在の日時が表示される

●New Dateの使い方

さまざまな日付操作ができるNew Dateの使い方を、サンプルコードを交えて紹介します。

○サンプルコード1：現在の日時を表示する

このコードでは、現在の日時を取得して表示する方法を紹介しています。

この例では、new Date()を使って現在の日時を取得し、コンソールに表示しています。

const now = new Date();
console.log(now); // 現在の日時が表示される

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

このコードでは、特定の日付を生成する方法を紹介しています。

この例では、new Date(年, 月-1, 日)を使って指定した日付を生成し、コンソールに表示しています。

const specificDate = new Date(2023, 4, 6); // 2023年5月6日を生成
console.log(specificDate); // 2023年5月6日が表示される

○サンプルコード3：日付の加算・減算を行う

このコードでは、日付の加算・減算を行う方法を紹介しています。

この例では、現在の日時から1週間後の日時を計算し、コンソールに表示しています。

const now = new Date();
const oneWeekLater = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
console.log(oneWeekLater); // 現在の日時から1週間後の日時が表示される

○サンプルコード4：日付の比較を行う

このコードでは、2つの日付を比較して結果を判定する方法を紹介しています。

この例では、date1.getTime()とdate2.getTime()を使って2つの日付のミリ秒表現を取得し、その大小を比較しています。

const date1 = new Date(2023, 4, 6);
const date2 = new Date(2023, 4, 10);

if (date1.getTime() < date2.getTime()) {
  console.log("date1はdate2より前です。");
} else if (date1.getTime() > date2.getTime()) {
  console.log("date1はdate2より後です。");
} else {
  console.log("date1とdate2は同じ日です。");
}

●New Dateの応用例

実用的な応用例をいくつか紹介します。これらのサンプルコードを参考に、日付操作を活用したアプリケーションを作成できます。

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

このコードでは、指定された日時までの残り時間をカウントダウン表示する方法を紹介しています。

この例では、setInterval関数を使って1秒ごとに現在時刻と指定日時の差を計算し、表示しています。

const targetDate = new Date(2023, 11, 31, 23, 59, 59);

const countdown = setInterval(() => {
  const now = new Date();
  const diff = targetDate - now;
  if (diff <= 0) {
    clearInterval(countdown);
    console.log("カウントダウン終了");
  } else {
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    console.log(`${days}日${hours}時間${minutes}分${seconds}秒`);
  }
}, 1000);

○サンプルコード6：カレンダーを作成する

のコードでは、指定された年月のカレンダーを作成する方法を紹介しています。

この例では、Dateオブジェクトを使って指定年月の日数と、月初の曜日を取得し、カレンダーを生成しています。

function createCalendar(year, month) {
  const startDate = new Date(year, month - 1, 1);
  const endDate = new Date(year, month, 0);
  const daysInMonth = endDate.getDate();
  const startDay = startDate.getDay();

  console.log(`    ${year}年${month}月`);
  console.log("日 月 火 水 木 金 土");

  let calendar = "";
  for (let i = 0; i < startDay; i++) {
    calendar += "   ";
  }

  for (let day = 1; day <= daysInMonth; day++) {
    calendar += day.toString().padStart(2, " ") + " ";
    if ((startDay + day) % 7 === 0) {
      calendar += "\n";
    }
  }
  console.log(calendar);
}

createCalendar(2023, 5);

○サンプルコード7：特定期間内の日付リストを生成する

このコードでは、特定期間内の日付リストを生成する方法を紹介しています。

この例では、開始日と終了日を指定し、その間の日付リストを生成しています。

function createDateList(startDate, endDate) {
  const dateList = [];
  const currentDate = new Date(startDate);

  while (currentDate <= endDate) {
    dateList.push(new Date(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
  }

  return dateList;
}

const startDate = new Date(2023, 4, 1);
const endDate = new Date(2023, 4, 7);
const dateList = createDateList(startDate, endDate);
console.log(dateList);

○サンプルコード8：曜日別に処理を分岐する

このコードでは、曜日に応じて処理を分岐する方法を紹介しています。

この例では、指定日の曜日を取得し、曜日ごとに異なるメッセージを出力しています。

function showMessageByDay(date) {
  const day = date.getDay();

  switch (day) {
    case 0:
      console.log("日曜日です。");
      break;
    case 1:
      console.log("月曜日です。");
      break;
    case 2:
      console.log("火曜日です。");
      break;
    case 3:
      console.log("水曜日です。");
      break;
    case 4:
      console.log("木曜日です。");
      break;
    case 5:
      console.log("金曜日です。");
      break;
    case 6:
      console.log("土曜日です。");
      break;
    default:
      console.log("曜日が取得できません。");
  }
}

const date = new Date(2023, 4, 6);
showMessageByDay(date);

○サンプルコード9：経過時間を表示する

このコードでは、ある日付から現在までの経過時間を表示する方法を紹介しています。

この例では、指定された日付と現在日時を比較し、経過した時間、分、秒を表示しています。

function showElapsedTime(date) {
  const now = new Date();
  const elapsedTime = now - date;
  const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
  const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);

  console.log(`経過時間：${hours}時間${minutes}分${seconds}秒`);
}

const date = new Date(2023, 4, 6, 10, 30);
showElapsedTime(date);

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

このコードでは、Dateオブジェクトの日付を任意の形式に変換する方法を紹介しています。

この例では、指定されたフォーマットに従って、日付を変換して表示しています。

function formatDate(date, format) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hour = date.getHours().toString().padStart(2, "0");
  const minute = date.getMinutes().toString().padStart(2, "0");
  const second = date.getSeconds().toString().padStart(2, "0");

  return format
    .replace("YYYY", year)
    .replace("MM", month)
    .replace("DD", day)
    .replace("HH", hour)
    .replace("mm", minute)
    .replace("ss", second);
}

const date = new Date(2023, 4, 6, 10, 30);
const formattedDate = formatDate(date, "YYYY/MM/DD HH:mm:ss");
console.log(formattedDate);  // "2023/05/06 10:30:00" と表示されます

●注意点と対処法

JavaScriptのDateオブジェクトは、ブラウザや実行環境によって挙動が異なる場合があります。

そのため、異なる環境で予期しない結果が生じないよう、一般的な対処法としては、日付操作ライブラリを使用することが推奨されています。

代表的なライブラリには、「Moment.js」や「date-fns」、「Day.js」などがあります。

●カスタマイズ方法

ここで紹介したサンプルコードは基本的なものですが、必要に応じてカスタマイズして使用することができます。

例えば、日付の表示形式や、処理の分岐を変更することが可能です。

また、日付操作ライブラリを利用することで、より複雑な日付操作や、さまざまなフォーマットの対応が容易になります。

まとめ

本記事では、JavaScriptのDateオブジェクトを使用した日付操作について、いくつかのサンプルコードを通じて解説しました。

日付操作はプログラム開発で頻繁に使用されるため、これらの知識を活用し、効率的にコーディングを行ってください。

また、必要に応じて日付操作ライブラリを利用することで、より柔軟な日付操作が可能になります。