タイムスタンプをわかりやすい形式で表示したい | 日付・時間操作

タイムスタンプをわかりやすい形式で表示したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのDateオブジェクトを使用して、タイムスタンプ（例えば1時間前）を「x時間前」などのわかりやすい形式で表示します。

使用するメソッド: Date(), getTime()
タイムスタンプをわかりやすい形式で表示するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧
Mathオブジェクトメソッドの機能一覧

使用するメソッド: Date(), getTime()

JavaScriptのDateオブジェクトを使用し、過去のタイムスタンプと現在の時刻を比較して「x時間前」の形式に変換します。

タイムスタンプをわかりやすい形式で表示するプログラム

以下のプログラムでは、1時間前のタイムスタンプを「1時間前」として表示しています。

HTMLとJavaScriptコード

    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        // タイムスタンプを「x時間前」などの形式に変換する関数
        function timeAgo(timestamp) {
            const now = new Date();
            const secondsAgo = Math.floor((now - timestamp) / 1000);

            // 時間の区切り単位を定義
            const intervals = {
                年: 60 * 60 * 24 * 365,
                月: 60 * 60 * 24 * 30,
                週: 60 * 60 * 24 * 7,
                日: 60 * 60 * 24,
                時間: 60 * 60,
                分: 60,
                秒: 1
            };

            // 各単位で適切な時間経過を計算
            for (const [unit, value] of Object.entries(intervals)) {
                const interval = Math.floor(secondsAgo / value);
                if (interval >= 1) {
                    return `${interval}${unit}前`;
                }
            }
            return 'たった今';
        }

        // タイムスタンプを変換して表示
        window.onload = function() {
            const pastDate = new Date(new Date().getTime() - 3600000); // 1時間前の日時
            const timeAgoResult = timeAgo(pastDate);
            document.getElementById('timeAgoResult').textContent = timeAgoResult;
        }
    </script>

    <h1>タイムスタンプをわかりやすい形式で表示する方法</h1>

    <div id="timeAgoResult"></div>