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

この記事からわかること
- SNSの投稿時間を表示させる方法
- 何分前や何日前などの取得方法
- Dateオブジェクトの使い方
\ アプリをリリースしました /
SNSでよくある投稿日時を表示する機能がどのような流れで実現できるのかをまとめてみました。
Javascriptで指定の日付が現在から何日前か取得する流れ
まずは実現するための流れと重要になってくるポイントを確認します。
- 指定日のDateインスタンスを生成
- 現在のDateインスタンスと指定日のインスタンスの差分を取得
- 差分のDateインスタンスを生成
- 差分のDateインスタンスを整形して表示
この機能でポイントになるところ
- Dateオブジェクトは1970年1月1日午前0時0分0秒(UTC)からの経過ミリ秒数を保持しそれを整形して返している
- getTimeメソッドはUTCからの経過ミリ秒数を返す
- getUTCXxxxメソッドはインスタンスに保持されている値の適当な日時を返す(なければfalse)
実際のコード
今回はこちらの記事を参考にさせていただきました。
コードの解説
まず投稿日時のDateインスタンスを生成します。
次に現在日時のインスタンスも作成し、getTimeメソッド
でUTCからの経過時間をそれぞれ取得、現在経過時間から投稿経過時間を引いて両者の差分(difference
)を取得します。
この時点では変数diff
には経過ミリ秒数が入っているだけなのでDateインスタンス化することで、月日の形にメソッドを使って変換できるようにしておきます。インスタンス化前に出力すると以下のように経過ミリ秒数がそのまま出力されます。
インスタンス化する前はただの数字の羅列ですがインスタンス化したあとはオブジェクト(Dateオブジェクト)に変化しています。
あとは差分インスタンスから引き出せる年月日時間を順番に表示させればOKです。
年月日時間を取得するのはgetUTCXxxxメソッド
の役割です。年や月、日などを差分Dateインスタンスから取得します。年や月を取得するにはgetXxxxメソッド
もありましたがUTCを基準にしたいときはUTC付きのメソッドを使っておけば良さそうです。
もし差分Dateインスタンスに年や月がなければfalseを返してくれるのでその値に応じて分岐させて表示させれば「2年前」や「1時間前」など投稿日時にあった表示がされるはずです。
SNSの投稿日時を表示させる
SNSでよくある投稿日時を示す表示にするためにあとは組み込むだけです。
先程の一連のコードをメソッドとして定義し引数に日付情報を持った値を渡して戻り値で整形された値を返すようにしておきます。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。