JavaScriptのDateで時間を操ろう

##やりたいこと

1. 「〇〇時〇〇分〇〇秒」という表記をしたい
2. ストップウォッチみたいに経過時間を測りたい　→　ちょっと長くなりそうなのでこの記事では割愛...ドットインストールを見てみてね

##Dateとは
簡単にいうと日時を取得してくれるやつ。ミリ秒単位。
[MDNリファレンス]を読んでみよう。(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)

###ミリ秒とは？
1秒(s) = 1000ミリ秒(ms)

##よく使われるもの
現在時刻の取得については、主に以下の３つが使われてると思います。

###オブジェクトの作成

main.js

const a = new Date();
console.log(a); //=> Thu May 09 2019 22:29:38 GMT+0900 (日本標準時)
console.log(typeof a); //=> object

この方法で作成したオブジェクトについては、単体での表記は「Thu May 09 2019 22:29:38 GMT+0900 (日本標準時)」のようになりますが、例えば開始時間から終了時間を測りたい時は、このオブジェクト同士で引き算をするとミリ秒を返してもらえます。

main.js

//スタートボタンとストップボタンを用意している前提。それぞれのボタンを押すと、押した時の現在時刻が変数に代入されると仮定する。
let startTime = new Date.now(); //=> スタートボタンを押した時の現在時刻（Thu May 09 2019 22:29:38 GMT+0900 (日本標準時)みたいな感じ）
let endTime = new Date.now(); //=> ストップボタンを押した時の現在時刻(startTimeと同様）

console.log(endTime - startTime); //=> 1557408998211 こんな感じで時間差をミリ秒で表示してくれる

###Date.now()
Date.nowについては、1970年01月01日 00:00:00 UTC からの経過ミリ秒を整数で表してます。

main.js

console.log(Date.now()); //=> 1557408998211（基準時間からの経過ミリ秒）
console.log(typeof Date.now()); //=> number

###関数として呼び出す（＝newを伴わない）

main.js

console.log(Date()); //=> Thu May 09 2019 22:36:38 GMT+0900 (日本標準時)
console.log(typeof Date()); //=> string

###余談

ちなみに、関数としてのDate()に対し、その引数にDate.now()を与えると、Stringを吐き出します。（Date()単体と同じ結果）

main.js

console.log(Date(Date.now())); //=> Thu May 09 2019 22:36:38 GMT+0900 (日本標準時)
console.log(typeof Date(Date.now())); //=> string

##〇〇時〇〇分〇〇秒を表してみよう
色々と方法はあるかと思いますが、今回はDateオブジェクトを用いて表現したいと思います。
とりあえずコードを書きます。

main.js

//例えば、現在時刻が19時04分07秒の場合。

const d = new Date(); //=> オブジェクトの作成

const h = d.getHours(); //=>　時間の取得
console.log(h) //=> 19

const m = d.getMinutes(); //=> 分の取得
console.log(m); //=> 4

const s = d.getSeconds(); //=>　秒の取得
console.log(s); //=> 7

console.log(`${h}時${m}分${s}秒`); //=> 19時4分７秒


//19時０４分０７秒みたいな感じで、10の位に０を表示したい場合はpadStart()メソッド（後述）を使う

  console.log(`${String(h).padStart(2, '0')}時${String(m).padStart(2, '0')}分${String(s).padStart(2, '0')}秒`); 
//=> 19時０４分０７秒

このように、Dateオブジェクトに対しては、getHours,getMinutesなどの（ミリ秒）→（時間、分、秒）に変換してくれる便利なメソッドがあります。

##padStart()について

今回、（時間、分、秒）のいずれかが一桁の場合、１０の位に0を表示するためにpadStart()メソッドを使用しました。
padStart()メソッドについても、挙動を確認しておきましょう。

main.js

//padStart()について、挙動を確認しよう

const str = 'abc'; //=> String 'abc'を作成
console.log(str.padStart(8, 'x')); //=> 'xxxxxabc'

//padStart()はStringに対してのみ使用できる　→　String()メソッドでStringに変換してから使おう
const num = 123; //=> Number 123 を作成
console.log(String(num).padStart(6, '0')); //=> '000123'

言葉で説明すると、文字列.padStart(num, 'str')は、なんらかの文字列に対し、
「引数num」から「文字列の文字数」を引いた文字数（最初の例で言うと、abcの文字列は３文字でpadStartの第一引数は8なので、８−３＝５）の分だけ、「引数strの文字」（最初の例でいうとpadStartの第二引数'x')を、文字列の先頭に挿入するよってことです。

ここで注意が必要なのは、padStart()はStringにしか使用できないということです。
なので、時刻を表示する時、h,m,sの変数をそれぞれString()メソッドでStringに変換してからpadStart()を使用しています。

##終わりに

ちょっと予想以上に書きたい事が書けなかったからなんだか辛いです。笑
何かつまづいた時ってだいたい同じような記事をパラパラと見ると思うので、その一つとして、Dateでつまづいてる方への参考になれば幸いです。

実際、私自身、オブジェクト以外でDateを使用した事があまりないので、Dateのユースケースがよく分かっていないのですが、この先新たに学びがあったら、この記事もまた更新したいと思います。