format_list_bulleted
【JavaScript】時間・日付・時刻の処理をする方法について解説
最終更新日時:2022-06-06 09:50:23



本記事では、JavaScriptで現在の日付・時刻を操作するDateオブジェクトについて説明します。また、指定時間経過後、一度だけ関数を実行するsetTimeoutメソッド、指定した間隔で、関数を実行するsetIntervalメソッドについて説明します。

 Dateオブジェクトについて説明

「Dateオブジェクトとは」を使って次のコードのように4通りの方法で日付・時間を取得します。ここで注意して欲しいのがDateはvarやletなどのデータ型はなく、オブジェクトであるという点です。なので、コンストラクタを経由してオブジェクトを生成する必要があります。(*1)では本日の日付・時刻を取得しています。(*2)では引数に年月日を指定して、その日付を取得しています。また、(*3)では、(*2)のような年月日だけでなくミリ秒単位まで細かく指定しています。(*4)では、1970/01/01から経過時間をミリ秒単位で指定して、日付・時刻を取得しています。 

var now_day = new Date()  //現在の時間を元にDateオブジェクトを生成(*1)
var that_day_1 = new Date('2020/02/13') //指定した日付を元にDateオブジェクトを生成(*2)
var that_day_2 = new Date(2020,03,30,23,55,30,500) //指定した日付、時間を元にDateオブジェクトを生成(*3)
var that_day_3 = new Date(1611782200000);//1970/01/01から経過した時間(ミリ秒)時間を元にDateオブジェクトを生成(*4)

console.log(now_day)    // Thu Feb 13 2020 15:48:31 GMT+0900 (日本標準時)
console.log(that_day_1) // Thu Feb 13 2020 00:00:00 GMT+0900 (日本標準時)
console.log(that_day_2) // Thu Apr 30 2020 23:55:30 GMT+0900 (日本標準時)
console.log(that_day_3) // Thu Jan 28 2021 06:16:40 GMT+0900 (日本標準時)

Dateオブジェクトの操作方法

Dateオブジェクトから年、月、曜日、日、時、分、秒をそれぞれ単独で取得する方法やDateオブジェクトから単独でそれらを設定する方法を説明します。

単独で日付・時刻を取得する方法

単独で日付・時刻を取得する場合は、次の表にあるメソッドを用いて、出力します。

項目メソッド名
年(Year)getFullYear()
月(Month)getMonth()
曜日(Day of the week)getDay()
日(Date)getDate()
時(Hour)getHour()
分(Minute)getMinutes()
秒(Second)getSeconds()
ミリ秒(Millisecond)getMilliseconds()
1970年1月1日0時0分0秒からの経過時間(ミリ秒)getTime()

上の表のメソッドを用いて実際の使用方法を次のコードに示します。

var that_day_1 = new Date('2020/02/13') //指定した日付を元にDateオブジェクトを生成(*2)
console.log(that_day_1) // Thu Feb 13 2020 00:00:00 GMT+0900 (日本標準時)
console.log(that_day_1.getFullYear()) //2020
console.log(that_day_1.getMonth()) //1
console.log(that_day_1.getMonth()+1+"月") //2月
console.log(that_day_1.getDay()) //3(*ここについて、後ほど説明します)

ここで、注意して欲しいのがgetMonth()メソッドが0から11までの値を出力し、X月(Xは1~12)から1引いた値が出力されることです。ここではに1足すことで正しい月を出力することができます。また、X月に対応したgetMonth()が返す値については次の表に示してあります。

月に対応するgetMonthの値
1月0
2月1
3月2
4月3
5月4
6月5
7月6
8月7
9月8
10月9
11月10
12月11

また、曜日を取得する場合、getDay()メソッドで取得するのですが、getDay()メソッドはX曜日のような文字列ではなく次の表のようにX曜日に対応した数字を返します。なので、実際にX曜日として取得するには、次のコードのように、X曜日の配列を作成し、getDay()メソッドが返した数字を参照して、”X曜日”と表示します。

var that_day_1 = new Date('2020/02/13') //指定した日付を元にDateオブジェクトを生成(*2)
var week = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]; //曜日の配列を作成
console.log(week[that_day_1.getDay()]) //木曜日
曜日曜日に対応するgetDay()の値
日曜日0
月曜日1
火曜日2
水曜日3
木曜日4
金曜日5
土曜日6

単独で指定した日付・時刻を設定する方法

単独で指定した日付・時刻を設定する場合次の表のメソッドを用いて設定します。実際の使用方法を次のコードに示します。ここでもsetMonth()は0から11の値を引数とするのでX月の場合、Xから1引いて入力すること(1月なら0と入力)に注意してください

var that_day_2 = new Date(2020,03,30,23,55,30,500) //指定した日付、時間を元にDateオブジェクトを生成(*3)
console.log(that_day_2) // Thu Apr 30 2020 23:55:30 GMT+0900 (日本標準時)
that_day_2.setFullYear(2030) //年を2030年に変更
that_day_2.setMonth(0)  //月を1月に変更
that_day_2.setHours(1)  //時間を1時に変更
console.log(that_day_2) //Wed Jan 30 2030 01:55:30 GMT+0900 (日本標準時)
項目メソッド名
年(Year)getFullYear()
月(Month)getMonth()
曜日(Day of the week)getDay()
日(Date)getDate()
時(Hour)getHour()
分(Minute)getMinutes()
秒(Second)getSeconds()
ミリ秒(Millisecond)getMilliseconds()
1970年1月1日0時0分0秒からの経過時間(ミリ秒)getTime()

年月日を加算・減算する方法

Dateオブジェクトには直接、日付・時刻を加算・減算するメソッドはありません。まず、Getメソッドを用いて日付を取得し、次に、取得した値に対し、加算・減算を行います。最後にSetメソッドで設定しなおします。そうすることで、日付・時刻を加算・減算することができます。次のコードで例を示します。

var that_day_1 = new Date('2020/02/13') //指定した日付を元にDateオブジェクトを生成(*2)
console.log(that_day_1) // Thu Feb 13 2020 00:00:00 GMT+0900 (日本標準時)
that_day_1.setFullYear(that_day_1.getFullYear()+1) //一年増やす
that_day_1.setHours(that_day_1.getHours()+10)  //10時間増やす
console.log(that_day_1) //Sat Feb 13 2021 10:00:00 GMT+0900 (日本標準時) 

setTimeoutメソッドについて説明

setTimeoutメソッドとは

setTimeoutメソッドとは、指定した時間後に処理を実行するメソッドです。また、setTimeoutメソッドは指定した時間の後もタイマーが動いているため、clearTimeoutメソッドを用いてタイマーを止めることもできます。次にメソッドのコードの書き方を示します。setTimeoutメソッドでは、実行したい関数を第1引数に、実行したい時間[ミリ秒]を第2引数に渡します。

setTimeout(function(関数), 時間[ミリ秒])
clearTimeout(function(関数))

実装例

このメソッドを用いて次のコードに示したような5秒後に文が変わるアプリを作成することができます。

(index.html)

<html>
 <head>
   <meta http-equiv="content-type" charset="utf-8">
 </head>
 <body>
   <h2>5秒経つと...</h2>
   <div id="time">何かが変わる</div>
   <script src="./test.js" ></script>
 </body>
</html>

(test.js)

var time = document.getElementById("time")
var count = function(){
  time.innerHTML = "5秒経ちました"
  clearTimeout(count)//タイマーを止める
}
setTimeout(count, 5000);

実装結果


setIntervalメソッドについて説明

setIntervalメソッドとは

setIntervalメソッドとは、指定した時間間隔で関数を実行するメソッドです。またclearIntervalメソッドを用いて実行を止めることもできます。次に両メソッドのコードの書き方を示します。setIntervalメソッドでは、実行したい関数を第1引数に、実行したい時間間隔[ミリ秒]を第2引数に渡します。clearIntervalメソッドでは、setIntervalメソッドで実行されている関数を引数として渡し、実行を止めます。

setInterval(function(関数), 時間[ミリ秒]clearInterval(function(関数))

実装例

このメソッドを用いて次のコードに示したようなカウントダウンアプリを作成することができます。

(index.html)

<html>
  <head>
   <meta http-equiv="content-type" charset="utf-8">
  </head>
  <body>
    <h2>カウントダウン</h2>
    <div id="time"></div>
    <script src="./test.js" ></script>
  </body>
</html>

(test.js)

var time = document.getElementById("time")
var cnt = 10
var count_down = function(){
   cnt--
   if(cnt < 0){
       time.innerHTML = "10秒経ちました"
       clearInterval(count_down)//タイマーを止める
   }else{
       time.innerHTML = cnt
   }
}
setInterval(count_down, 1000)

 実装結果

この記事のまとめ

本記事ではJavaScriptで現在の日付・時刻を操作する方法について説明しました!最後に記事の要点をまとめてみましょう。

  • Dateオブジェクトを用いることで、今日の日付・時刻や指定した日付・時刻を取得することができる
  • Dateオブジェクトのメソッドを用いることで、年月日の加算や減算ができる
  • setTimeoutメソッドを用いることで指定時間経過後に関数を実行することができる
  • setIntervalメソッドを用いることで一定時間間隔で処理を実行することができる

これらのオブジェクトやメソッドを是非活用して開発してみましょう!