JavaScriptのDateTime活用法10選!

JavaScript DateTime の使い方と応用例 JS

 

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

このサービスはSSPによる協力の下、運営されています。

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

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

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

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

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

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

はじめに

この記事を読めば、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('祝日ではありません');
}

●注意点と対処法

JavaScriptのDateTimeを扱う際には、タイムゾーンや閏年に注意が必要です。

これらの問題を回避するために、日付計算用のライブラリを使用することを検討してください。

●カスタマイズ方法

サンプルコードを参考に、独自の日付処理や時刻処理を実装することができます。

また、JavaScript以外の言語やライブラリを使って同様の処理を実現することも可能です。

まとめ

この記事では、JavaScriptのDateTimeを活用して日付や時刻を扱う方法について解説しました。

また、具体的なサンプルコードを用いて、実際に使える機能を紹介しました。

これらの知識を基に、日付や時刻を扱うアプリケーションを作成してみてください。