JavaScriptで現在時刻を取得する方法 - Date()の基本解説

みなさん、Webサイトを作っていて時刻を表示したいと思ったことはありませんか？

「今何時だろう？」「リアルタイムで時計を表示したい！」「ログに時刻を記録したい！」こんな場面って、プログラミングではよくありますよね。

JavaScriptなら、Date()オブジェクトを使って簡単に現在時刻を取得できるんです！この記事では、初心者の方でも分かりやすいように基本的な使い方から実用例まで丁寧に解説します。きっと「時刻の操作って意外と簡単！」と感じられるはずですよ。

Date()オブジェクトって何？

JavaScriptの時刻管理の専門家

Date()オブジェクトは、JavaScriptで日付と時刻を扱うための専用ツールです。

簡単に言うと、「時刻に関することなら何でもお任せ！」という頼もしい存在なんです。現在時刻の取得はもちろん、日付の計算や比較、表示形式の変更などもできちゃいます。

できることの例

Date()オブジェクトでは、こんなことができます。

現在の時刻を取得する
年、月、日、時、分、秒を個別に取得する
曜日を調べる
時間の差を計算する
表示形式を変更する

これだけ機能があると、時刻に関する作業がグッと楽になりますね。

基本的な使い方を覚えよう

現在時刻を取得してみよう

最も基本的な使い方は、new Date()で現在時刻を取得することです。

const now = new Date();
console.log(now);
// 出力例: Sun Jul 06 2025 10:30:45 GMT+0900 (JST)

たったこれだけで、現在の日時が取得できます！ new Date()を引数なしで呼び出すと、今この瞬間の時刻が格納されたオブジェクトが作られるんです。

年月日時分秒を個別に取得する

「年だけ知りたい」「時刻だけ知りたい」という時は、専用のメソッドを使います。

const now = new Date();

console.log(now.getFullYear());  // 年 (例: 2025)
console.log(now.getMonth());     // 月 (0〜11、0が1月)
console.log(now.getDate());      // 日 (1〜31)
console.log(now.getHours());     // 時 (0〜23)
console.log(now.getMinutes());   // 分 (0〜59)
console.log(now.getSeconds());   // 秒 (0〜59)

ここで注意が必要なのは、getMonth()です！ 1月は0、2月は1...という風に、0から始まるんです。

ちょっと分かりにくいですが、この仕様は覚えておきましょう。

曜日も分かっちゃいます

const now = new Date();
const dayOfWeek = now.getDay(); // 0〜6 (0が日曜日)

const weekDays = ['日', '月', '火', '水', '木', '金', '土'];
console.log(weekDays[dayOfWeek]); // 例: 日

曜日も簡単に取得できます。 0が日曜日で、6が土曜日という仕組みです。

実際に使えるコード例を見てみよう

デジタル時計を作ってみよう

リアルタイムで更新される時計を作ってみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>デジタル時計</title>
    <style>
        #clock {
            font-size: 48px;
            font-family: 'Courier New', monospace;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>

    <script>
        function updateClock() {
            const now = new Date();
            
            // 時分秒を2桁で表示
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            const timeString = `${hours}:${minutes}:${seconds}`;
            document.getElementById('clock').textContent = timeString;
        }
        
        // 初回実行
        updateClock();
        
        // 1秒ごとに更新
        setInterval(updateClock, 1000);
    </script>
</body>
</html>

このコードでは、1秒ごとに時刻を更新して画面に表示します。 padStart(2, '0')を使うことで、1桁の数字も「01」のように2桁で表示できます。

setIntervalで1秒ごとにupdateClock関数を呼び出すことで、リアルタイムに更新される時計ができます。

日付を分かりやすく表示する

年月日を日本語形式で表示する関数を作ってみましょう。

function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は+1
    const day = String(date.getDate()).padStart(2, '0');
    
    return `${year}年${month}月${day}日`;
}

const now = new Date();
console.log(formatDate(now)); // 例: 2025年07月06日

ここでのポイントは、getMonth() + 1です。月は0から始まるので、実際の月を表示するには1を足す必要があります。

時間の差を計算してみよう

2つの時刻の差を計算する便利な関数も作れます。

function getTimeDifference(startDate, endDate) {
    const diffMs = endDate - startDate; // ミリ秒の差
    const diffSec = Math.floor(diffMs / 1000); // 秒に変換
    const diffMin = Math.floor(diffSec / 60); // 分に変換
    const diffHour = Math.floor(diffMin / 60); // 時間に変換
    
    return {
        hours: diffHour,
        minutes: diffMin % 60,
        seconds: diffSec % 60
    };
}

const startTime = new Date('2025-07-06T10:00:00');
const endTime = new Date('2025-07-06T12:30:45');

const diff = getTimeDifference(startTime, endTime);
console.log(`${diff.hours}時間${diff.minutes}分${diff.seconds}秒`);
// 出力: 2時間30分45秒

Dateオブジェクト同士を引き算すると、ミリ秒単位の差が計算できます。それを秒、分、時間に変換することで、分かりやすい時間差を表示できるんです。

タイムスタンプの取得方法

3つの方法を覚えよう

現在時刻をタイムスタンプ（数値）で取得する方法は3つあります。

// 方法1: getTime()メソッドを使用
const now = new Date();
const timestamp1 = now.getTime();
console.log(timestamp1); // 例: 1720233045000

// 方法2: Date.now()を使用（より簡潔）
const timestamp2 = Date.now();
console.log(timestamp2); // 例: 1720233045000

// 方法3: valueOf()メソッドを使用
const timestamp3 = new Date().valueOf();
console.log(timestamp3); // 例: 1720233045000

どの方法でも同じ結果が得られます。一番簡潔なのはDate.now()ですが、他の方法も覚えておくと便利です。

タイムスタンプは、1970年1月1日からの経過ミリ秒を表す数値です。

様々な文字列形式で表示してみよう

基本的な文字列化メソッド

Dateオブジェクトを文字列に変換する方法がいくつかあります。

const now = new Date();

console.log(now.toString());     // 完全な日時文字列
console.log(now.toDateString()); // 日付のみ
console.log(now.toTimeString()); // 時刻のみ
console.log(now.toISOString());  // ISO形式（UTC）
console.log(now.toLocaleString()); // ローカル形式

それぞれ異なる形式で表示されるので、用途に応じて使い分けましょう。

日本語での表示

日本語で表示したい場合は、toLocaleStringを使います。

const now = new Date();

// 日本語での表示
console.log(now.toLocaleString('ja-JP'));
// 例: 2025/7/6 10:30:45

// より詳細な設定
const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZone: 'Asia/Tokyo'
};

console.log(now.toLocaleString('ja-JP', options));
// 例: 2025/07/06 10:30:45

optionsオブジェクトを使うことで、表示形式を細かく指定できます。

実際のアプリでよく使うパターン

ファイル名に時刻を入れる

バックアップファイルなどに時刻を含めたい場合の例です。

function createFileName(baseName) {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    
    return `${baseName}_${year}${month}${day}_${hours}${minutes}.txt`;
}

console.log(createFileName('backup'));
// 例: backup_20250706_1030.txt

このようにすると、時刻が含まれたユニークなファイル名を作れます。

ログメッセージに時刻を追加

システムのログに時刻を記録する例です。

function logWithTimestamp(message) {
    const now = new Date();
    const timestamp = now.toISOString();
    console.log(`[${timestamp}] ${message}`);
}

logWithTimestamp('アプリケーションが開始されました');
// 出力: [2025-07-06T01:30:45.123Z] アプリケーションが開始されました

ISO形式のタイムスタンプを使うことで、国際的に標準的な形式でログを記録できます。

時間制限をチェックする

特定の時刻を過ぎているかをチェックする例です。

function checkTimeLimit(limitHours) {
    const now = new Date();
    const limitTime = new Date();
    limitTime.setHours(limitHours, 0, 0, 0); // 指定時刻に設定
    
    if (now > limitTime) {
        return '時間制限を過ぎています';
    } else {
        const remainingMs = limitTime - now;
        const remainingMin = Math.floor(remainingMs / (1000 * 60));
        return `残り${remainingMin}分です`;
    }
}

console.log(checkTimeLimit(18)); // 18時を制限時刻とする

現在時刻と制限時刻を比較することで、時間制限のチェックができます。

注意点とコツを覚えよう

タイムゾーンを意識しよう

時刻を扱う時は、タイムゾーンに注意が必要です。

// ユーザーのローカルタイムゾーン
const localTime = new Date();
console.log(localTime.toString());

// UTC時刻
const utcTime = new Date();
console.log(utcTime.toISOString());

// 特定のタイムゾーンでの表示
console.log(localTime.toLocaleString('ja-JP', {timeZone: 'Asia/Tokyo'}));

ユーザーの環境によってタイムゾーンが異なるので、どの時刻を基準にするか明確にしておきましょう。

月の扱いに要注意

月の扱いは間違いやすいポイントです。

// 間違い：直接月を使用
const wrongDate = new Date(2025, 7, 6); // 実際は8月6日

// 正しい：月は0ベースなので-1する
const correctDate = new Date(2025, 6, 6); // 7月6日

// または文字列で指定
const stringDate = new Date('2025-07-06');

月は0から始まることを忘れずに！文字列で指定する方が間違いが少ないかもしれません。

パフォーマンスを考慮しよう

頻繁に現在時刻を取得する場合は、Date.now()を使うのがおすすめです。

// 高頻度で現在時刻を取得する場合はDate.now()を使用
const start = Date.now();
// 何らかの処理
const end = Date.now();
const elapsed = end - start;
console.log(`処理時間: ${elapsed}ms`);

Date.now()は新しいオブジェクトを作らないので、少し高速です。

まとめ

JavaScriptのDate()オブジェクトを使った現在時刻の取得方法について学びました。

覚えておきたいポイント

new Date()で現在時刻を取得できる
年月日時分秒を個別に取得するメソッドがある
月は0から始まるので注意が必要
タイムゾーンを意識した処理を心がける
高頻度での時刻取得にはDate.now()を使用

実用的な活用法

リアルタイム時計の表示
ログメッセージへの時刻追加
ファイル名への時刻埋め込み
時間制限のチェック機能

これらの基本的な使い方をマスターすれば、Webアプリケーションで時刻を扱う様々な機能を実装できるようになります。最初は「複雑そう...」と思うかもしれませんが、実際に試してみると意外と簡単ですよ。

ぜひ今日から、あなたのプロジェクトでDate()オブジェクトを活用してみてくださいね！

JavaScriptで現在時刻を取得する方法 - Date()の基本解説

JavaScriptで現在時刻を取得する方法 - Date()の基本解説

Date()オブジェクトって何？

JavaScriptの時刻管理の専門家

できることの例

基本的な使い方を覚えよう

現在時刻を取得してみよう

年月日時分秒を個別に取得する

曜日も分かっちゃいます

実際に使えるコード例を見てみよう

デジタル時計を作ってみよう

日付を分かりやすく表示する

時間の差を計算してみよう

タイムスタンプの取得方法

3つの方法を覚えよう

様々な文字列形式で表示してみよう

基本的な文字列化メソッド

日本語での表示

実際のアプリでよく使うパターン

ファイル名に時刻を入れる

ログメッセージに時刻を追加

時間制限をチェックする

注意点とコツを覚えよう

タイムゾーンを意識しよう

月の扱いに要注意

パフォーマンスを考慮しよう

まとめ

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説