Ugo

Webエンジニアのためのプログラミング情報サイト

JavaScriptのDateオブジェクトを使いこなす！日付・時間のフォーマットや加算・比較。

JavaScriptのDateオブジェクトを使いこなす！日付・時間のフォーマットや加算・比較。

この記事では、JavaScriptのDateオブジェクトについて基本的な使い方や仕様などを説明したい。

Dateオブジェクトは日付や時間情報を操作するためのオブジェクトであり、業務においては非常によく使われる。

しかし、奥の深いオブジェクトでもあり、仕様などよく理解しておかないと思わぬエラーを招くこととなる。

では、見ていこう。

目次

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

まずはJavaScriptにおけるDataオブジェクトについて簡単に確認しよう。

DateオブジェクトはJavaScriptに標準で用意されているオブジェクトであり、日付や時間にまつわる情報を操作をすることができる。

Dateオブジェクトは数値型の値を保持しており、UTCの1970年1月1日からの経過時間がミリ秒の単位で納められている。

Dateオブジェクトには多くの標準関数が用意されている。

詳細は以下のサイトから確認することができる。MDN Web Docs:: Date

Dateオブジェクトを作る

新しいDateオブジェクトの作成方法から確認していこう。

現在の日付・時間のDateを生成する

新しいDateオブジェクトを生成する場合は以下のようにDateコンストラクタを使用する。

const dateOne = Date();
const dateTwo = new Date();

生成されたDateオブジェクトには生成した時点での日付・時刻が納められている。

日付や日時を指定して生成する

コンストラクタに引数を渡せば、日付を指定して新しいインスタンスを生成することができる。

その際には以下のようなフォーマットを使用することができる。

const date = new Date(2022, 3 , 12);
const date = new Date('2022-03-12T12:30:00');
const date = new Date('March 12, 2022 12:30:00');
const date = new Date(1647084600000);

Date型の使い方

JavaScriptのDate型は多くの使用例が考えられる。

ここでは、よく使用するものを目的別にまとめてみた。

よく使う関数はDateUtiなどにまとめておくと、再利用しやすいだろう。

日付や時間を変更する

Dateオブジェクトの日付を早めたり、遅らせたりする場合は、以下のようにsetDate関数を使用する。

月を跨いでいる場合でも日付は正しく変更される。

const date = new Date(2022, 10, 15);
console.log('元の日付:' + date.toString());

date.setDate(date.getDate() + 35);
console.log('変更後の日付:' + date.toString());

時間を早めたり、遅らせたりする場合はsetHours関数を使用する。

const time = new Date('December 17, 2022 23:00:00');
console.log('元の日付 & 時間:' + time.toString());

time.setTime(time.getTime() + 5 * 60 * 60 * 1000); // 5時間をミリ秒に変換 
console.log('変更後の日付 & 時間:' + time.toString());

同じ日付かチェックする

2つのDateオブジェクトが同じ日付かどうかチェックしたい場合は以下のような関数を作成して、比較する2つのオブジェクトを引数として渡すといいだろう。

public isSameDay(dateA, dateB) {
  return dateA.getFullYear() === dateB.getFullYear() &&
    dateA.getMonth() === dateB.getMonth() &&
    dateA.getDate()=== dateB.getDate()
}

どちらの日付が若いかチェックする

2つのDateオブジェクトを比較してどちらが早いかどうかを知りたい場合は、単純に「<>=」などの比較記号を使用すればいい。

const dateOne = new Date(2022, 5, 20);
const dateTwo = new Date(2022, 5, 15);
console.log('dateOneはdateTwoよりも早い?:' + (dateOne < dateTwo));

Dateオブジェクトをフォーマットする

Dateオブジェクトを希望するフォーマットに整形する方法を見ていく。

ここでは日本で一般的に使われる「2022-5-12」や「2022年5月12日」といったフォーマットへ整形する。

「YYYY-MM–DD」にフォーマットする

Dateオブジェクトを「YYYY-MM-DD」に整形する場合は以下のような関数を用意するといいだろう。

public static formatDate(date: Date) {
  return new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
    .toISOString()
    .split("T")[0];
}

TimezonOffsetはローカル設定による時差を埋めるために引かれている。

年月日にフォーマットする

Dateオブジェクトを年月日含めた形で出力したい時は以下のような関数を用意する。

public static formatJapDate(date: Date) {
  return date.getFullYear() + '年' +　(date.getMonth() + 1) + '月' + date.getDate() + '日';
}

曜日を出力する

年月日と一緒に曜日も出力したい場合は、以下のように曜日の配列を用意してそこから文字を取得するようにしよう。

public static japWeekDays = ['日曜日', '月曜日', '火曜日',　'水曜日', '木曜日', '金曜日', '土曜日']
 
public static formatJapDate(date: Date) {
  return date.getFullYear() + '年' +　(date.getMonth() + 1) + '月' + date.getDate() + '日 ' 
    + DateUtil.japWeekDays[date.getDay()];
}
MENU