JavaScriptのDateオブジェクトに関して

トモジのアイコン画像トモジ

Dateオブジェクトって何?
詳しく知りたい・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、Dateオブジェクトに関して
要点をわかりやすく説明しております。

記事の内容

1.Dateオブジェクトの生成

Dateオブジェクトは、日付を直感的に操作できるオブジェクトになります。

しかし、他の文字列や配列のような
リテラル表現は存在しないので
生成には必ずコンストラクターを経由し
以下の4つの方法で作成します。

4つのコンストラクタ経由方法

デフォルト生成

引数と指定しない状態でDateオブジェクトを生成すると、生成した時点での日付と時間が取得できます。

タイムスタンプ値(デフォルト)の取得に関しての説明図

デフォルト生成に関して

// Dateオブジェクトの生成
var date = new Date();

console.log(date);
出力結果

Sat Feb 20 2021 17:00:30 GMT+0900 (日本標準時)

日付文字列での生成

日付文字列をもとに
Dateオブジェクトを生成します。
※英文形式でも指定できる

タイムスタンプ値(日付文字列)の取得に関しての説明図

日付文字列での生成に関して

// Dateオブジェクトの生成
var date1 = new Date('2021/02/20 11:11:11');
// 英文形式
var date2 = new Date('Sat Feb 20 2021 11:11:11');

console.log(date1); 
console.log(date2);
出力結果

Sat Feb 20 2021 11:11:11 GMT+0900 (日本標準時)
Sat Feb 20 2021 11:11:11 GMT+0900 (日本標準時)

時分秒ミリの省略での生成

タイムスタンプ値(日付文字列2)の取得に関しての説明図

日付文字列2での生成に関して

// Dateオブジェクトの生成
var date1 = new Date(2021, 0, 20, 11, 11, 11, 1111);
var date2 = new Date(2021, 0, 20);

console.log(date1);
console.log(date2);
出力結果

Wed Jan 20 2021 11:11:11 GMT+0900 (日本標準時)
Wed Jan 20 2021 00:00:00 GMT+0900 (日本標準時)

月は0(1月)〜11(12月)指定になる

タイムスタンプ値を取得

基準日時 1970 年 1 月 1 日 0 時 0 分 0 秒(UTC)からの経過ミリ秒を指定して
Date オブジェクトのインスタンスを作成します。

そのまま値を取得すると日本標準時は、
9時間の時差が考慮されます。

タイムスタンプ値の取得に関しての説明図

タイムスタンプ値に関して

// Dateオブジェクトの生成
var date = new Date(0);
var thisYear  = new Date(1609426800990);

console.log(date); // 日本の兵庫県明石市
console.log(date.toUTCString()); // イギリスのグリニッジ天文台
console.log(thisYear);
出力結果

Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)
Thu, 01 Jan 1970 00:00:00 GMT
Fri Jan 01 2021 00:00:00 GMT+0900 (日本標準時)

2.JavaScriptのDateオブジェクト

Dateオブジェクトで利用可能なメンバーは、
以下の通りです。

dateオブジェクト
dateオブジェクト一覧

3.ローカル・協定時(取得)

取得に関しては、ローカル・協定時の値を
細かく取り出すことができます。

ローカル取得に関しての図

協定時とは?

メンバーの説明に行く前に、
協定時に関して説明致します。

協定時とは、UTC(協定世界時)のことを差し
世界の基準(イギリスのグリニッジ天文台)に
なっている時刻のことを言います。
そして、日本時刻から9時間引けば
その協定時刻になります。

世界時刻

ローカル・協定時(取得)

生成したDateオブジェクトから、
メンバーを使い値の確認をしてみましょう。

ローカル・協定時(取得)に関して

// Dateオブジェクトの生成
var date = new Date(2021, 0, 12, 13, 14, 15, 234);

console.log("date : " + date);

console.log("====================ローカル(取得)====================")
console.log("getFullYear : " + date.getFullYear());
console.log("getMonth : " + date.getMonth());
console.log("getDate : " + date.getDate());
console.log("getDay : " + date.getDay());
console.log("getHours : " + date.getHours());
console.log("getMinutes : " + date.getMinutes());
console.log("getSeconds : " + date.getSeconds());
console.log("getMilliseconds : " + date.getMilliseconds());
console.log("getTime : " + date.getTime());
console.log("getTimezoneOffset : " + date.getTimezoneOffset());

console.log("====================協定時(取得)====================")
console.log("getUTCFullYear : " + date.getUTCFullYear());
console.log("getUTCMonth : " + date.getUTCMonth());
console.log("getUTCDate : " + date.getUTCDate());
console.log("getUTCDay : " + date.getUTCDay());
console.log("getUTCHours : " + date.getUTCHours());
console.log("getUTCMinutes : " + date.getUTCMinutes());
console.log("getUTCSeconds : " + date.getUTCSeconds());
console.log("getUTCMilliseconds : " + date.getUTCMilliseconds());
出力結果

date : Tue Jan 12 2021 13:14:15 GMT+0900 (日本標準時)
====================ローカル(取得)====================
getFullYear : 2021
getMonth : 0
getDate : 12
getDay : 2
getHours : 13
getMinutes : 14
getSeconds : 15
getMilliseconds : 234
getTime : 1610424855234
getTimezoneOffset : -540
====================協定時(取得)====================
getUTCFullYear : 2021
getUTCMonth : 0
getUTCDate : 12
getUTCDay : 2
getUTCHours : 4
getUTCMinutes : 14
getUTCSeconds : 15
getUTCMilliseconds : 234

取得する月はオブジェクト生成時の値になる

4.ローカル・協定時(設定)

設定は、ローカル・協定時の値をセットすることができます。

ローカル設定に関しての図

ローカル・協定時(設定)

生成したDateオブジェクトに新たな値をセットすることができます。

ローカル・協定時(設定)に関して

// Dateオブジェクトの生成
var date = new Date(2021, 0, 12, 13, 14, 15, 234);

console.log("date(set前) : " + date);

console.log("====================ローカル(取得)====================")
// ローカル(取得)
date.setFullYear(1984);
date.setMonth(1);
date.setDate(24);
date.setHours(9);
date.setMinutes(41);
date.setSeconds(11);
date.setMilliseconds(123);
console.log("date(set後) : " + date);

console.log("====================協定時(取得)====================")
// 協定時(取得)
date.setUTCFullYear(1984);
date.setUTCMonth(1);
date.setUTCDate(24);
date.setUTCHours(9);
date.setUTCMinutes(41);
date.setUTCSeconds(11);
date.setUTCMilliseconds(123);
console.log("date(set後) : " + date);
出力結果

date(set前) : Tue Jan 12 2021 13:14:15 GMT+0900 (日本標準時)
====================ローカル(取得)====================
date(set後) : Fri Feb 24 1984 09:41:11 GMT+0900 (日本標準時)
====================協定時(取得)====================
date(set後) : Fri Feb 24 1984 18:41:11 GMT+0900 (日本標準時)

5.解析

Dateオブジェクトの[解析]は、
以下の3種類のメンバーがありますので
順番に見ていきましょう。

解析の説明図

parse

parseは、日付文字列を解析し1970/01/01 00:00:00 からの経過ミリ秒を取得します。

parseの説明図

解析(parse)に関して

// Dateオブジェクトの生成
var date1 = new Date(1970,0,1,9,0,0,0);
var date2 = new Date(2021,0,1,9,0,0,0);

console.log("parse(1970年1月1日) : " + Date.parse(date1));
console.log("parse(2021年1月1日) : " + Date.parse(date2));
出力結果

parse(1970年1月1日) : 0
parse(2021年1月1日) : 1609459200000

UTC

UTCは、日付情報をもとに1970/01/01 00:00:00 からの経過ミリ秒を取得(協定世界時)します。

UTC(解析)の説明図

解析(UTC)に関して

console.log("UTC(1970年1月1日) : " + Date.UTC(1970,0,1,0,0,0,0));
console.log("UTC(2021年1月1日) : " + Date.UTC(2021,0,1,0,0,0,0));
出力結果

UTC(1970年1月1日) : 0
UTC(2021年1月1日) : 1609459200000

now

nowは、協定世界時での現在の日付を1970/01/01 00:00:00 からの経過ミリ秒を取得します。

now解析の説明図

解析(now)に関して

console.log("now() : " + Date.now());
出力結果

now() : 1613897260599

6.文字列変換

Dateオブジェクトの[文字列変換]は、
以下の8種類のメンバーがありますので
順番に見ていきましょう。

文字列変換
メンバー概要
toUTCString協定世界時を文字列として取得
toLocaleStringローカル時を文字列として取得
toDateString日付部分を文字列として取得
toTimeString時刻部分を文字列として取得
toLocaleDateString地域情報に従って、日付部分を文字列として取得
toLocaleTimeString地域情報に従って、時刻部分を文字列として取得
toString日付を文字列として取得
toJSON日時をJSON文字列として取得

文字列変換に関して

// Dateオブジェクトの生成
var date = new Date(2021,0,11,22,33,44,555);

console.log("toUTCString : " + date.toUTCString());
console.log("toLocaleString : " + date.toLocaleString());
console.log("toDateString : " + date.toDateString());
console.log("toTimeString : " + date.toTimeString());
console.log("toLocaleDateString : " + date.toLocaleDateString());
console.log("toLocaleTimeString : " + date.toLocaleTimeString());
console.log("toString : " + date.toString());
console.log("toJSON : " + date.toJSON());
出力結果

toUTCString : Mon, 11 Jan 2021 13:33:44 GMT
toLocaleString : 2021/1/11 22:33:44
toDateString : Mon Jan 11 2021
toTimeString : 22:33:44 GMT+0900 (日本標準時)
toLocaleDateString : 2021/1/11
toLocaleTimeString : 22:33:44
toString : Mon Jan 11 2021 22:33:44 GMT+0900 (日本標準時)
toJSON : 2021-01-11T13:33:44.555Z

まとめ

最後にこの記事のポイントをまとめておきます。

まとめ

Dateオブジェクトの生成

  • デフォルト生成

  • 日付文字列での生成

  • 時分秒ミリの省略での生成

  • タイムスタンプ値を取得

ローカル(取得/設定)

  • getFullYear
    年(4ケタ)取得
  • setFullYear
    年(4ケタ)設定


  • getMonth
    月(0〜11)取得
  • setMonth
    月(0〜11)設定


  • getDate
    日(1〜31)取得
  • setDate
    日(1〜31)設定


  • getDay
    曜日(0:日曜〜6:土曜)取得


  • getHours
    時(0〜23)取得
  • setHours
    時(0〜23)設定


  • getMinutes
    分(0〜59)取得
  • setMinutes
    分(0〜59)設定


  • getSeconds
    秒(0〜59)取得
  • setSeconds
    秒(0〜59)設定


  • getMilliseconds
    ミリ分(0〜999)取得
  • setMilliseconds
    ミリ分(0〜999)設定


  • getTime
    1970/01/01 00:00:00からの
    経過ミリ秒取得
  • setTime
    1970/01/01 00:00:00からの
    経過ミリ秒設定


  • getTimezoneOffset
    協定世界時との時差取得


協定時(取得/設定)

  • getUTCFullYear
    年(4ケタ)取得
  • setUTCFullYear
    年(4ケタ)設定


  • getUTCMonth
    月(0〜11)取得
  • setUTCMonth
    月(0〜11)設定


  • getUTCDate
    日(1〜31)取得
  • setUTCDate
    日(1〜31)設定


  • getUTCDay
    曜日(0:日曜〜6:土曜)取得


  • getUTCHours
    時(0〜23)取得
  • setUTCHours
    時(0〜23)設定


  • getUTCMinutes
    分(0〜59)取得
  • setUTCMinutes
    分(0〜59)設定


  • getUTCSeconds
    秒(0〜59)取得
  • setUTCSeconds
    秒(0〜59)設定


  • getUTCMilliseconds
    ミリ分(0〜999)取得
  • setUTCMilliseconds
    ミリ分(0〜999)設定


解析

  • parse
    日付文字列を解析し1970/01/01 00:00:00 からの経過ミリ秒を取得

  • UTC
    日付情報をもとに1970/01/01 00:00:00 からの経過ミリ秒を取得(協定世界時)

  • now
    協定世界時での現在の日付を1970/01/01 00:00:00 からの経過ミリ秒を取得

文字列変換

  • toUTCString
    協定世界時を文字列として取得

  • toLocaleString
    ローカル時を文字列として取得

  • toDateString
    日付部分を文字列として取得

  • toTimeString
    時刻部分を文字列として取得

  • toLocaleDateString
    地域情報に従って、
    日付部分を文字列として取得

  • toLocaleTimeString
    地域情報に従って、
    時刻部分を文字列として取得

  • toString
    日付を文字列として取得

  • toJSON
    日時をJSON文字列として取得

記事の内容
閉じる