JavaScriptには日付・時間・年月を扱うオブジェクトが標準で用意されています。Webなどで時間や日にちを動的に表示したりするなどによく使われます。
今回はJavaScript標準オブジェクトであるDateについてわかりやすく解説していきます。
- Dateオブジェクトについて知りたい方
- JavaScript初学者の方
Dateオブジェクトの解説
Dateオブジェクトのインスタンス生成
Dateオブジェクトは日時などを扱うことのできるオブジェクトになります。
それぞれのDateオブジェクトのプロパティにアクセスするにはインスタンスを生成する必要があります。
let 変数名 = new Date();
let 変数名 = new Date(年,月,日);
let 変数名 = new Date(時間);
let 変数名 = new Date(時:分:秒);
let 変数名 = Date();
インスタンスはこのようになります。
上の4つは新たにインスタンスを生成します。このとき、パラメータを設定することも可能です。例えばですが、年月を指定する、時間を指定するといった細かな部分を調整することが可能です。
また、newを省いてインスタンスを生成することも可能です。このときは、現在の日時・時刻の情報が文字列として生成されます。
let today = new Date();
console.log(today);
console.log(typeof today);
today = Date();
console.log(today);
console.log(typeof today);$ node date.js
2021-07-17T08:36:14.248Z
object
Sat Jul 17 2021 17:36:14 GMT+0900 (日本標準時)
stringこのサンプルではインスタンスを生成したときのコードです。
上はnewをつけた場合です。下は省いた場合になります。型を表示するtypeofを使うとわかりますが、上はオブジェクトですが下は文字列になっていることが分かりますね。
オブジェクトを文字列に変換する(toString)
続いては、取得したオブジェクトを文字列の変換するメソッドについて解説していきます。
Dateオブジェクトからインスタンスを生成すると、方はオブジェクトという種類になっています。
それを文字列に変換するメソッドが用意されています。
さっそく見ていきましょう。
let today = new Date();
console.log(today);
console.log(typeof today);
console.log(today.toString());//文字列に変換する
console.log(today.toDateString());//日付を取り出して文字列に変換する
console.log(today.toTimeString());//時間を取り出して文字列に変換する
console.log(today.toUTCString());//UTCでの日付を取り出して文字列に変換する$ node date.js
2021-07-17T09:08:11.316Z
object
Sat Jul 17 2021 18:08:11 GMT+0900 (日本標準時)
Sat Jul 17 2021
18:08:11 GMT+0900 (日本標準時)
Sat, 17 Jul 2021 09:08:11 GMTそれぞれ、メソッドを使い分けることで文字列に変換することが可能です。オブジェクトとして取得した値から変換します。
任意ロケールの形式で文字列を取得(toLocaleString)
続いては、取得したオブジェクトからロケールを指定して文字列を取得するメソッドについて解説していきます。
日本だけではなく、他の国の日付形式での文字列形式で取得していきます。パラメータを指定することで任意のロケールの値を取得できます。
let today = new Date();
console.log(today.toLocaleString('jp-JP'));//任意のロケールで日付と時刻を取得する
console.log(today.toLocaleString('en-US'));
console.log(today.toLocaleDateString('en-US'));//任意のロケールで日にちを取得する
console.log(today.toLocaleDateString('zh-CN'));
console.log(today.toLocaleTimeString('ja-JP'));//任意のロケールで時刻を取得する
console.log(today.toLocaleTimeString('fr-FR'));
$ node date.js
2021/7/17 18:38:25
7/17/2021, 6:38:25 PM
7/17/2021
2021/7/17
18:38:25
18:38:25それぞれパラメータを設定すると、それぞれの国の形式で取得することが可能です。例えばですが、USの場合は日本と違って日付が日、月、年の順になっています。日本はその逆になっています。
オブジェクトから時刻・日にちを取得する(get)
日時というのは年、時間、月、分、秒など個々の情報の集合です。それらを個別で取得することができるメソッドがあります。それについて解説していきます。
let today = new Date();
let year = today.getFullYear();
let mon = today.getMonth();
let date = today.getDate();
let day = today.getDay();
let hour = today.getHours();
let min = today.getMinutes();
let sec = today.getSeconds();
let mill = today.getMilliseconds();
console.log(`${year}年 ${mon}月 ${day}日`);
console.log(`${hour}時 ${min}分 ${sec}.${mill}秒`);$ node date.js
2021年 6月 17日
19時 4分 16.883秒このメソッドを使うことで、日時を構成する情報を個別で取得することが可能です。それぞれの要素を取得することで、自分で好きな形式で時刻を出力することも可能なのです。
Dateオブジェクトの値に新しい日時を設定する(set)
Dateオブジェクトに任意の時間を設定することが可能なメソッドが存在します。インスタンスを生成したのち、取得した日時などを任意の時間に上書きできます。
let today = new Date();
console.log(today.toDateString());
console.log(today.toTimeString());
today.setFullYear(2021,2);
console.log(today.toDateString());
console.log(today.toTimeString());
today.setHours(12,23,53,666);
console.log(today.toDateString());
console.log(today.toTimeString());$ node date.js
Sat Jul 17 2021
19:26:41 GMT+0900 (日本標準時)
Wed Mar 17 2021
19:26:41 GMT+0900 (日本標準時)
Wed Mar 17 2021
12:23:53 GMT+0900 (日本標準時)時間や年月を新たに編集できていることがわかりますね。このとき、設定する値は下記のようになります。
- 月:0~11
- 日:1~31
- 時:0~23
- 分:0~59
- 秒:0~59
- ミリ秒:0~999
月日や時刻の値を新しく設定する場合はこの範囲の数字を適用する必要があります。
まとめ
では今回のまとめに入りましょう。今回は下記のようなことを学びました。
- Dateオブジェクト
- インスタンス生成
- 時刻の取得
- 時刻を新しく設定する
今回はここまでとなります。お疲れ様でした。
参考文献
