プログラミング雑記

【JavaScript】SNSの「何年前」「何時間前」を実装

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

はじめに

日付を利用する際に2022/2/22のように絶対値で表現したい場合と、「2年前」のように相対的な経過時間を表現したい場合があります。
SNSではよく後者の表現が利用されますが、後者のような相対的な表現をJavaScriptで実装してみようと思います。

実装方法

こちらの記事を参考にさせていただきました。
ちょっと違う部分は、未来の日付にも対応(xx年後)している部分と対象となった複数の要素を更新し続ける部分です。

コード

<div class="elapsed_time" data-datetime="2022/1/11 10:10"></div>
<div class="elapsed_time" data-datetime="2022/2/22 10:10"></div>
function get_elapsed_time(target_datetime_txt) {
    let target_datetime = new Date(target_datetime_txt);
    let now_datetime_text = new Date().getTime();
    let now_datetime = new Date(now_datetime_text);
    let diff = now_datetime.getTime() - target_datetime.getTime();
    let progress = new Date(Math.abs(diff));
    var num = 0;
    if (progress.getUTCFullYear() - 1970) {
        num = progress.getUTCFullYear() - 1970;
        var unit = "年";
    } else if (progress.getUTCMonth()) {
        num = progress.getUTCMonth();
        var unit = "ヶ月";
    } else if (progress.getUTCDate() - 1) {
        num = progress.getUTCDate() - 1;
        var unit = "日";
    } else if (progress.getUTCHours()) {
        num = progress.getUTCHours();
        var unit = "時間";
    } else if (progress.getUTCMinutes()) {
        num = progress.getUTCMinutes();
        var unit = "分";
    } else {}
    if (diff < 0) {
        var ret = num + unit + "後";
    } else if (diff > 0) {
        var ret = num + unit + "前";
    } else {
        var ret = "たった今";
    }
    return ret;
}

$(function() {
    setInterval(function() {
        $(".elapsed_time").each(function(i, o) {
            var datetime = $(o).attr("data-datetime");
            $(o).text(get_elapsed_time(datetime));
        });
    }, 1000);
});

解説

HTMLの方でclassに「elapsed_time」を設定した要素が対象となります。対象の要素のdata-datetimeに入力されている日付を取得して相対的な時間を表示しています。
この例では1秒ごとに更新します。

  • この記事を書いた人

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

-プログラミング雑記