第13話:日付オブジェクト

第2部 脱初心者プログラミング

目次

マンガ










マンガ台詞

【1Page】
先生:前回は難しい話だったので 今回は簡単な話をするぞ
遊:楽なの?
先生:楽だ
遊:私の鈍い頭を あまり使わせ ないで
先生:分かった
【2Page】
先生:さて今回は 日付オブジェクト について説明する
3人:日付オブジェクト?
先生:そうだ
    時間を表示したり 時間で処理を分岐 するための ものだ
    これは 基本的なやり方を そのまま覚えればいい
遊:え~ 覚えるの?
先生:コピペでいい
遊:それなら出来るわ
【3Page】
先生:じゃあ実際に 書いてみるぞ
        var d = new Date();
守:『Date』は日付ですよね
    『new』って何ですか?
麗:そういえば これまで何度か 出てきたわね
先生:いいところに 気付いたな
    さすが遊くん とは違う
遊:差別だ!
先生:『new』は 『オブジェクト』を 新たに作る という宣言だ
    『var d = new Date();』で
    『変数dに 新しいDateオブジェクトを入れる』
    という意味になる
    変数『d』には 現在時刻で オブジェクトが 作成される
【4Page】
守:この日付 オブジェクトは どう使うんですか?
先生:時間を取得したり 設定したりするのに使う
    少し例を書こう
        var d = new Date();
        alert(d.getHours() + "時" + d.getMinutes() + "分");
        getHours :時間を取得
        getMinutes:分を取得
    『14時12分』と表示
遊:簡単ね
先生:ああ だが 注意しなければ ならないこともある
    月の値だ
    月は『getMonth()』の 結果が『0』なら 実際は『1』月になる
    1つずつ値が ずれているんだ
【5Page】
遊:はは~ん JavaScriptを 作った人も レベルが低いわね
    数字を間違うなんて 私と同レベル じゃない!
麗:自慢にならないわね
先生:これは 間違っている わけではないんだ
    これは プログラムの世界の 慣例なんだ
遊:ガーン そういうこと だったとは!
先生:月を使う時は 月の値を修正して 利用するんだ
    というわけで ここだけ気を付けて くれればいい
    どうだ 楽だっただろう
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        alert(year + "年" + month + "月");

説明

この章では、『日付オブジェクト』について学びます。『日付オブジェクト』は、年月日や時間などを表現するためのオブジェクトです。また、このオブジェクトには、時間を取得したり、設定したりするための、様々なメソッドが用意されています。

プログラムでは、日付や時間によって、処理を分岐させることがよくあります。また、『ある時間』から、『どれくらいの時間が経過したのか』を知りたいことも多いです。そういった時に、この『日付オブジェクト』を使用します。

それでは以下、『日付オブジェクト』について詳しく見ていくことにしましょう。

『日付オブジェクト』

『日付オブジェクト』の作成

『日付オブジェクト』は、『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ファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。