JavaScriptで現在時刻を取得・表示する方法：Dateオブジェクトの基本とフォーマット調整

現代のWebアプリケーション開発において、現在時刻を取得して画面に表示する機能は非常に一般的です。

JavaScriptには、日付や時刻を操作するための標準的な仕組みとして、古くから親しまれているDateオブジェクトが存在します。

しかし、用途に応じて適切なフォーマットで表示したり、タイムゾーンを考慮したりするには、基礎知識をしっかりと押さえる必要があります。

この記事では、JavaScriptで現在時刻を扱う基本から、実務で役立つフォーマット調整のテクニックまでを詳しくご紹介します。

Dateオブジェクトで現在時刻を取得する基本

JavaScriptで現在時刻を扱うための最も基本的な方法は、new Date()を実行してインスタンスを生成することです。

この命令を呼び出した瞬間のシステム時刻が、オブジェクトとして保持されます。

// 現在時刻のインスタンスを作成
const now = new Date();

// コンソールに表示
console.log(now);

Wed May 20 2026 10:30:00 GMT+0900 (日本標準時)

生成されたnowという変数には、年、月、日、時、分、秒、ミリ秒といった詳細な情報が含まれています。

ただし、上記の結果からわかるように、標準の出力形式は人間にとって必ずしも見やすいものではありません。

そのため、ここから必要なパーツだけを取り出して整形する作業が必要になります。

日付・時刻の各要素を個別に取得する方法

Dateオブジェクトには、特定の要素だけを数値として取り出すためのメソッドが用意されています。

これらを使用することで、「時」や「分」だけを抽出して独自の形式で表示することが可能です。

主要なゲッターメソッド一覧

よく利用されるメソッドを以下の表にまとめました。

ここで注意が必要なのは、getMonth()が「0」から始まる点です。

1月を取得すると「0」、12月を取得すると「11」が返されるため、表示する際には必ず「+1」をする必要があります。

また、曜日は数値で返されるため、日本語の曜日名を表示したい場合は配列を用意して変換するのが一般的です。

const now = new Date();

const year = now.getFullYear();
const month = now.getMonth() + 1; // 1を足す
const date = now.getDate();
const dayList = ["日", "月", "火", "水", "木", "金", "土"];
const day = dayList[now.getDay()];

console.log(`${year}年${month}月${date}日（${day}）`);

2026年5月20日（水）

Intl.DateTimeFormatによる高度なフォーマット

手動で文字列を組み立てる以外に、Intl.DateTimeFormatオブジェクトを使用する方法があります。

これは国際化APIの一部であり、多言語対応や複雑なフォーマットを非常にシンプルに記述できる強力なツールです。

const now = new Date();

// 日本語の形式で「時:分」までを表示
const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

console.log(formatter.format(now));

2026/05/20 10:30:00

この方法の利点は、「2-digit」を指定するだけで自動的に0埋め（ゼロパディング）を行ってくれる点にあります。

また、国コードを変更するだけで、アメリカ形式（MM/DD/YYYY）やイギリス形式などへ瞬時に切り替えることができます。

モダンなフロントエンド開発では、保守性の観点からこのAPIが推奨される場面が増えています。

文字列操作によるゼロパディングの実装

Intlを使わずに、数値が1桁の場合に先頭に「0」を付けたい場合は、String.prototype.padStart()メソッドが便利です。

これは、文字列の長さが指定した値に満たない場合、指定した文字で埋めてくれるメソッドです。

const now = new Date();

const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');

console.log(`${hours}:${minutes}:${seconds}`);

09:05:07

padStart()は文字列に対して使用するメソッドであるため、数値を一度String型に変換してから呼び出すことがポイントです。

単純なデジタル時計の表示など、特定の部分だけを整形したい場合に非常に役立ちます。

次世代の標準：Temporal APIによる日付操作

2026年現在のJavaScript環境において、従来のDateオブジェクトの欠点を解消するために導入されたのがTemporalAPIです。

Dateオブジェクトは「月が0から始まる」「不変性（イミュータビリティ）がない」といった設計上の課題を抱えていました。

Temporalを使用すると、より直感的かつ厳密に現在時刻を扱うことが可能です。

// 現在の日時を取得（Temporal API）
const now = Temporal.Now.zonedDateTimeISO();

console.log(now.toString());
// 特定の要素へのアクセスも容易
console.log(`${now.year}年${now.month}月${now.day}日`);

Temporal.Now.zonedDateTimeISO()を使用すると、タイムゾーン情報を含んだ現在時刻が取得されます。

これにより、タイムゾーン計算のミスを防ぎ、より堅牢なプログラムを作成できるようになります。

まだブラウザのサポート状況を確認する必要はありますが、今後のJavaScript開発における標準となるため、覚えておいて損はありません。

実用例：リアルタイムに更新されるデジタル時計を作る

現在時刻をただ一度表示するだけでなく、1秒ごとに更新されるデジタル時計を実装してみましょう。

これには、指定した時間間隔で処理を繰り返すsetInterval関数を使用します。

function updateClock() {
  const now = new Date();
  
  // Intl APIを利用して整形
  const timeString = new Intl.DateTimeFormat('ja-JP', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).format(now);
  
  // HTML要素に書き出し（例: id="clock"）
  // document.getElementById('clock').textContent = timeString;
  
  console.log(timeString);
}

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

このコードを実行すると、コンソールや画面上の表示が1秒ごとに切り替わります。

実際のWebサイトでは、textContentを使用して特定のHTML要素を書き換えることで、動的な時計表示を実現できます。

ただし、タブがバックグラウンドにある場合などは実行間隔がズレることがあるため、厳密な精度を求める場合は注意が必要です。

外部ライブラリの利用を検討すべきケース

標準のDateオブジェクトやIntlAPIで多くのことは可能ですが、より複雑な日付計算やパースが必要な場合は、ライブラリの導入も検討しましょう。

例えば、Day.jsやLuxonといったライブラリは、軽量でありながら直感的なメソッドチェーンで日付を操作できます。

「2つの日付の差分を詳細に計算したい」「非常に特殊な形式の文字列を日付として読み込みたい」といった要件がある場合に適しています。

一方で、単に現在時刻を表示するだけであれば、ライブラリを使わず標準機能のみで完結させるのがパフォーマンス面で最も優れています。

まとめ

JavaScriptで現在時刻を取得する方法は多岐にわたりますが、基本となるのはnew Date()によるインスタンスの生成です。

取得したデータは、getFullYear()などのメソッドで個別に取り出すことも、Intl.DateTimeFormatで一括して整形することも可能です。

特にIntlAPIは、複雑なゼロパディングの手間を省けるため、積極的に活用することをおすすめします。

また、最新のTemporalAPIの登場により、JavaScriptの日付操作はより安全で利便性の高いものへと進化しています。

まずは標準機能を使いこなし、必要に応じて最適な手法を選択できるようになりましょう。