![トモジのアイコン画像](https://10moji-blog.com/wp-content/uploads/2020/08/吹き出しトモジ.png)
Dateオブジェクトって何?
詳しく知りたい・・
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、Dateオブジェクトに関して
要点をわかりやすく説明しております。
1.Dateオブジェクトの生成
Dateオブジェクトは、日付を直感的に操作できるオブジェクトになります。
しかし、他の文字列や配列のような
リテラル表現は存在しないので
生成には必ずコンストラクターを経由し
以下の4つの方法で作成します。
4つのコンストラクタ経由方法
デフォルト生成
引数と指定しない状態でDateオブジェクトを生成すると、生成した時点での日付と時間が取得できます。
![タイムスタンプ値(デフォルト)の取得に関しての説明図](https://10moji-blog.com/wp-content/uploads/2021/02/336b182dd8cab7f0a81a304b1a08e2ee-2-1020x1024.png)
デフォルト生成に関して
// Dateオブジェクトの生成
var date = new Date();
console.log(date);
Sat Feb 20 2021 17:00:30 GMT+0900 (日本標準時)
日付文字列での生成
日付文字列をもとに
Dateオブジェクトを生成します。
※英文形式でも指定できる
![タイムスタンプ値(日付文字列)の取得に関しての説明図](https://10moji-blog.com/wp-content/uploads/2021/02/dd1712fa634432bb80f894d5463d03e6-1020x1024.png)
日付文字列での生成に関して
// 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)の取得に関しての説明図](https://10moji-blog.com/wp-content/uploads/2021/02/9fefd0596413f61779acb0d3c08742a4-1-1020x1024.png)
日付文字列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時間の時差が考慮されます。
![タイムスタンプ値の取得に関しての説明図](https://10moji-blog.com/wp-content/uploads/2021/02/dabaaff7d02a02067a493ea546b510ec-1020x1024.png)
タイムスタンプ値に関して
// 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オブジェクト](https://10moji-blog.com/wp-content/uploads/2021/02/df2a4c47802128b8dcc5eb508732c3e6-843x1024.png)
3.ローカル・協定時(取得)
取得に関しては、ローカル・協定時の値を
細かく取り出すことができます。
![ローカル取得に関しての図](https://10moji-blog.com/wp-content/uploads/2021/02/066b7bc9eb703b0717c4947af0c67b67-555x1024.png)
協定時とは?
メンバーの説明に行く前に、
協定時に関して説明致します。
協定時とは、UTC(協定世界時)のことを差し
世界の基準(イギリスのグリニッジ天文台)に
なっている時刻のことを言います。
そして、日本時刻から9時間引けば
その協定時刻になります。
![世界時刻](https://10moji-blog.com/wp-content/uploads/2021/02/UTC-1-1020x1024.png)
ローカル・協定時(取得)
生成した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.ローカル・協定時(設定)
設定は、ローカル・協定時の値をセットすることができます。
![ローカル設定に関しての図](https://10moji-blog.com/wp-content/uploads/2021/02/226ac4d0c6f0325c59df2354e74abdcc-647x1024.png)
ローカル・協定時(設定)
生成した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種類のメンバーがありますので
順番に見ていきましょう。
![解析の説明図](https://10moji-blog.com/wp-content/uploads/2021/02/aa357cb96ee813d56ef9d306af50e760-1024x513.png)
parse
parseは、日付文字列を解析し1970/01/01 00:00:00 からの経過ミリ秒を取得します。
![parseの説明図](https://10moji-blog.com/wp-content/uploads/2021/02/parse-1-1024x782.png)
解析(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(解析)の説明図](https://10moji-blog.com/wp-content/uploads/2021/02/dbabec7ac18ea1cf317013a0490f73f4-1-1024x782.png)
解析(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解析の説明図](https://10moji-blog.com/wp-content/uploads/2021/02/now-1-1024x782.png)
解析(now)に関して
console.log("now() : " + Date.now());
now() : 1613897260599
6.文字列変換
Dateオブジェクトの[文字列変換]は、
以下の8種類のメンバーがありますので
順番に見ていきましょう。
![文字列変換](https://10moji-blog.com/wp-content/uploads/2021/02/ebfd8323e802360809a3bc027506b843-1024x981.png)
メンバー | 概要 |
---|---|
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文字列として取得