【JavaScript】日時を取得する方法（Dateクラスを使おう）

今回の記事は、

• JavaScriptで日時を扱いたい
• JavaScriptで現在日時を取得するのってどうしたらいいの？
• JavaScriptで取得した日時を日本時間に変更するのってどうしたらいいの？

というお悩みをお持ちの方に向けた記事になっています。

「日時を扱う」と聞くとなんとなく複雑そうなイメージを持たれるかもしれませんが、JavaScriptでは非常にシンプルな方法で実現が可能です。

一度覚えてしまえば様々な場面で応用可能ですので、ぜひこの機会にマスターしておきましょう。

JavaScriptで日時を処理する方法

JavaScriptで日時を処理するには、「Date」クラスを使用します。

このDateクラスからインスタンスを作成したり、或いは登録されている様々なメソッドを活用することで、JavaScriptでも簡単に日時が扱えるようになるのです。

それでは早速、JavaScriptのDateクラスの基本的な使い方を確認していきましょう。

JavaScriptのDateクラスの使い方

JavaScriptで現在の日時を取得する方法

ではまずは、Dateクラスを使って現在の日時を取得する方法を解説していきます。

とはいえ、その方法は非常にシンプルで、Dateクラスのインスタンスを作成するだけで現在日時が取得できてしまいます。

実装コード

const today = new Date()

console.log(today)
=> Wed Apr 20 2020 22:42:47 GMT+0900 (日本標準時)

ちなみに、インスタンスを作成せずとも、Dateクラスのクラスメソッドであるnow()を使用することでも現在日時を取得することができるのですが、この場合、「1970年1月1日00:00:00 から経過したミリ秒 」を返すので、結局は別のメソッドで通常の形式に変換してあげないといけません。

実装コード

const today = Date.now()

console.log(today)
=> 1585537004165

console.log(new Date(today))
=> Mon Mar 30 2020 11:56:44 GMT+0900 (日本標準時)

JavaScriptで任意の日時を取得する方法

先ほど現在日時を取得する際には特に引数を指定しませんでしたが、引数を指定することによって任意の日時を取得することも可能です。

実装コード

const date = new Date(2020, 3, 1, 22, 30, 30)

console.log(date)
=> Wed Apr 01 2020 22:30:30 GMT+0900 (日本標準時)

このようにしてカンマ区切りで任意の日時を取得する場合の引数の種類は以下の通りです。

new Date(年（西暦）, 月, 日, 時, 分, 秒)

上記の例でも「ん？」と思われた方もいらっしゃるかもしれませんが、「月」については0から始まるため、「取得したい月 – 1」の数を指定する必要がありますのでご注意ください（※上記の例であれば、3と指定することで「April」が得られています）。

なお、引数の順番を間違えてしまったり、或いは必要な引数が設定されていない場合には思わぬ日時が返ってきてしまいますので、十分にご注意くださいね。

// 上記の例で指定していた日にち（1）を意図的に抜いています。

const date = new Date(2020, 3, 22, 30, 30)

console.log(date)
=> Thu Apr 23 2020 06:30:00 GMT+0900 (日本標準時))

このように、エラーは発生しないものの、日時が大幅にズレているのがお分かりいただけるかと思います。
（※この例では、JavaScript側が「2020年3月22日の30時30分」と判断しています。）

また、任意の日時を取得する際の引数としては、上記以外にも「日時の文字列」や「経過ミリ秒」をとることもできます。

「経過ミリ秒」は先ほどもちらっと登場したため、ここでは「日時の文字列」を指定する方法をご紹介します。

実装コード

const date = new Date("2020/4/1 22:30")

console.log(date)
=> Wed Apr 01 2020 22:30:00 GMT+0900 (日本標準時)

このように、/を使って年月日を区切ることで、任意の日時を取得することができます。

JavaScriptのDateインスタンスのフォーマット

さて、無事JavaScriptを使って日時を取得できましたが、このままの形（Wed Apr 01 2020 22:30:00 GMT+0900 (日本標準時)）では使いづらいですよね？

このDateインスタンスのフォーマットを整える（使いやすくする）ために、JavaScriptでは様々なメソッドが用意されており、その中で今回ご紹介するのは、以下の8種類です。

• 1. getFullYear()
• 2. getMonth()
• 3. getDate()
• 4. getDay()
• 5. getHours()
• 6. getMinutes()
• 7. getSeconds()

名前から何となくその使い方が分かるかもしれませんが、一部注意が必要なメソッドもありますので、まとめて解説させていただきますね。

実装コード

const today = new Date()

console.log(today)
=> Wed Apr 20 2020 22:42:47 GMT+0900 (日本標準時)

// 年を取得
const year = today.getFullYear()

console.log(year)
=> 2020

// 月を取得
// 月は 0 から始まる（1月が0）ため、 +1 を忘れないようにしてください
const month = today.getMonth() + 1

console.log(month)
=> 4

// 日を取得
const date = today.getDate()

console.log(date)
=> 20

// 曜日を取得
// getDay()メソッドの戻り値は 0~6 なので、配列を使って曜日を取得します
const days = ["日", "月", "火", "水", "木", "金", "土"]
const day = days[today.getDay()]

console.log(day)
=> 水

// 時を取得
const hours = today.getHours()

console.log(hours)
=> 22

// 分を取得
const minutes = today.getMinutes()

console.log(minutes)
=> 42

// 秒を取得
const seconds = today.getSeconds()

console.log(seconds)
=> 47

このように、Dateインスタンスに用意されているメソッドを使用することで簡単にフォーマットを整えることができます。

その他、toLocaleString()メソッドを使用してフォーマットを整えることも可能です。

実装コード

const today = new Date()
console.log(today)
=> Wed Apr 20 2020 22:42:47 GMT+0900 (日本標準時)

console.log(date.toLocaleString())
=> 2020/4/20 22:42:47

最後に

さて、ここまでJavaScriptを使って日時を取得する方法について解説してきましたがいかがでしたか？

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

日時を扱えるようになるだけで、開発の幅はグンと広がっていきますので、今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。