JavaScriptのDateオブジェクトから時・分・秒を取得する方法を徹底解説！初心者でも理解できる日時処理

1. Dateオブジェクトとは？

1. Dateオブジェクトとは？

JavaScriptのDateオブジェクトは、現在の日付や時刻を取得したり、特定の日時を作成したりするための機能です。パソコンやスマートフォンの内部時計を使って情報を取り出すイメージで、時計の代わりの役割をしてくれる便利な仕組みです。

初めて触る人は「オブジェクト」という言葉が難しく感じるかもしれませんが、これは「日時をまとめて扱うための箱」と考えると理解しやすくなります。箱の中には「年」「月」「時」「分」「秒」などが入っていて、それぞれ取り出す方法が決まっています。

2. 現在の日時を作るには new Date()

2. 現在の日時を作るには new Date()

まずは日時を扱うための基準として、new Date()を使って現在の日時を取得します。これは「今の時刻をまとめた箱を作る」動作です。

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

このコードを実行すると、パソコンの内部時計をもとに現在の年月日と時刻が取得されます。

3. 時・分・秒を取り出すメソッド一覧

3. 時・分・秒を取り出すメソッド一覧

日時を扱うときに特に重要なのが、現在の「時」「分」「秒」を取り出すメソッドです。JavaScriptではそれぞれ専用の関数が用意されています。

• getHours() …… 時（0〜23）を取得する
• getMinutes() …… 分（0〜59）を取得する
• getSeconds() …… 秒（0〜59）を取得する

24時間表記で取得されるため、夜の10時なら「22」となります。これはパソコンの内部で24時間式を使っているためです。

const now = new Date();

const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

console.log(hour, minute, second);

4. 時・分・秒をまとめて見やすく表示しよう

4. 時・分・秒をまとめて見やすく表示しよう

時刻を使う場面では「14:05:09」のようにまとめて表示したいことがよくあります。分や秒が一桁のときは「05」のようにゼロをつけると読みやすくなるため、ゼロ埋めという処理を行います。

const now = new Date();
const h = String(now.getHours()).padStart(2, "0");
const m = String(now.getMinutes()).padStart(2, "0");
const s = String(now.getSeconds()).padStart(2, "0");

console.log(`${h}:${m}:${s}`);

このコードを実行すると、毎回きれいな2桁形式で時刻を表示できます。

5. 初心者がつまずきやすいポイント

5. 初心者がつまずきやすいポイント

JavaScriptの日時操作では、最初に覚えておくと便利な注意点がいくつかあります。ここではよくある疑問や勘違いを解消できるようにまとめています。

● 0から始まる値がある

日時を扱うとき、JavaScriptでは「0から始まる数値」が使われる場面があります。たとえば月は0が1月を表しますが、時・分・秒については0〜59という一般的な範囲です。この違いが混乱の原因になることがあります。

● getHours() は24時間表記

たとえば「午後3時」を「15」として取得するため、普段の感覚とは違うと感じる人もいます。これは世界中で共通して扱うための方式で、プログラムでは非常に合理的な考え方です。

● 毎回 new Date() を呼び出す必要がある

時刻が進むため、1秒後や1分後の時刻を取得したい場合は、その都度new Date()を呼び出して「今その瞬間の時刻」を取り直す必要があります。

6. 実行結果の例

6. 実行結果の例

14:05:09

実行するタイミングによって時刻は変わるため、表示された値が違っても心配は不要です。