JavaScriptで日時(Date)を使う方法！(取得/加算/減算)

JavaScriptでDateオブジェクトを使って、日付を操作する方法について書いています。
記事の内容については、下記になります。

Dateオブジェクトを使って日時を操作は可能ですが、Day.jsなどのライブラリを使うと、もっと簡単に操作できます。
Day.jsについては、下記に書いているので、確認してみてください。

JavaScriptで日付操作するDay.jsの使い方！挙動検証12個

Day.jsの使い方と、実際に使って検証したサンプルコードを載せています。Day.jsは、JavaScriptで日付を使う際に簡単に処理できるライブラリです。公式ドキュメントはこちらになります。今回はVue.jsにnpmで導入して使用してみ...

codelikes.com

2022.04.20

Dateオブジェクトを使う

newを使ってオブジェクトを作成して、メソッドを呼び出すことで、Dateオブジェクトを使うことができます。
例えば、現在日時を取得するには、下記のようにします。

let date = new Date()

let year = date.getFullYear() // 年
let month = date.getMonth() + 1 // 月
let day = date.getDate() // 日

let hour = date.getHours() // 時
let minute = date.getMinutes() // 分
let second = date.getSeconds() // 秒

let timeText = `${year}年${month}月${day}日 ${hour}時${minute}分${second}秒`
console.log(timeText) // 2023年9月30日 12時10分18秒

最初にDateをnewして、date変数にオブジェクトを作成しています。

次の行から、年月日と時分秒を取得しています。
Dateオブジェクトから、下記のようにメソッドを呼んで、日付・時間を取得しています。

getMonthメソッドの返り値が0から11なので、「+1」しないと、表示するための月にならないので気をつけたいところです。

取得した内容をテンプレートリテラルで文字列として、埋め込んでtimeText変数に入れて出力しました。
結果、現在の年月日と時間・分・秒が返ってきて「2023年9月30日 12時10分18秒」になりました。

日時を指定して、Dateオブジェクトを作る

newでDateオブジェクトを作成するときに、対応したフォーマットの文字列を渡すことで、指定した日時のDateオブジェクトを作成することができます。
例えば、下記のように指定することができます。

let date = new Date('2020-01-01 12:12:12')

こうすると、「2020年01月01日」の「12時12分12秒」が設定されたDateオブジェクトになります。
内容を確認するために、先ほどと同様に出力してみました。

let date = new Date('2020-01-01 12:12:12')

let year = date.getFullYear() // 年
let month = date.getMonth() + 1 // 月
let day = date.getDate() // 日

let hour = date.getHours() // 時
let minute = date.getMinutes() // 分
let second = date.getSeconds() // 秒

let timeText = `${year}年${month}月${day}日 ${hour}時${minute}分${second}秒`
console.log(timeText) // 2020年1月1日 12時12分12秒

Dateオブジェクトで日時の加算・減算

Dateオブジェクトのset系メソッドを使うことで、日付の加算や減算ができます。

年を加算する

DateオブジェクトからsetFullYearメソッドを呼び出して、年を設定することができます。

let date = new Date('2023-09-30 12:00:00')
date.setFullYear(date.getFullYear() + 2)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`) // 2025年9月30日

「2023-09-30 12:00:00」のDateオブジェクトをdate変数に作成しました。
次の行で、setFullYearメソッドを呼び出しています。現在年に「+2」することで2年後を設定しています。

出力すると、2年後の「2025年9月30日」になりました。

減算する

年を減算するときには、同様にして、現在年から引いてあげると良いです。

let date = new Date('2023-09-30 12:00:00')
date.setFullYear(date.getFullYear() - 3)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`) // 2020年9月30日

先ほどと同じようにsetFullYearメソッドで、「2023年9月30日」から「-3」しています。
出力すると、3年前の「2020年9月30日」となりました。

月を加算する

DateオブジェクトからsetMonthメソッドを呼び出して、月を設定することができます。

let date = new Date('2023-09-30 12:00:00')
date.setMonth(date.getMonth() + 5)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`) // 2024年3月1日

同様にして「2023-09-30 12:00:00」のDateオブジェクトをdate変数に作成しています。
次の行で、getMonthメソッドを呼び出しています。現在月に「+5」することで5ヶ月後を設定しています。

単純に5ヶ月後であれば2月ですが、2月には30日がないため、調整されて次の月が返ってきます。
出力すると、「2024年3月1日」になりました。

使用するときには、月末や月初に気をつけた方が良さそうです。

減算する

月を減算するときには、同様にして、現在月から引いてあげると良いです。

let date = new Date('2023-09-30 12:00:00')
date.setMonth(date.getMonth() - 3)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`) // 2023年6月30日

先ほどと同じようにsetMonthメソッドで、「2023年9月30日」から「-3」ヶ月しています。
出力すると、3ヶ月前の「2023年6月30日」となりました。
「-7」とすると2月になりますが、「30」日がないので、「2023年3月2日」となります。

日を加算する

DateオブジェクトからsetDateメソッドを呼び出して、月を設定することができます。

let date = new Date('2023-09-30 12:00:00')
date.setDate(date.getDate() + 11)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`) // 2023年10月11日

同様にして「2023-09-30 12:00:00」のDateオブジェクトをdate変数に作成しています。
次の行で、setDateメソッドを呼び出しています。

現在日に「+11」することで11日後を設定しています。
出力すると「2023年10月11日」になりました。ちゃんと次の月に変わって、11日後となりました。

減算する

日を減算するときには、同様にして、現在日から引いてあげると良いです。

let date = new Date('2023-09-30 12:00:00')
date.setDate(date.getDate() - 18)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`) // 2023年9月12日

先ほどと同じようにsetDateメソッドで、「2023年9月30日」から「-18」日としています。
出力すると、18日前の「2023年9月12日」となりました。

時を加算する

DateオブジェクトからsetHoursメソッドを呼び出して、時を設定することができます。

let date = new Date('2023-09-30 12:00:00')
date.setHours(date.getHours() + 13)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`) // 2023年10月1日 1時0分0秒

同様にして「2023-09-30 12:00:00」のDateオブジェクトをdate変数に作成しています。
次の行で、setHoursメソッドを呼び出しています。

現在の時間に「+13」時間しているので、24時間を超えて次の日になります。
出力すると「2023年10月1日 1時0分0秒」となりました。

減算する

時を減算するときには、同様にして、現在時から引いてあげると良いです。

let date = new Date('2023-09-30 12:00:00')
date.setHours(date.getHours() - 15)

console.log(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`) // 2023年9月29日 21時0分0秒

先ほどと同じようにsetHoursメソッドで、「12時0分0秒」から「-15」時間としています。
0時を超えるので、前の日に戻ります。

出力すると、15時間前の「2023年9月29日 21時0分0秒」となりました。

分を加算する

DateオブジェクトからsetMinutesメソッドを呼び出して、時を設定することができます。

let date = new Date('2023-09-30 12:00:00')
date.setMinutes(date.getMinutes() + 100)

console.log(`${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`) // 13時40分0秒

同様にして「2023-09-30 12:00:00」のDateオブジェクトをdate変数に作成しています。
次の行で、setMinutesメソッドを呼び出しています。

現在の分から「+100」分しているので、60分を超えて、次の13時になります。
時刻だけ出力しています。出力すると「13時40分0秒」となりました。

減算する

分を減算するときには、同様にして、現在分から引いてあげると良いです。

let date = new Date('2023-09-30 12:00:00')
date.setMinutes(date.getMinutes() - 100)

console.log(`${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`) // 10時20分0秒

先ほどと同じようにsetMinutesメソッドで、「12時0分0秒」から「-100」分としています。
60分を超えているので、2時間前の10時になります。

出力すると、100分前の「10時20分0秒」となりました。

秒を加算する

DateオブジェクトからsetSecondsメソッドを呼び出して、秒を設定することができます。

let date = new Date('2023-09-30 12:00:00')
date.setSeconds(date.getSeconds() + 100)

console.log(`${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`) // 12時1分40秒

同様にして「2023-09-30 12:00:00」のDateオブジェクトをdate変数に作成しています。
次の行で、setSecondsメソッドを呼び出しています。

現在の秒から「+100」分しているので、60秒を超えて、次の分になります。
出力すると、分に繰り上がって「12時1分40秒」となりました。

減算する

秒を減算するときには、同様にして、現在秒から引いてあげると良いです。

let date = new Date('2023-09-30 12:00:00')
date.setSeconds(date.getSeconds() - 100)

console.log(`${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`) // 11時58分20秒

先ほどと同じようにsetSecondsメソッドで、「12時0分0秒」から「-100」秒としています。
60秒を超えているので、2分前の58分になります。

出力すると、100秒前の「11時58分20秒」となりました。

Dateオブジェクトのメソッドまとめ

今回使用したDateオブジェクトのメソッドについて、内容を一覧にまとめました。

日時(Date)を使う方法まとめ

今回はJavaScriptで日時をあつかえる、Dateオブジェクトについて確認していきました。

getMonthメソッドでは0から11が返ってくるのに注意したいところです。
また、月の日数が違うことを意識して、月末に気をつけて使っていきたいですね。