忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

  • 2025/04/05
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

  • CM
  • 2020/05/11
JavaScript Dateオブジェクトの使い方（Date）

JavaScript には日付用のデータ型がありませんが、その代わりとして Dateオブジェクト が存在します。
この Dateオブジェクト は日付の設定、取得、操作を行うためのメソッドを持っていますのでそれをプログラムから利用できます。 尚 Dateオブジェクト にはプロパティがありません。

Dateオブジェクト はUnixタイムスタンプが 1970年1月1日 00:00:00 からの秒の数値であるのと同様に、ミリ秒の数値で日付を格納しています。


■Dateオブジェクトのコンストラクタについて

?
1
2
3
4
5
6
7
8
// 年,月,日,時,分,秒,ミリ秒 を個別に指定
objDate = new Date(yead, month [, day [, hour [, min [, sec [, milisec] ] ] ] ]);
// Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定
objDate = new Date(unixtime);
// 文字列で時刻を指定
objDate = new Date(string);
// 引数無しは現在時刻
objDate = new Date();

上記の4種類の Dateオブジェクト の生成方法があります。それぞれの例を順次以下に示します。

■年,月,日,時,分,秒,ミリ秒 を個別に指定

?
1
2
3
4
5
6
7
8
9
10
11
12
objDate = new Date(2020, 4);
console.log(objDate);
objDate = new Date(2020, 4, 10);
console.log(objDate);
objDate = new Date(2020, 4, 10, 13);
console.log(objDate);
objDate = new Date(2020, 4, 10, 13, 59);
console.log(objDate);
objDate = new Date(2020, 4, 10, 13, 59, 59);
console.log(objDate);
objDate = new Date(2020, 4, 10, 13, 59, 59, 150);
console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
尚、月の指定は 1月～12月が 0 ～ 11 で設定しますので注意が必要です。

?
1
2
3
4
5
6
Date Fri May 01 2020 00:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 00:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)

■Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定

?
1
2
3
4
5
6
7
// 1日のミリ秒
var dateMilisec = 24 * 60 * 60 * 1000;
// 2020年1月1日までのミリ秒
var allMilisec = 50 * 365 * dateMilisec + 12 * dateMilisec;
// Dateオブジェクト
var objDate = new Date(allMilisec);
console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

?
1
Date Wed Jan 01 2020 09:00:00 GMT+0900 (日本標準時)

■文字列で時刻を指定

?
1
2
3
4
5
6
7
8
var objDate;
 
objDate = new Date("2020-05-08T13:59:59");
console.log(objDate);
objDate = new Date("2020/05/08 13:59:59");
console.log(objDate);
objDate = new Date("05/08/2020 23:59:59");
console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

?
1
2
3
Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Date Fri May 08 2020 23:59:59 GMT+0900 (日本標準時)

■引数無しは現在時刻

?
1
2
3
// 引数無し
var objDate = new Date();
console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
尚、この実行は 2020年5月11日 に行いました。

?
1
Date Mon May 11 2020 16:41:40 GMT+0900 (日本標準時)



■Dateオブジェクトのメソッドについて

Dateオブジェクト のメソッドは下記の接頭語の付いたものが在りそれぞれに分類されます。

■「get」メソッド:Dateオブジェクトの日時等の取得メソッド

?
1
2
3
4
5
6
7
8
9
10
11
// Dateオブジェクト
var objDate = new Date(2020, 5, 10, 13, 59, 50, 150);
var str = "";
str += objDate.getFullYear();           // 年(1900 年以降の年)
str += "/" + (objDate.getMonth() + 1);  // 月(0 〜 11 )
str += "/" + objDate.getDate();         // 日(1 〜 31 )
str += " " + objDate.getHours();        // 時(0 〜 23)
str += ":" + objDate.getMinutes();      // 分(0 〜 59)
str += ":" + objDate.getSeconds();      // 秒(0 〜 59)
str += "." + objDate.getMilliseconds(); // ミリ秒(0 〜 999)
console.log(str);

ブラウザの開発環境のコンソールを見ると以下の様になります。

?
1
2020/5/10 13:59:50.150

尚、月日時分秒に先頭ゼロを付加する場合は以下の様にします。

?
1
2
3
4
5
6
7
8
9
10
11
// 2020/05/08 09:05:06.050 の設定
objDate = new Date(2020, 4, 8, 9, 5, 6, 50);
str = "";
str += objDate.getFullYear();                               // 年(1900 年以降の年)
str += "/" ('0' + (objDate.getMonth() + 1)).substr(-2);     // 月(0 〜 11 )
str += "/" ('0' + objDate.getDate()).substr(-2);            // 日(1 〜 31 )
str += " " ('0' + objDate.getHours()).substr(-2);           // 時(0 〜 23)
str += ":" ('0' + objDate.getMinutes()).substr(-2);         // 分(0 〜 59)
str += ":" ('0' + objDate.getSeconds()).substr(-2);         // 秒(0 〜 59)
str += "." ('00' + objDate.getMilliseconds()).substr(-3);   // ミリ秒(0 〜 999)
console.log(str);

ブラウザの開発環境のコンソールを見ると以下の様になります。

?
1
2020/05/08 09:05:06.050


■「set」メソッド:Dateオブジェクトへ日時等の設定メソッド

?
1
2
3
4
5
6
7
8
9
var objDate = new Date();       // オブジェクト生成(現在時)
objDate.setFullYear(2020);      // 年
objDate.setMonth(3);            // 月
objDate.setDate(30);            // 日
objDate.setHours(13);           // 時
objDate.setMinutes(59);         // 分
objDate.setSeconds(49);         // 秒
objDate.setMilliseconds(123);   // ミリ秒
console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。

?
1
Date Thu Apr 30 2020 13:59:49 GMT+0900 (日本標準時)

この例では 4月30日 の設定ですが setDate で 31日を設定すると結果は 5月1日 になります。 該当する月の日付の範囲を超えた場合は翌月、前月への調整が行われます。

?
1
2
3
4
5
6
7
8
9
10
11
12
var objDate = new Date();       // オブジェクト生成(現在時)
objDate.setFullYear(2020);      // 年
objDate.setMonth(3);            // 月
objDate.setDate(31);            // 日(あり得ない 4月31日 設定)
console.log(objDate);           // オブジェクト内の月は、5月に調整される
 
objDate.setDate(0);             // 日(あり得ない 5月0日 設定)
console.log(objDate);           // オブジェクト内の月は、4月に調整される
 
objDate.setFullYear(2020);      // 年
objDate.setDate(-1);            // 日(あり得ない 4月-1日 設定)
console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。

?
1
2
3
Date Fri May 01 2020 18:08:01 GMT+0900 (日本標準時)
Date Thu Apr 30 2020 18:08:01 GMT+0900 (日本標準時)
Date Mon Mar 30 2020 18:08:01 GMT+0900 (日本標準時)


setDate() の値が「0」の場合はオブジェクト内の月の1日から見て「-1」した日付になります。 （これを使うと月の最終日を求めることが出来ます。）
また、setDate() の値が「-1」の場合はオブジェクト内の月の1日から見て「-2」した日付になります。
尚、このことはsetHours() , setMinutes() , setSeconds() においても指定値の範囲を超えた場合は 日付のオブジェクト内を調整されます。


■「to」メソッド:Dateオブジェクトから文字列変換メソッド

?
1
2
3
4
var objDate = new Date("2020/05/08 13:59:59");
console.log( objDate.toString() );
console.log( objDate.toDateString() );
console.log( objDate.toTimeString() );

ブラウザの開発環境のコンソールを見ると以下の様になります。

?
1
2
3
Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Fri May 08 2020
13:59:59 GMT+0900 (日本標準時)



■Dateオブジェクトの使用上の注意点

Dateオブジェクト を使用する時に注意する点があります。それはオブジェクトのコピーを作る時です。 以下の例を見て下さい。

?
1
2
3
4
5
6
7
8
// Dateオブジェクトの生成
var date1 = new Date("2020/05/08");
// Dateオブジェクトのコピー
var date2 = date1;
// コピー先での月を「2月」に設定
date2.setMonth(1);
console.log("date1 : " + date1);
console.log("date2 : " + date2);


ブラウザの開発環境のコンソールを見ると以下の様になります。
1行目は「date1」の表示なので「5月(May)」と表示されそうなものですが「date2」と同じものが表示されます。

?
1
2
date1 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)
date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)

この原因はソースの4行目にあります。
「date1」を「date2」にコピーしている様に見えますが、実際 Dateオブジェクト はクラスのため参照がコピーされているからです。 このコピーで「date1」「date2」ともに Dateオブジェクト の実体(インスタンス)は同じところを指しています。
それで「date2」で「setMonth」を行って「date1」からデータを見ても同じものになります。

結果、クラスデータを別の変数にコピーしたい場合は（コピーの様なもの）、 既に存在しているオブジェクトの値で、別の変数に対して生成します。 上記のソースを変更します。

?
1
2
3
4
5
6
7
8
// Dateオブジェクトの生成
var date1 = new Date("2020/05/08");
// 最初のオブジェクト値で、別のDateオブジェクトの生成
var date2 = new Date(date1.getTime());
// コピー先での月を「2月」に設定
date2.setMonth(1);
console.log("date1 : " + date1);
console.log("date2 : " + date2);

結果は正しく異なる日付になっています。

?
1
2
date1 : Fri May 08 2020 00:00:00 GMT+0900 (日本標準時)
date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)


※クラスのオブジェクトを扱う場合はコピーをする場合は注意が必要です。


関連する記事

⇒JavaScript 配列の作成と初期化について
⇒JavaScript 連想配列の作成と初期化について
⇒JavaScript 配列の操作について
⇒JavaScript 配列の繰り返し処理(for, for…in, for…of, Array.forEach)
⇒JavaScript 配列と Object.keys 、Object.values 及び Object.entries について
⇒JavaScript 連想配列の操作について（this キーワード）
⇒JavaScript 関数の宣言について(function)
⇒JavaScript thisキーワードについて
⇒JavaScript Dateオブジェクトの使い方（Date）
⇒JavaScript Dateオブジェクト（Date）を操作する関数を作成
⇒JavaScript Stringオブジェクトの使い方（ハマりそうな点）
⇒JavaScript 数値の小数点以下の丸め処理(Math.floor, Math.round, Math.ceil)

おすすめ本

share











PR
  • JavaScript
  • 0CM

コメント

コメントを書く