第13話：日付オブジェクト
目次
マンガ
マンガ台詞
説明
この章では、『日付オブジェクト』について学びます。『日付オブジェクト』は、年月日や時間などを表現するためのオブジェクトです。また、このオブジェクトには、時間を取得したり、設定したりするための、様々なメソッドが用意されています。
プログラムでは、日付や時間によって、処理を分岐させることがよくあります。また、『ある時間』から、『どれくらいの時間が経過したのか』を知りたいことも多いです。そういった時に、この『日付オブジェクト』を使用します。
それでは以下、『日付オブジェクト』について詳しく見ていくことにしましょう。
『日付オブジェクト』
『日付オブジェクト』の作成
『日付オブジェクト』は、『new Date()』と初期化することで、現在時刻で新しいオブジェクトを作成します。
var d = new Date();
また、『new Date(1999, 11, 31);』のように年月日時分秒…と引数を設定すれば、その日時の『日付オブジェクト』を作成します。
var d = new Date(1999, 11, 31);
『日付オブジェクト』からの日時の取得
作成した『日付オブジェクト』からは、様々なメソッドで年月日や時間を取得することができます。
alert(d.getHours() + "時" + d.getMinutes() + "分");
『getHours』は『時間』を取得するメソッド、『getMinutes』は『分』を取得するメソッドです。『new Date()』で作成した『d』変数の、『d.getHours()』『d.getMinutes()』メソッドを利用して、『時』『分』を取り出しています。
『日付オブジェクト』からの値の取り出しは、基本的にはこういった『get～』という名前のメソッドを使います。この値の取得ですが、いくつか注意点があります。それは、『年』と『月』の値についてです。
『年』を取得する場合の注意
『年』を取り出すメソッドには『getFullYear』と『getYear』の2種類がありますが、『getFullYear』を利用してください。『getYear』は非推奨のメソッドで、ゆくゆくはなくなるものです。
『月』を取得する場合の注意
『月』は普通、『1月』『2月』『3月』……『12月』のように、数字の『1』から順番に数を増やしていき『12』まで数えます。しかし、プログラムの世界では、『月』は『0』から始まり『11』までの数字で表されます。
そのため、取得した『月』の数字に『1』を足した値が、実際の『月』になります。
var month = d.getMonth() + 1;
上記の場合、『getMonth』メソッドの結果が『0』なら『1月』を表し、『1』なら『2月』を表しています。また、『11』なら『12月』を表しています。
少し戸惑うかもしれませんが、『getMonth』メソッドでは、こういった数字が取得されるので気を付けてください。
ある時間からの経過時間を知る
プログラムでは、ある瞬間からの経過時間を知りたい時がよくあります。たとえば、元旦からの経過日数や、Webページを開いてからの滞在時間などを調べたい場合などです。
こういった場合は、『日付オブジェクト』の『getTime』メソッドを利用します。このメソッドを利用すれば、『1970年1月1日0時0分0秒からのミリ秒』を取得することができます。
経過時間を調べるには、元となる時間と、現在の時間とで、それぞれ『日付オブジェクト』を作成します。この2つの『日付オブジェクト』の『getTime』メソッドの戻り値の差を調べることで、経過時間を知ることができます。
以下、2001年1月1日からの、経過秒と、経過日数を計算して表示するプログラムです。
var dNow = new Date(); // 現在の日付オブジェクト
var dOld = new Date(2001, 1, 1); // 2001年1月1日の日付オブジェクト
var elapseMilliSeconds = dNow.getTime() - dOld.getTime(); // 経過時間（ミリ秒の差）
var elapseSeconds = elapseMilliSeconds / 1000; // ミリ秒を1000で割って秒に
var elapseDay = elapseSeconds / 60 / 60 / 24; // 秒を60秒、60分、24時間で割って日数に
alert("経過秒は" + elapseSeconds); // 経過秒をダイアログ表示
alert("経過日数は" + elapseDay); // 経過日数をダイアログ表示
現在の経過ミリ秒を得たい場合は、『new Date().getTime()』とする以外にも『+new Date()』でも取得できます。
以下、経過時間を簡便に計算するプログラムを書いてみます。
var start = +new Date(); // 開始（現在の日付オブジェクト）
var str = "";
for (var i = 0; i < 1000000; i ++) {
str += i;
}
var end = +new Date(); // 終了（現在の日付オブジェクト）
var elapseMilliSeconds = end - start; // 経過時間（ミリ秒の差）
alert("経過ミリ秒は" + elapseMilliSeconds); // 経過秒をダイアログ表示
『日付オブジェクト』のメソッド
以下、『日付オブジェクト』を使ったメソッドを紹介します。
下記の説明中の『d』は、現在時刻で初期化を行った『日付オブジェクト』を指します。
// 例）2010年12月31日1時2分3秒4ミリ秒の場合 var d = new Date();
日付の取得
| 式 | 意味 | 使い方 | 説明 |
|---|---|---|---|
| .getFullYear() | 西暦を取得 | a = d.getFullYear(); | 変数『a』に『2010』が入る |
| .getMonth() | 月を取得 | a = d.getMonth(); | 変数『a』に『11』が入る |
| .getDate() | 日を取得 | a = d.getDate(); | 変数『a』に『31』が入る |
| .getDay() | 曜日（0～6:日曜日開始）を取得 | a = d.getDay(); | 変数『a』に『5』（金）が入る |
| .getHours() | 時を取得 | a = d.getHours(); | 変数『a』に『1』が入る |
| .getMinutes() | 分を取得 | a = d.getMinutes(); | 変数『a』に『2』が入る |
| .getSeconds() | 秒を取得 | a = d.getSeconds(); | 変数『a』に『3』が入る |
| .getMilliseconds() | ミリ秒を取得 | a = d.getMilliseconds(); | 変数『a』に『4』が入る |
日付の設定
| 式 | 意味 |
|---|---|
| .setFullYear(n) | 西暦を設定 |
| .setMonth(n) | 月を設定 |
| .setDate(n) | 日を設定 |
| .setDay(n) | 曜日を設定 |
| .setHours(n) | 時を設定 |
| .setMinutes(n) | 分を設定 |
| .setSeconds(n) | 秒を設定 |
| .setMilliseconds(n) | ミリ秒を設定 |
特殊
1970年1月1日0時0分0秒からのミリ秒を取得、設定します。この時間は『UTC』と呼ばれる時間です。『UTC』については後述します。
| 式 | 意味 |
|---|---|
| .getTime() | ミリ秒を取得 |
| .setTime(n) | ミリ秒を設定 |
『UTC』と『GMT』
『UTC』（Universal Time, Coordinated）は、『協定世界時』と呼ばれるものです。この時間は、国際協定により人工的に維持されている世界共通の標準時です。
日本の時間は、この『UTC』より9時間進んでいます。
『GMT』（Greenwich Mean Time）は、『グリニッジ標準時』と呼ばれるものです。この時間は、ロンドンにあるグリニッジ天文台での平均太陽時です。『GMT』は、かつて世界の基準時刻として使われていましたが、今ではその役目は『UTC』が担っています。
『日付オブジェクト』のメソッド2
UTCの取得
| 式 | 意味 |
|---|---|
| .getUTCFullYear() | 西暦を取得 |
| .getUTCMonth() | 月を取得 |
| .getUTCDate() | 日を取得 |
| .getUTCDay() | 曜を取得 |
| .getUTCHours() | 時を取得 |
| .getUTCMinutes() | 分を取得 |
| .getUTCSeconds() | 秒を取得 |
| .getUTCMilliseconds() | ミリ秒を取得 |
UTCの設定
| 式 | 意味 |
|---|---|
| .setUTCFullYear(n) | 西暦を設定 |
| .setUTCMonth(n) | 月を設定 |
| .setUTCDate(n) | 日を設定 |
| .setUTCDay(n) | 曜日を設定 |
| .setUTCHours(n) | 時を設定 |
| .setUTCMinutes(n) | 分を設定 |
| .setUTCSeconds(n) | 秒を設定 |
| .setUTCMilliseconds(n) | ミリ秒を設定 |
特殊
| 式 | 意味 |
|---|---|
| .getTimezoneOffset() | UTCへの差分（分単位）を取得。日本は-540(-9時間) |
文字列取得
| 式 | 意味 |
|---|---|
| .toString() | 現地時刻を文字列で取得 |
| .toLocaleString() | 現地時刻を文字列で取得 |
| .toVarDate() | 現地時刻を文字列で取得 |
| .toGMTString() | UTCを文字列で取得 |
| .toUTCString() | UTCを文字列で取得 |
以下、文字列に変換したサンプルです。
var d = new Date(); document.write(d.toString() + "<br>"); document.write(d.toLocaleString() + "<br>"); document.write(d.toGMTString() + "<br>"); document.write(d.toUTCString() + "<br>");
【結果 Internet Explorer】
Tue Sep 12 2017 01:27:46 GMT+0900 (東京 (標準時)) 2017年9月12日 1:27:46 Mon, 11 Sep 2017 16:27:46 GMT Mon, 11 Sep 2017 16:27:46 GMT
【結果 GoogleC hrome】
Tue Sep 12 2017 01:09:49 GMT+0900 (東京 (標準時)) 2017/9/12 1:09:49 Mon, 11 Sep 2017 16:09:49 GMT Mon, 11 Sep 2017 16:09:49 GMT
サンプルの入手
以下は、今回出てきたサンプルです。
ZIPでまとめてダウンロード （右クリックから保存してください）
『sample1.html』（年月）を表示
『sample2.html』（経過時間）を表示
『sample2b.html』（経過時間簡便）を表示
『sample3.html』（日付の文字列変換）を表示
プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。
メモ帳で、ファイルの中身を見ることができます。
