第9回　日付を使ったプログラムを書いてみよう。

日付のプログラミングをします。
あんまり興味がないかもしれないですが、
ゲームでもリアルタイム連動方式とか（夜にしか出ないモンスターとかね）
する場合は日付とか時間の扱いは必須になるので。
勉強しておきましょう。

コンソールで日付に関するプログラムを入力する

Chromeの開発者コンソールで下記のコマンドを入力してみてください。

DateObj = new Date();
console.log(DateObj);
//Thu Jul 20 2017 18:09:48 GMT+0900 (JST)

DateObj = new Date();

console.log(DateObj);

//Thu Jul 20 2017 18:09:48 GMT+0900 (JST)

日付が英語で表示されました。
英語表記なので直す必要がありますが、それは後ほど対応するとして。

今回、プログラムに見慣れないワードがありますね。

「new」これはで新しいDateオブジェクトのインスタンスを作っています。
何言ってるかわからないと思います。
イメージとしては、新品のスマートフォンをドラ○もんの道具で複製して、
自分の携帯電話として設定する感じです。
今回の場合だと、Dateという日付に関する情報や処理が詰まったモノを
DateObjという名前で複製して使えるようにしたものです。
今はなんとなくの理解で大丈夫です。
後々嫌という出てくるので、その時にまた改めて説明します。

それでは日付の表示を見慣れているものに変更してみましょう。

var objDate = new Date()            //オブジェクトのインスタンス作成
var Year = objDate.getFullYear()    //年を取得
var Month = objDate.getMonth()      //月を取得
var Day = objDate.getDay()          //日付を取得
var Hours = objDate.getHours()      //時間を取得
var Minutes = objDate.getMinutes(); //分を取得
console.log(`${Year}-${Month}-${Day} ${Hours}:${Minutes}`); //ハイフンと:でつなげて表示

//2017-6-4 20:21

var objDate = new Date() //オブジェクトのインスタンス作成

var Year = objDate.getFullYear() //年を取得

var Month = objDate.getMonth() //月を取得

var Day = objDate.getDay() //日付を取得

var Hours = objDate.getHours() //時間を取得

var Minutes = objDate.getMinutes(); //分を取得

console.log(`${Year}-${Month}-${Day} ${Hours}:${Minutes}`); //ハイフンと:でつなげて表示

//2017-6-4 20:21

こんな感じになります。
単純ですね。年、月、日、時間、分を取得して結合しているだけです。
取得の仕方もnewで新しく作成したインスタンス(objDate)に.(ドット)をつけて
取得してきています。
もう少し詳しく説明すると、作成したオブジェクト(objDate)の中に

getFullYear
getMonth
getDay
getHours
getMinutes

という機能があり、それを呼び出しているというイメージです。
これはまた後ほど詳しくやるのでこんなもんか。位で大丈夫です（２回目）

ともあれ、日付が作成できましたが、ちょっと不恰好です。

2017-6-4 20:21

1	2017-6-4 20:21

私はこうしたいです。

2017-06-04 20:21

1	2017-06-04 20:21

0があったほうが、２桁で統一されるのでみやすいしなんかしっくりきます。
個人的な好みですが、2桁にしましょう。
2桁にする上で、理解しておかないといけない関数（機能）があります。
sliceってやつです。スライスチーズのスライスです。
文字切り出す機能です。
実際に使ってみましょう。

var str = "0123456789";
str.slice(1);   //123456789
str.slice(-1);  //9
str.slice(3,5); //34

var str = "0123456789";

str.slice(1); //123456789

str.slice(-1); //9

str.slice(3,5); //34

sliceを利用することで文字列を切り出すことができます。

sliceに正の整数の数値指定した場合はそれ以降の文字列全てが返される
sliceに負の整数を指定した場合は右から指定した数値分返す
sliceに値をコンマ区切りで２つ与えた場合はその間に含まれる文字を返す

以上です。
これを使って先ほど表示した時間に0を含める形で表示させましょう。

var objDate = new Date()            //オブジェクトのインスタンス作成
var Year = objDate.getFullYear()    //年を取得
var Month = objDate.getMonth()      //月を取得
var Day = objDate.getDay()          //日付を取得
var Hours = objDate.getHours()      //時間を取得
var Minutes = objDate.getMinutes(); //分を取得

Month = ('0'+ Month).slice(-2);     //月を0埋め
Day = ('0'+ Day).slice(-2);         //日を0埋め
Hours = ('0'+ Hours).slice(-2);     //時間を0埋め
Minutes = ('0'+ Minutes).slice(-2); //分を0埋め

console.log(`${Year}-${Month}-${Day} ${Hours}:${Minutes}`); //ハイフンと:でつなげて表示

//2017-06-04 20:51

var objDate = new Date() //オブジェクトのインスタンス作成

var Year = objDate.getFullYear() //年を取得

var Month = objDate.getMonth() //月を取得

var Day = objDate.getDay() //日付を取得

var Hours = objDate.getHours() //時間を取得

var Minutes = objDate.getMinutes(); //分を取得

Month = ('0'+ Month).slice(-2); //月を0埋め

Day = ('0'+ Day).slice(-2); //日を0埋め

Hours = ('0'+ Hours).slice(-2); //時間を0埋め

Minutes = ('0'+ Minutes).slice(-2); //分を0埋め

console.log(`${Year}-${Month}-${Day} ${Hours}:${Minutes}`); //ハイフンと:でつなげて表示

//2017-06-04 20:51

できました。
2桁にするポイントは一目瞭然ですが、とりあえず取り出した月、日、時間、分
の左に0をくっつけます。

元の数字	0を左につける	slice(-2)
4	04	04
20	020	20

sliceによって左から2文字だけ切り出すので、上の表の赤字の部分のみ
取り出すことができます。
元々２桁の場合はそのまま２桁が取り出せるので問題ありません。
続いて日付の計算をしてみましょう。

日付の計算について

JavascriptのDateは時間を1970年1月1日真夜中（午前0時0分0秒）からの経過時間(ミリセカンド)で取得することもできます。
これはUnixタイムと呼ばれます。

var objDate = new Date()            //オブジェクトのインスタンス作成
objDate.getTime();                  //1500553076838（19700101からの経過時間(ms)

1 2	var objDate = new Date() //オブジェクトのインスタンス作成 objDate.getTime(); //1500553076838（19700101からの経過時間(ms)

上を踏まえて、日付の計算をしてみましょう。
突然ですが、2020年のオリンピックは7月24日からの開催のようです。
残りの秒数を出してみましょう。

var objNow = new Date() 
var objOlympicDate = new Date("2020-07-24 20:00:00");
var RemainSecond = objOlympicDate.getTime() -  objNow.getTime();
console.log(RemainSecond/1000);  //msなので1000で割る！