【JavaScript】日付表示を最適化する(SNS、チャット等向け)

SNS等の日付表示を最適化

SNS等では、日付表示で少し工夫がされていますよね。

昨日の投稿に「昨日」や、今日の投稿は日付表示がなかったりと、見やすくなっていますよね。

なので、今回の記事では、JavaScriptで簡単に表示を最適化するプログラムを作ってみましょう！

日付を取得

最初は日付取得から始まります。

年、月、日、時間、秒を一つ一つ取得していきましょう。

var today = new Date();

そして一つ一つ取得していきます。

//今日の年
var year = today.getFullYear();
//今日の月(1月が0なので+1)
var month = today.getMonth()+1;
//今日の日
var data = today.getDate();
//今の時間
var hours = today.getMinutes();
//今の分
var minutes = today.getMinutes();
//今の秒
var seconds = today.getSeconds();

月だけ+1してあります。これはよくやってしまうミスで、あれ？と思うと大体1足していないのが原因です。

変換したい日付を用意

どのようなデータになっているかはその時次第ですが今回は日付の取得時と同様に一つ一つ変数に格納しておきます(時刻データが一つの文字列等になっている場合正規表現等でうまく抜き出してください。正規表現に関連する記事はこの辺で探してください:正規表現 - Qiita)

簡単に適当な日付を入れていきます。

今回は、昨日の日付を入れましょう。ソースコードは次のようになります。

読み込み中...

※このソースコードはJavaScriptで最新の日付になるよう更新しているため表示されない場合があるほか、一日などは前の日付が0日と表示される可能性があります。
全ての要素に「_2」を付けわけました。

ここから最適化するコードを書いていきましょう。

最適化するコードの記述

コードを書いていきますが、今まで記述したコードとは変数名等異なりますので注意してください。

まずはざっくり作ってみました。

var json={year:○○,month:○○,data:○○,hours:○○,minutes:○○};
//今回現在の日付と比較する日付は配列[json]にに入っているという状態です。
var data = json['data'];
var year = json['year'];
var mo = json['month'];
var today = new Date();
//昨日の日付の場合の確認処理
var datas = (data+1)+"日";

data+="日";
mo+="月";
year+="年";

if(year===today.getFullYear()+"年"){
  //年が同じ場合非表示
  year="";
  if(mo===(today.getMonth()+1)+"月"){
    /月が同じ場合非表示
    mo="";
    if(data===today.getDate()+"日"){
      //日が同じ場合非表示
      data="";
    }else if(datas===today.getDate()+"日"){
      //日が昨日の場合「昨日」と表示
      data="昨日";
    }
  }
}
var minu=json['minutes'];
var hou=json['hours'];
document.write(year+mo+data+hou+`時`+minu+`分`);

この処理は、年が同じであれば非表示、日が同じであれば非表示、日付が今日の場合非表示、昨日の場合「昨日」と表示されるだけのものです。

難しいコードを書かずに、ただ「年が同じだな、じゃあ非表示、」とすごく単純なことをやっているだけなのです。

もちろん少し改造するだけで「去年」もパターンに追加することができますし、改造もしやすいコードになっています。

最後に

プログラムは、できればいい、だけでは終わらず、こうしたらもっと良くなる。もっと使いやすく、もっと使ってもらえるところを見つけ、改善していくことで、あなたのプロジェクトはいいものになるかもしれません。