日付オブジェクト

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第2部 脱初心者プログラミング
第13話:日付オブジェクト

目次



マンガ












マンガ台詞

【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分』と表示
遊:簡単ね
先生:ああ だが 注意しなければ ならないこともある
    年と月の値だ
    月は『1』月が『0』月になっている
    年はブラウザによっては 『1900』年が『0』年になっている
    つまり『6』月は『5』月に 『2010』年は『110』年に なっているわけだ
【5Page】
遊:はは〜ん JavaScriptを 作った人も レベルが低いわね
    数字を間違うなんて 私と同レベル じゃない!
麗:自慢にならないわね
先生:これは 間違っている わけではないんだ
    これは プログラムの世界の 慣例なんだ
遊:ガーン そういうこと だったとは!
先生:年月を使う時は こうする
    年や月の値を 修正して 利用するんだ
    というわけで ここだけ気を付けて くれればいい
    どうだ 楽だっただろう
        var d = new Date();

        var year = d.getYear();
        if (year < 2000) year += 1900;
        var month = d.getMonth() + 1;
        alert(year + "年" + month + "月");

        // 年はこちらでもよい
        var fullYear = d.getFullYear();
        alert(fullYear + "年" + 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〜』という名前のメソッドを使います。この値の取得ですが、いくつか注意点があります。それは、『getYear』と『getMonth』で取得する『年』と『月』の値についてです。

『年』を取得する場合の注意

『年』を取り出すメソッドには『getYear』と『getFullYear』の2種類があります。

『getYear』を使った場合、ブラウザによって取得できる値が違います。『110』という値を取得したり、『2010』という値を取得したりと、ブラウザによって異なる値が取得されます。『getYear』では、『2010』といった西暦の数字ではなく、『1900年』からの経過年数を戻すことがあります。そういった数値を取得した際は、得た値に『1900』という数字を足してから利用する必要があります。

var year = d.getYear();
if (year < 2000) year += 1900;

上記では、『getYear』メソッドで得た値が『2000』未満の場合に、『1900』という数字を足すようにしています。

もう1つの年を取得するメソッド『getFullYear』では、こういったわずらわしさはありません。『2010』のように、西暦の数字がそのまま取得できます。

var fullYear = d.getFullYear();

『年』を取得したい場合は、『getFullYear』を使った方が、簡単でよいでしょう。

『月』を取得する場合の注意

『月』は普通、『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);    // 経過日数をダイアログ表示

『日付オブジェクト』のメソッド

以下、『日付オブジェクト』を使ったメソッドを紹介します。

下記の説明中の『d』は、現在時刻で初期化を行った『日付オブジェクト』を指します。

// 例)2010年12月31日1時2分3秒4ミリ秒の場合
var d = new Date();
日付の取得
意味使い方説明
.getFullYear()西暦を取得a = d.getFullYear();変数『a』に『2010』が入る
.getYear()年を取得(ブラウザ依存)a = d.getYear();変数『a』に『110』か『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)西暦を設定
.setYear(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』が担っています。


参考:Wikipedia - 協定世界時
参考:Wikipedia - グリニッジ標準時

『日付オブジェクト』のメソッド2

UTCの取得
意味
.getUTCFullYear()西暦を取得
.getUTCYear()年を取得
.getUTCMonth()月を取得
.getUTCDate()日を取得
.getUTCDay()曜を取得
.getUTCHours()時を取得
.getUTCMinutes()分を取得
.getUTCSeconds()秒を取得
.getUTCMilliseconds()ミリ秒を取得
UTCの設定
意味
.setUTCFullYear(n)西暦を設定
.setUTCYear(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】
 Wed Apr 21 00:06:50 UTC+0900 2010
 2010年4月21日 0:06:50
 Tue, 20 Apr 2010 15:06:50 UTC
 Tue, 20 Apr 2010 15:06:50 UTC
 【結果 GoogleC hrome】
 Wed Apr 21 2010 00:08:12 GMT+0900 (Japan Standard Time)
 Wed Apr 21 2010 00:08:12 GMT+0900 (Japan Standard Time)
 Tue, 20 Apr 2010 15:08:12 GMT
 Tue, 20 Apr 2010 15:08:12 GMT



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(年月)を表示

sample1.html』(経過時間)を表示

sample2.html』(日付の文字列変換)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

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

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




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