【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

JavaScriptで現在時刻を取得する方法(new Date)

本記事では、JavaScriptで現在時刻を取得する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/10/06 13:34時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

現在の時刻を取得する方法

現在の時刻を取得するには、Dateオブジェクトを使用します。基本的な使い方は以下のとおりです。

let time = new Date();
console.log(time); // => Mon Mar 13 2023 15:01:43 GMT+0900 (GMT+09:00)

取得した値を見て分かる通り、このままだと少し使い勝手が悪いです。Dateオブジェクトには、年月日だけ取得できるメソッドがあるので紹介します。

let time = new Date();

// 年を取得:getFullYear()
console.log(time.getFullYear()); // => 2022

// 月を取得:getMonth()
console.log(time.getMonth()); // => 2

// 日を取得:getDate()
console.log(time.getDate()); // => 13

// 曜日を取得:getDay()
console.log(time.getDay()); // => 1

// 時を取得:getHours()
console.log(time.getHours()); // => 15

// 分を取得:getMinutes()
console.log(time.getMinutes()); // => 11

// ミリ秒を取得:getSeconds()
console.log(time.getSeconds()); // => 23

注意すべき点は、月を取得するgetMonthメソッドと曜日を取得するgetDayメソッドです。

getMonthメソッドは、1~12ではなく0~11の値を返します。今回は、2が返されているため2月と勘違いしそうですが、実際は3月になります。

getDayメソッドは、0~6の値を返します。値はそれぞれの曜日と紐づけられており、0(日曜日)~6(土曜日)になります。今回は、1が返されているので月曜日になります。

先輩くん

上記で紹介したメソッドを使用して、現在の時刻は◯年◯月◯日(◯)◯時◯分◯秒です。のようなコードを作成したので確認してみましょう!

let time = new Date();

let year = time.getFullYear();
let month = time.getMonth() + 1;
let data = time.getDate();
let day = time.getDay();
day = ["日", "月", "火", "水", "木", "金", "土"][day];
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();

console.log(
  `現在の時刻は${year}年${month}月${data}日(${day}) ${hours}時${minutes}分${seconds}秒です。`
);

// => 現在の時刻は2023年3月13日(月) 15時25分26秒です。

月は一つずれているため、time.getMonth() + 1で調整します。

曜日に関しては、日曜日~土曜日の順に入っている配列を用意しgetDayメソッドで取得した番号をインデックス番号として紐づいている配列要素を取得します。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次