JavaScriptにおける日時の扱い方

公開日：2020.06.04　最終更新日:2020.06.21

JavaScriptで、今回はDateオブジェクトを用いた日時の扱い方を紹介します！最終的には、現在の時刻からどのくらい後という入力対して、計算を行い○年○月○日 ○時○分の形式の文字列として出力する関数を作成することを目標とします。では、基本事項から紹介していきます。

Dateオブジェクトとは

Dateオブジェクトとは、日付や時刻を扱うことができるDateインスタンスを作成します。時刻の基準が1970年１月１日(UTC)で、その時刻から始まるミリ秒単位の時刻値です。

Dateオブジェクトを作成するために以下の構文を使用します。

new Date();
// 出力　Mon JUN 1 2020 15:55:22 GMT+0900 (日本標準時)

引数を与えない時は、現在の時刻（標準時）で取得します。

日付のフォーマット方法

日付をフォーマットする方法として、いくつかのメソッドを使用して日付情報を取得します。

メソッドはそれぞれ単位ごとに用意されていて、年を取得したい場合にはgetFullYear()であり、getMonth(),getDate(),getHours(),getMinutes()のように記述します。ただし、注意が必要なのが、月の取得メソッドであるgetMonth()は０〜１１の整数値であるため、フォーマットする際は取得した整数値に1を足した文字列に変換する必要があることです。

もう一つ間違いやすい点としてgetDay()で日にちを取得しようとすると、これは曜日を取得するメソッドなので０〜６の整数値が取得されます。日にちを取得するメソッドはgetDate()であるので注意しましょう！

単位	メソッド	取得/代入
年	getFullYear()/setFullYear()	４桁の整数値
月	getMonth()/setMonth()	0~11の整数値(実際の月にするには+1)
日	getDate()/setDate()	1~31の整数値
曜日	getDay()/setDay()	0~6の整数値（日にちではないので注意！）
時	getHours()/setHours()	0~23の整数値
分	getMinutes()/setMinutes()	0~59の整数値

先程のget~()のメソッドはその単位のデータを取得するメソッドですが、データの中身を書き換える場合にはset~()を用います。これも先ほどと同様に、それぞれの単位ごとに用意されています。

function getNewDate(value,unit){
  const nowDate=new Date();
  if(unit=="year"){
    nowDate.setFullYear(nowDate.getDate()+value);
  }else if(unit=="month"){
    nowDate.setMonth(nowDate.getMonth()+value);
  }else if(unit=="day"){
    nowDate.setDate(nowDate.getDate()+value);
  }else if(unit=="hour"){
    nowDate.setHours(nowDate.getHours()+value);
  }else if(unit=="minute"){
    nowDate.setMinutes(nowDate.getMinutes()+value);
  }
  
  var year=nowDate.getFullYear();
  var month=nowDate.getMonth()+1;
  var day=nowDate.getDate();
  var hour=nowDate.getHours();
  var minute=nowDate.getMinutes();
  console.log(year+"年"+month+"月"+day+"日"+hour+"時"+minute+"分");

}

getNewDate(30,"day");

function getNewDate(value,unit){

const nowDate=new Date();

if(unit=="year"){

nowDate.setFullYear(nowDate.getDate()+value);

}else if(unit=="month"){

nowDate.setMonth(nowDate.getMonth()+value);

}else if(unit=="day"){

nowDate.setDate(nowDate.getDate()+value);

}else if(unit=="hour"){

nowDate.setHours(nowDate.getHours()+value);

}else if(unit=="minute"){

nowDate.setMinutes(nowDate.getMinutes()+value);

}

var year=nowDate.getFullYear();

var month=nowDate.getMonth()+1;

var day=nowDate.getDate();

var hour=nowDate.getHours();

var minute=nowDate.getMinutes();

console.log(year+"年"+month+"月"+day+"日"+hour+"時"+minute+"分");

}

getNewDate(30,"day");

上記のコードは与えられた時間分、現在の時間から進んだ時間を出力する関数の例です。与えられた時間分をvalueとして今の日時(nowDate)をget~()で取得し、たし算をすることで進んだ時間を算出します。その時間をset~()で入力しています。この時点でnowDateに更新された日付が入っているのが少し気持ち悪い気もしますが、この日時を単位ごとに好きなフォーマットで出力することができます。getNewDate(30,”day”);のように入力することで３０日後の日時が出力されます。

また、現在より前の時間を得たい場合は入力に前後の情報を入れて符号を逆転させることで簡単に作ることができます。

終わりに

Dateオブジェクトを使うことで日時に関する処理を行うことができ、決められた日時までの時間などを出力することができますが、注意する点としてタイムスタンプの差分などはミリ秒単位であるので、もし秒に換算するなら1000で割る必要があることです。是非そこに注意をしながらアレンジをして関数を作ってみてください！