【JavaScript】現在時刻を取得し、使いやすく扱う方法を初心者向けにわかりやすく解説

プログラミング言語•
JavaScript

はじめに

JavaScriptで現在時刻を取得する機能は、多くのプロジェクトで役立ちます。
ウェブアプリケーションの画面上に時計を表示したり、処理タイミングを測定したりと、さまざまな用途があるでしょう。
しかし、実際にコードを書いてみると、単純に時刻を取るだけでなく、日付を含むフォーマットやタイムゾーンへの配慮が必要になることがあります。
さらに初心者の方がつまずきがちなポイントとして、フォーマット変換や国際化といったトピックが挙げられます。
本記事では、JavaScriptで現在時刻を使いこなすために必要な知識を、できるだけ平易にまとめていきます。

まずはDateオブジェクトを中心に、どのように時刻を取得すればよいかを見ていきます。
また、取得した時刻を画面に表示する流れや、リアルタイムに更新する具体的な方法も紹介します。
さらに、ライブラリを使う方法や実務での活用シーンにも言及し、日常的な応用例を把握できる内容としました。
初心者でもわかりやすい解説を心がけていますので、ぜひ最後まで読んでみてください。

この記事を読むとわかること

  • JavaScriptで現在時刻を取得する基本的な方法
  • 取得した時刻をフォーマットする手順
  • タイムゾーンや国際化を考慮した実装のポイント
  • リアルタイム更新を行う際の注意点
  • 実務で役立つ応用例

JavaScriptで現在時刻を取得する方法の概要

JavaScriptで現在時刻を扱うときは、基本的にDateオブジェクトを使用します。
このDateオブジェクトは、ブラウザやNode.jsなどさまざまな環境で同じように使えるのが特長です。

次のようなコードを書けば、現在時刻を表すDateインスタンスが得られます。

const now = new Date();
console.log(now);

画面に表示される内容は環境によって少し異なりますが、一般的には「Sat Feb 15 2025 12:34:56 GMT+0900 (Japan Standard Time)」のような形式が返されます。
これだけでも日付や時刻の情報を取得できますが、フォーマットや秒単位での分解など、もう少し細かい操作をしたいケースが多いでしょう。

実務では「日本時間で表示したい」「ユーザーのタイムゾーンごとに異なる時刻を表示したい」といったニーズが高まります。
また、UIに合わせて「12時間表示にするか」「24時間表示にするか」を切り替えることもよくあります。
そういった要望を満たすには、Dateオブジェクトのメソッドや追加のAPIを活用していくとよいでしょう。

Dateオブジェクトを活用するメリット

Dateオブジェクトには、以下のような利点があります。

1. 標準で用意されている

追加のライブラリを使わなくてもすぐに利用できるので、学習コストが低めです。

2. 時刻や日付の分解が簡単に行える

getHours() や getMinutes() などのメソッドを呼び出すだけで、必要な情報を数値として取得できます。

3. 日時の計算もある程度行える

setDate() や setMonth() といったメソッドを組み合わせることで、日付を加算・減算することも可能です。

一方で、柔軟なフォーマットの指定や、タイムゾーンの細かい扱いには工夫が必要です。
こうした場合は、標準APIや追加のライブラリが選択肢に入ってきます。

ミリ秒単位での現在時刻の取得

「ある処理にかかる時間を測定したい」「ページの読み込み速度を可視化したい」といったケースでは、より精密な時刻の扱いが必要になります。

JavaScriptでは、エポックタイム（1970年1月1日 00:00:00 UTC）からの経過ミリ秒が取得可能です。
以下のような関数を使うと、数値で経過ミリ秒を得られます。

// Date.now() を使う
const millisecondsNow = Date.now();
console.log(millisecondsNow);

// Dateオブジェクトから getTime() を呼び出す
const timeFromDate = new Date().getTime();
console.log(timeFromDate);

Date.now() は現在時刻をミリ秒単位で数値として取得できるメソッドです。
new Date().getTime() と結果は同じですが、処理の速度や可読性を考えると Date.now() のほうが簡潔かもしれません。

ミリ秒の値を使うと、2つのイベントの差分計算がしやすくなります。
たとえば「処理Aの開始時刻」と「処理Aの終了時刻」をミリ秒で取得すれば、その差分が処理時間になります。
これはパフォーマンスの分析や、操作の速度を計測したいケースでよく利用されます。

現在時刻の表示フォーマットを設定する

単純にDateオブジェクトを文字列化すると、人によっては読みにくい形式になることがあります。
また、ビジネスシーンでは「YYYY/MM/DD HH:mm」のように一定の書式で表示することが多いです。

JavaScriptでは、標準のメソッドを組み合わせればある程度のカスタマイズが可能ですが、フォーマット指定が少し手間に感じる場合があります。
このようなケースでは、例えば「getFullYear()」「getMonth() + 1」「getDate()」などを組み合わせ、文字列を組み立てる方法がベースとなります。

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 0から始まるため +1
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();

// 例: YYYY/MM/DD HH:MM の形にする
const formatted = `${year}/${month}/${day} ${hours}:${minutes}`;
console.log(formatted);

ただし、この方法だと月や日、時分が一桁のときに「2025/2/1 5:9」のような表示になってしまいます。
見た目を揃えたい場合は、二桁にゼロ埋めする関数を用意しておくと便利です。

function zeroPad(num) {
  return num < 10 ? `0${num}` : `${num}`;
}

const now = new Date();
const year = now.getFullYear();
const month = zeroPad(now.getMonth() + 1);
const day = zeroPad(now.getDate());
const hours = zeroPad(now.getHours());
const minutes = zeroPad(now.getMinutes());
const formatted = `${year}/${month}/${day} ${hours}:${minutes}`;
console.log(formatted); // 例: 2025/02/01 05:09

こういった細かなフォーマットを1つ1つ手作りするのは地道ですが、慣れると自由度の高さを感じられるでしょう。
後述するライブラリを用いると、これらの工程を簡略化できるので、プロジェクトの要件に応じて判断するとよいです。

24時間表示と12時間表示の切り替え

時刻表示の際に「午前・午後」で区別する12時間表示を用いることもあります。
たとえば、カスタマー向けの画面では「AM」「PM」を分かりやすく表示するパターンも多いです。
この切り替えには、以下のようなロジックを挟むことがよくあります。

function format12Hour(hours) {
  let suffix = "AM";
  let displayHour = hours;
  if (hours === 0) {
    displayHour = 12;
  } else if (hours === 12) {
    suffix = "PM";
  } else if (hours > 12) {
    displayHour = hours - 12;
    suffix = "PM";
  }
  return { hour: displayHour, suffix };
}

const now = new Date();
const { hour, suffix } = format12Hour(now.getHours());
const formatted12Hour = `${hour}:${zeroPad(now.getMinutes())} ${suffix}`;
console.log(formatted12Hour);

上記コードでは、0時を「12 AM」、12時を「12 PM」、13時以降は12を引いたうえで「PM」にして扱っています。
24時間表示に慣れている人にとっては少し煩雑に感じられますが、ユーザーが求める形式に合わせられるよう工夫してみてください。

時間を扱うときの注意点

JavaScriptで時間を扱う際には、いくつか注意すべきポイントがあります。
とくに、タイムゾーンが異なるユーザーやシステムと連携する場合は、ずれが生じないように気を配る必要があるでしょう。

たとえば、サーバーサイドとのやり取りでISO 8601形式（2025-02-15T03:45:00Zなど）を使うケースは一般的です。
この形式なら時差をUTC基準で示せるため、受け取る側が自由にローカル時刻に変換しやすくなります。

また、システムごとに標準が異なると、日時の取り扱いが複雑になることもあります。
数時間のずれや、日をまたいだ計算などでバグを引き起こしやすいので、仕様をきちんと確認することが重要です。

タイムゾーンを考慮した実装

JavaScriptのDateオブジェクトは、環境が持つローカルタイムゾーンを基準に動作します。
同じコードでも、実行する場所やブラウザの設定によって表示結果が変わる可能性があります。

タイムゾーンを明示的に指定したい場合は、以下のようにIntl.DateTimeFormat APIを使うと便利です。

const now = new Date();
const options = {
  timeZone: "America/New_York",
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  hourCycle: "h23", // 24時間表示にする
};
const formattedNY = new Intl.DateTimeFormat("en-US", options).format(now);
console.log(formattedNY); // 例: 02/14/2025, 22:34

ここでは timeZone: "America/New_York" を指定することで、特定の地域の時刻を取得できるようにしています。
また、hourCycle: "h23" を指定すると24時間表示を強制できるので、12時間表示と混ざらないように制御が可能です。

このようにIntl.DateTimeFormatを使うと、多言語対応や各地域のカレンダー形式にも適切に対応しやすくなります。
大型のサービスでは必須に近いAPIとなっており、グローバル展開する際には欠かせないアプローチです。

国際化APIの活用

上記で紹介したIntl.DateTimeFormatは、国際化API (ECMA-402) の一部です。
他にも通貨表記や数値フォーマットなど、さまざまな国際化処理が含まれています。

たとえばユーザーがアクセスしてきたブラウザの言語設定を自動で読み取り、その言語に応じて日付表示を変えるといった機能も比較的容易に実現できます。

const now = new Date();

// ブラウザがサポートしているロケールの例を取得
const userLocale = navigator.language; // "ja-JP" など

const formatter = new Intl.DateTimeFormat(userLocale, {
  year: "numeric",
  month: "long",
  day: "numeric",
  weekday: "long",
});
console.log(formatter.format(now));

このコードでは、ユーザーのロケールに合わせて「2025年2月15日 土曜日」というように表示が変わります。
ロケールが英語の場合は「Saturday, February 15, 2025」のような出力になるでしょう。

こうした仕組みを活用することで、同じプログラムでも多言語・多地域対応がしやすくなります。
時間表示だけでなく、より幅広い国際化対応を検討しているときは、国際化API全体を調べてみるとよいでしょう。

現在時刻のリアルタイム更新方法

ウェブページ上に「現在時刻を常に最新の状態で表示したい」という要件はよくあります。
たとえば、時計ウィジェットを作るときや、チャットアプリでメッセージの送信時刻を更新し続ける場合などが典型的です。

JavaScriptでリアルタイムに時刻を更新するには、代表的な方法として setInterval() が知られています。
定期的に関数を呼び出し、UIを更新するやり方です。

setIntervalを使った定期更新

setInterval() は、指定したミリ秒ごとにコールバック関数を実行します。
例えば1秒ごとに現在時刻を更新したい場合は、以下のようなコードになります。

function updateClock() {
  const now = new Date();
  const hours = zeroPad(now.getHours());
  const minutes = zeroPad(now.getMinutes());
  const seconds = zeroPad(now.getSeconds());
  document.getElementById("clock").textContent = `${hours}:${minutes}:${seconds}`;
}

// 1000ミリ秒ごと（1秒ごと）にupdateClockを実行
setInterval(updateClock, 1000);

このコードでは、HTML側に <div id="clock"></div> のような要素を用意し、JavaScriptで textContent を更新しています。
setInterval() の最小精度はブラウザやタブの状態に依存するため、厳密な1秒ではない場合もありますが、時計用途には大きな問題にはならないでしょう。

ただし、CPU負荷の観点から、あまり短い間隔で呼び出すとパフォーマンスが下がる可能性がある ため、適切な間隔を考えることも大切です。

頻繁に画面を書き換える処理では、端末のリソース消費が増える点に注意してください。

requestAnimationFrameとの違い

アニメーションや、画面のスムーズな再描画を最適化したい場合は、requestAnimationFrame() を使う方法もあります。
ただし、こちらはフレームレートに合わせて呼び出されるもので、時計のように「1秒ごとに正確に処理したい」という用途にはあまり向いていません。

requestAnimationFrame() は「次回リペイントが行われるタイミングでコールバックを実行する」という仕組みです。
そのため、ユーザーが別タブで作業をしている際は呼び出し頻度が下がる可能性があります。
一方で、アニメーションを行う場合には無駄な描画を減らせるため、パフォーマンス最適化には効果的です。

結論として、時刻表示や一定間隔での更新は setInterval()、アニメーション的な動きは requestAnimationFrame() と使い分けるのが一般的です。

ライブラリを使った現在時刻の操作

標準のDateオブジェクトや国際化APIを駆使しても、一部の処理をスマートに実装しにくい場面はあります。
たとえば、日時計算や詳細なフォーマット指定をスムーズに行いたいときに有名なのが moment.js です。
近年ではより軽量でシンプルな dayjs なども人気を集めています。

moment.js

moment.jsは、かつて多くのプロジェクトで採用されてきたライブラリです。
次のように書けば、現在時刻を簡単に指定フォーマットで出力できます。

// moment.js を利用して現在時刻を取得・フォーマット
const now = moment();
console.log(now.format("YYYY/MM/DD HH:mm:ss"));

さらに、add() メソッドで日付や時間を増減できるので、「現在時刻の3日後」や「2時間前」を簡単に表現できます。
ただし、moment.js はライブラリ自体が比較的大きく、すでにメンテナンスの優先度が下がっていると言われることもあるため、必要性をしっかり検討したほうがよいでしょう。

dayjs

dayjsは、moment.jsと互換性のあるAPIを持ちながら、サイズが小さいことが特長です。
シンプルに導入できるうえ、軽快に動作するので、近年はこちらを使うケースも増えています。

// dayjs を利用して現在時刻を取得・フォーマット
const nowDayjs = dayjs();
console.log(nowDayjs.format("YYYY/MM/DD HH:mm:ss"));

フォーマットやタイムゾーンの拡張プラグインも充実しているので、本格的な日時操作を行う場合に便利です。
ただし、プロジェクト全体の依存関係や、標準APIの機能で足りるかどうかを考慮した上で選ぶとよいでしょう。

標準機能で充分な場合は無理にライブラリを導入せず、国際化APIやDateオブジェクトを中心に検討しましょう。

実務で役立つ具体例

ここからは、現在時刻を扱うときに実務でよく出会うシーンを見ていきます。
実際のプロダクト開発で、どのように時刻や日付の機能が利用されるのかイメージを広げてみてください。

動的な時計ウィジェット

顧客向けポータルサイトや管理画面などに、リアルタイムの時計を配置する例です。
特に、コールセンター向けの管理画面では、オペレーターがシステムと共通の時刻を確認しやすいよう、常に表示しておくことが求められるケースがあります。

以下のようにHTML要素を用意し、JavaScriptでリアルタイムに更新するといった実装が可能です。

<div id="realtime-clock"></div>

<script>
  function renderClock() {
    const now = new Date();
    const hours = zeroPad(now.getHours());
    const minutes = zeroPad(now.getMinutes());
    const seconds = zeroPad(now.getSeconds());
    document.getElementById("realtime-clock").textContent = `${hours}:${minutes}:${seconds}`;
  }

  setInterval(renderClock, 1000);
</script>

このウィジェットはデザインしやすく、フォントや色を変えるだけでなく、12時間表記への切り替えなども簡単に対応できます。
「現在の時刻を即座に把握できる」ため、操作上のタイミングが重要なシステムで便利に活用されるでしょう。

サーバーとの時刻同期

多くのウェブアプリケーションは、サーバーサイドと連携することでデータをやり取りしています。
このとき、JavaScriptで取得したクライアント側の時刻と、サーバー側でログに記録される時刻がずれていると、調査やデバッグが難しくなる場合があります。

対策として、サーバー側で受け付けたリクエストの時刻をクライアントに返し、クライアントはそれを基準として表示や記録を行うという方法があります。
たとえば以下のようなフローをイメージしてください。

  1. ブラウザから「現在時刻を確認するリクエスト」をサーバーに送信
  2. サーバーは受付時刻をISO 8601形式などで返す
  3. JavaScript側は、その時刻を基にUIを表示

こうすることで、ユーザーのPC時刻がずれていても、サーバー時間を正とした基準を表示できます。
金融アプリやチケット購入サイトなど、正確な時刻表示が求められる場面では特に重要になるでしょう。

また、WebSocketやSocket.ioなどの常時接続を用いるアプリケーションであれば、サーバー定期送信の時刻を常に参照して同期を取ることもあります。
たとえ数秒程度の誤差でも、アプリによっては大きなインパクトになるので、要件に合わせて実装してください。

まとめ

JavaScriptで現在時刻を取得し、画面表示やロジックに活用する方法について、一通り解説してきました。
Dateオブジェクトを使えば、すぐに現在時刻を取得し、分解して使うことができます。
しかし、実際にはフォーマットやタイムゾーンへの配慮が必要だったり、リアルタイム更新の仕組みを組み込んだりするケースが出てくるでしょう。

  • Dateオブジェクトの基本
  • 国際化APIを使ったタイムゾーンや多言語対応
  • setInterval() でのリアルタイム更新
  • moment.js や dayjs などのライブラリによる高度な操作

これらを踏まえれば、初心者の方でも段階的に「現在時刻」周りの機能をマスターできるはずです。

実際のプロジェクトで必要になる機能は、いつもシンプルとは限りません。
特に日時操作は意外な落とし穴が多く、バグに直結しやすい領域です。
だからこそ、この記事を参考にしながら、まずは小さな時計アプリや簡単なフォーマット変換などを試してみるとよいのではないでしょうか。

少しずつ応用を重ねていくことで、必ず大きな自信や経験に繋がると思います。
ぜひ色々な時刻処理を試してみて、JavaScriptでの開発を楽しんでください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
プログラミング言語の新着記事をチェック

【PHP入門】初心者が押さえておきたい基礎から実務活用までをわかりやすく解説