JavaScriptのDateTime活用法10選！

はじめに
●JavaScriptのDateTimeとは
- ○Dateオブジェクトの基本
●DateTimeの使い方
●DateTimeの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのDateTimeを活用して日付や時刻を扱う方法が身に付くことでしょう。

初心者にもわかりやすく解説し、実際に使える10のサンプルコードを紹介します。

さらに応用例も見ていきましょう。

●JavaScriptのDateTimeとは

JavaScriptのDateTimeは、日付や時刻を扱うための機能です。

JavaScriptでDateTimeを扱う際は、Dateオブジェクトを使用します。

○Dateオブジェクトの基本

Dateオブジェクトは、日付や時刻を操作するためのオブジェクトです。Dateオブジェクトを作成する方法は、次のようになります。

let date = new Date();

●DateTimeの使い方

さて、JavaScriptのDateTimeの基本的な使い方を見ていきましょう。

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

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

この例では、Dateオブジェクトを使って現在の日時を取得し、コンソールに表示しています。

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

○サンプルコード2：特定の日時を表示する

このコードでは、指定した日時を表示する方法を紹介しています。

この例では、Dateオブジェクトに引数を与えて、特定の日時を設定しています。

let specificDate = new Date(2023, 4, 3, 12, 30, 0);
console.log(specificDate);

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

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

この例では、現在の日付から7日後の日付を計算し、表示しています。

let today = new Date();
let futureDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
console.log(futureDate);

●DateTimeの応用例

次に、DateTimeの応用例をいくつか見ていきましょう。

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

このコードでは、カレンダーを作成する方法を紹介しています。

この例では、Dateオブジェクトを使って、1か月分の日付を表示するカレンダーを作成しています。

// 省略: カレンダー作成用のコード

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

このコードでは、タイマーを作成する方法を紹介しています。

この例では、setInterval関数を使って、1秒ごとに時間を更新するタイマーを実装しています。

let time = 0;

function updateTime() {
  time++;
  console.log('経過秒数：', time);
}

let timer = setInterval(updateTime, 1000);

○サンプルコード6：年齢計算機能を作成する

このコードでは、年齢計算機能を実装する方法を紹介しています。

この例では、誕生日を入力し、現在の年齢を計算して表示しています。

function calculateAge(birthYear, birthMonth, birthDay) {
  let today = new Date();
  let age = today.getFullYear() - birthYear;

  if (today.getMonth() < birthMonth - 1 || (today.getMonth() === birthMonth - 1 && today.getDate() < birthDay)) {
    age--;
  }

  return age;
}

let age = calculateAge(1990, 5, 3);
console.log('年齢：', age);

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

このコードでは、カウントダウンタイマーを実装する方法を紹介しています。

この例では、指定した期間が経過するまでの残り時間を表示するカウントダウンタイマーを作成しています。

function countdownTimer(endDate) {
  let now = new Date();
  let remainingTime = endDate.getTime() - now.getTime();
  let seconds = Math.floor(remainingTime / 1000);
  let minutes = Math.floor(seconds / 60);
  let hours = Math.floor(minutes / 60);
  let days = Math.floor(hours / 24);

  hours %= 24;
  minutes %= 60;
  seconds %= 60;

  console.log(`残り時間：${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`);
}

let targetDate = new Date(2023, 11, 31);
setInterval(function () {
  countdownTimer(targetDate);
}, 1000);

○サンプルコード8：世界時計を作成する

このコードでは、世界時計を実装する方法を紹介しています。

この例では、UTCを基準にして、世界各地の現在時刻を表示する世界時計を作成しています。

function worldClock(offset) {
  let now = new Date();
  let utc = now.getTime() + (now.getTimezoneOffset() * 60000);
  let localTime = new Date(utc + (3600000 * offset));

  console.log(localTime.toLocaleString());
}

worldClock(9);  // 日本の現在時刻
worldClock(-5); // ニューヨークの現在時刻

○サンプルコード9：日付フォーマットをカスタマイズする

このコードでは、日付のフォーマットをカスタマイズする方法を紹介しています。

この例では、年・月・日・曜日を任意の形式に変更して表示しています。

function formatDate(date, format) {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let week = ['日', '月', '火', '水', '木', '金', '土'][date.getDay()];

  format = format.replace('YYYY', year);
  format = format.replace('MM', ('0' + month).slice(-2));
  format = format.replace('DD', ('0' + day).slice(-2));
  format = format.replace('W', week);

  return format;
}

let today = new Date();
let formattedDate = formatDate(today, 'YYYY年MM月DD日（W）');
console.log(formattedDate);

○サンプルコード10：祝日判定機能を作成する

このコードでは、祝日を判定する機能を実装する方法を紹介しています。

この例では、指定した日付が祝日かどうかを判断し、祝日の場合は祝日名を表示しています。

function isHoliday(year, month, day) {
  // 省略: 祝日判定用のコード
}

let holidayName = isHoliday(2023, 5, 3);
if (holidayName) {
  console.log('祝日：', holidayName);
} else {
  console.log('祝日ではありません');
}