意外と知られていないJavaScriptのnew Date()の使用方法

意外と知られていないJavaScriptのnew Date()の使用方法

new Date()の使い方

指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の(デバイスに)設定されている時刻を取得する。
日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。

var d1 = new Date('2014/04/01 12:34:56');
console.log(d1);
// => Tue Apr 01 2014 12:34:56 GMT+0900

var d2 = new Date(2014, 3, 1, 12, 34, 56);
console.log(d2);
// => Tue Apr 01 2014 12:34:56 GMT+0900

new Date()に年を入れる

new Date("2013")でその年の1月1日GMT+9時間の日付を取得する

var d2 = new Date("2013");
console.log(d2);
// => Tue Jan 01 2013 09:00:00 GMT+0900

new Date()に年と月は入れられない

new Date("2013/01")はエラーになる

var d3 = new Date("2013/01");
console.log(d3);
// => Invalid Date

new Date()に年月日を入れる

new Date("2013/01/23")で取得。月の0は省略可能。

var d4 = new Date("2013/1/23");
console.log(d4);
// => Wed Jan 23 2013 00:00:00 GMT+0900

var d5 = new Date("2013/01/23");
console.log(d5);
// => Wed Jan 23 2013 00:00:00 GMT+0900

new Date(2015, 2, 0)で最後の日を取得

例えばnew Date(2015, 2, 0)のように第3引数に0を指定すると2月の最後の日が取得できる。getDate()を併用してその月の最大日数を取得するのによく利用される。

var d = new Date(2015, 2, 0);
console.log(d);
// => Sat Feb 28 2015 00:00:00 GMT+0900

console.log(d.getDate());
// => 28

これを利用すればうるう年の判定も簡単にできる。

function isLeapYear(year) {
  return new Date(year, 2, 0).getDate() === 29;
}

console.log(isLeapYear(2015));
// => false

console.log(isLeapYear(2020));
// => true

new Dateの年は4桁以外も入れられる

new Dateの年をnew Date(99, 0, 1)にすると1999年が返ってくる。しかし、new Date(100, 0, 1)は2000年ではなく100年になってしまうため、年を4桁以外で入力しないほうが良い。

var d1 = new Date(0, 0, 1);
console.log(d1);
// => Mon Jan 01 1900 00:00:00 GMT+0900 (JST)

var d2 = new Date(99, 0, 1);
console.log(d2);
// => Fri Jan 01 1999 00:00:00 GMT+0900 (JST)

var d3 = new Date(100, 0, 1);
console.log(d3);
// => Fri Jan 01  100 00:00:00 GMT+0900 (JST)

new Date()に年月日を区切りはハイフンにしないほうが良い

new Date("2013-01-23")だとGMT+9時間が加算されるので使用しないほうが良い。

var d6 = new Date("2013-01-23");
console.log(d6);
// => Wed Jan 23 2013 09:00:00 GMT+0900

new Date()に年月日と時間を入れる

秒は省略可能だが分は省略不可

var d7 = new Date("2013-01-23 12");
console.log(d7);
// => Invalid Date

var d8 = new Date("2013/01/23 12:34");
console.log(d8);
// => Wed Jan 23 2013 12:34:00 GMT+0900

var d9 = new Date("2013/01/23 12:34:56");
console.log(d9); 
// => Wed Jan 23 2013 12:34:56 GMT+0900

getTime()でミリ秒を取得

日時を指定しない場合は(new Date).getTime()という書き方も可能

var now1 = new Date("2013/01/23 12:34").getTime();
console.log(now1);
// => 1358912040000

var now2 = (new Date).getTime();
console.log(now2);
// => 現在の日時がミリ秒で表示される

getTime()を使わずミリ秒を取得

一般的にはミリ秒の取得にはgetTime()が使用されることが多いが、現在の時刻をミリ秒で取得したい場合は+new DateまたはDate.now()でもミリ秒を取得できる。

+new DateまたはDate.now()でミリ秒を取得したサンプル

日時の比較

たまにミリ秒に変換してから比較しているコードを見かけることがあるがミリ秒に変換せずにそのまま変数に代入してif文で比較できる。

var a = new Date("2013/01/23 12:34");
var b = new Date("2013/01/23 12:35");

// 結果はb is bigger than a
if(a > b){
  console.log('a is bigger than b');
}
else{
  console.log('b is bigger than a');
}

new Date同士の減算

new Date同士を減算するとミリ秒(数値)になる。加算すると文字列になってしまうので足しても意味がない。

var a = new Date("2015/01/01 00:00");
var b = new Date("2014/01/01 00:00");

console.log(a - b);
// => 31536000000

console.log(a + b);
// => Thu Jan 01 2015 00:00:00 GMT+0900Wed Jan 01 2014 00:00:00 GMT+0900

new Dateは日本にいても日本の日時を表示するとは限らない

new Dateは日本にいても言語設定が日本語以外になっているとブラウザによっては日本の日時を取得しないことがある。

例えばFirefoxの場合は以下のような結果にある。

// 言語設定が英語になっているFirefoxのnew Date()の結果
// 日本時間21:20に実行した結果
console.log(new Date());
// => Date 2017-04-10T12:20:17.638Z

toLocaleString()で文字列化

toLocaleString()を使用すればnew Dateで作成した日付オブジェクトをロケールに対応した文字列で表示できる。

ただし、month, date, hourが1桁のときは頭の0は除外される。秒は省略していても:00が追加される。

日付または時刻だけを文字列化したい場合はtoLocaleDateString()およびtoLocaleTimeString()を使用する。

var d = new Date("2013/01/01 01:00");

console.log(d.toLocaleString());
// => 2013/1/1 1:00:00

console.log(d.toLocaleDateString());
// => 2013/1/1

console.log(d.toLocaleTimeString());
// => 1:00:00

toLocaleDateString('ja-JP-u-ca-japanese')で元号の年数に変換されるがブラウザによって挙動が異なる。

さらに慶応以降の年数は正しく取得できないので注意が必要。

var d = new Date("2013/01/01 01:00");

console.log(d.toLocaleDateString('ja-JP-u-ca-japanese'));
// Chromeの場合
// => 平成25/1/1

console.log(d.toLocaleDateString('ja-JP-u-ca-japanese'));
// Safariの場合
// => 25/1/1

年月日時分秒を簡単に加算

setYearやgetYearを使用すると年月日時分秒を簡単に加算することができる。もちろんマイナスにすれば減算も可能だ。

var d = new Date('2015/01/01 00:00:00');

d.setYear(d.getFullYear() + 10);
console.log(d.toLocaleString());
// => 2025/1/1 0:00:00

d.setMonth(d.getMonth() + 10);
console.log(d.toLocaleString());
// => 2025/11/1 0:00:00

d.setDate(d.getDate() + 10);
console.log(d.toLocaleString());
// => 2025/11/11 00:00:00

d.setHours(d.getHours() + 10);
console.log(d.toLocaleString());
// => 2025/11/11 10:00:00

d.setMinutes(d.getMinutes() + 10);
console.log(d.toLocaleString());
// => 2025/11/11 10:10:00

d.setSeconds(d.getSeconds() + 10);
console.log(d.toLocaleString());
// => 2025/11/11 10:10:10

その他注意点

  • ○年○月○日のまま取得できないので漢字が含まれた日時は/(スラッシュ)に変換
  • getMonth()は月から1を引いた数(1月は0)で返すので1を加算する
  • 日付の加算および減算後の結果はうるう年も考慮される
  • Dateオブジェクトは1970年1月1日の前後273,785年を扱えるので紀元前の指定も可能。
  • getHours()やgetMinutes()は数値として時間を返すので1234のつもりが46にならないように先頭に空文字を付けるなどして文字列として結合するようにする。
var now1 = new Date("2014/01/01 12:34");
console.log(now1.getHours() + now1.getMinutes()) // 46

var now2 = new Date("2014/01/01 12:34");
console.log('' + now2.getHours() + now1.getMinutes()) // 1234

サーバーの時刻を取得する

new Date()はユーザーのデバイスの日時が取得されるためnew Date()だと都合が悪い場合がある。

サーバーの日時を取得するにはPHPやJavaなどサーバーサイドスクリプトが必要だと勘違いされることが多いがJavaScriptだけでもサーバーの日時を取得することは可能なので正確な日時を取得したい場合はサーバーから取得すると良い。

JavaScriptだけでもこちらの方法を使用すればサーバーの日時を取得することが可能だ。