2022/1/5

【JavaScript】SNSの何日前、何分前を実現！日付と時間の計算方法

この記事からわかること

SNSの投稿時間を表示させる方法
何分前や何日前などの取得方法
Dateオブジェクトの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SNSでよくある投稿日時を表示する機能がどのような流れで実現できるのかをまとめてみました。

Javascriptで指定の日付が現在から何日前か取得する流れ

まずは実現するための流れと重要になってくるポイントを確認します。

指定日のDateインスタンスを生成
現在のDateインスタンスと指定日のインスタンスの差分を取得
差分のDateインスタンスを生成
差分のDateインスタンスを整形して表示

この機能でポイントになるところ

Dateオブジェクトは1970年1月1日午前0時0分0秒(UTC)からの経過ミリ秒数を保持しそれを整形して返している
getTimeメソッドはUTCからの経過ミリ秒数を返す
getUTCXxxxメソッドはインスタンスに保持されている値の適当な日時を返す(なければfalse)

実際のコード

    // 変数postDayに日付を格納しておく
    let postDay = '2022/01/5 19:32:42'

    // インスタンス化
    let posted = new Date(postDay);

    // 差分 = 現在の日時 - 投稿日時 
    let diff = new Date().getTime() - posted.getTime();

    // 経過時間をDateに変換
    let progress = new Date(diff);

    if (progress.getUTCFullYear() - 1970) {
      progress.getUTCFullYear() - 1970 + '年前';
    } else if (progress.getUTCMonth()) {
      progress.getUTCMonth() + 'ヶ月前';
    } else if (progress.getUTCDate() - 1) {
      progress.getUTCDate() - 1 + '日前';
    } else if (progress.getUTCHours()) {
      progress.getUTCHours() + '時間前';
    } else if (progress.getUTCMinutes()) {
      progress.getUTCMinutes() + '分前';
    } else {
      'たった今';
    }

今回はこちらの記事を参考にさせていただきました。

参考記事：JavaScriptで経過時間(「〜分前」とか「〜日前」)を表示したい

コードの解説

まず投稿日時のDateインスタンスを生成します。

let posted = new Date(postDay);

次に現在日時のインスタンスも作成し、getTimeメソッドでUTCからの経過時間をそれぞれ取得、現在経過時間から投稿経過時間を引いて両者の差分(difference)を取得します。

let diff = new Date().getTime() - posted.getTime();

この時点では変数diffには経過ミリ秒数が入っているだけなのでDateインスタンス化することで、月日の形にメソッドを使って変換できるようにしておきます。インスタンス化前に出力すると以下のように経過ミリ秒数がそのまま出力されます。

console.log(diff)
//  118067115

インスタンス化する前はただの数字の羅列ですがインスタンス化したあとはオブジェクト(Dateオブジェクト)に変化しています。

let progress = new Date(diff);
console.log(progress)
// object

あとは差分インスタンスから引き出せる年月日時間を順番に表示させればOKです。

if (progress.getUTCFullYear() - 1970) {
    progress.getUTCFullYear() - 1970 + '年前';
}

年月日時間を取得するのはgetUTCXxxxメソッドの役割です。年や月、日などを差分Dateインスタンスから取得します。年や月を取得するにはgetXxxxメソッドもありましたがUTCを基準にしたいときはUTC付きのメソッドを使っておけば良さそうです。

もし差分Dateインスタンスに年や月がなければfalseを返してくれるのでその値に応じて分岐させて表示させれば「2年前」や「1時間前」など投稿日時にあった表示がされるはずです。

SNSの投稿日時を表示させる

SNSでよくある投稿日時を示す表示にするためにあとは組み込むだけです。

先程の一連のコードをメソッドとして定義し引数に日付情報を持った値を渡して戻り値で整形された値を返すようにしておきます。

// メソッドとして実行
TimeDiff('2021/01/5 19:32:42');
// 結果：1年前(2022/1/5に実行の場合)

function TimeDiff(postDay) {
    let posted = new Date(postDay); 
    let diff = new Date().getTime() - posted.getTime();
    let progress = new Date(diff);

    if (progress.getUTCFullYear() - 1970) {
      return progress.getUTCFullYear() - 1970 + '年前';
    } else if (progress.getUTCMonth()) {
      return progress.getUTCMonth() + 'ヶ月前';
    } else if (progress.getUTCDate() - 1) {
      return progress.getUTCDate() - 1 + '日前';
    } else if (progress.getUTCHours()) {
      return progress.getUTCHours() + '時間前';
    } else if (progress.getUTCMinutes()) {
      return progress.getUTCMinutes() + '分前';
    } else {
      return progress.getUTCSeconds() + '秒前';
    }
  },

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

javascript