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

今回の記事は、

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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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