【React】JSON形式の日付データを綺麗に整形して表示する

はじめに

ReactとRails APIで掲示板を作っている際に、APIからjson形式で受け取った日付データを綺麗なフォーマットにするのに少し躓いたので自分なりの解決策を共有できたらと思います。
##目標
たとえば何か新規投稿を作ったとき、そのcreated_atデータは
2021-06-25T14:17:39.921Zのようなフォーマットになります。これを
2021/6/25 23:17のような形式に整形したいです。

##コード

Post.js

handleToDate=(date)=>{
        date = new Date(date);
        if(date.getMinutes() < 10){
            date = date.getFullYear()+"/"+(date.getMonth()%12+1)+"/"+date.getDate()+" "+date.getHours()+":0"+date.getMinutes()
        } else {
            date = date.getFullYear()+"/"+(date.getMonth()%12+1)+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()
        }
        
        return date;

こちらの関数でフォーマットを変更します。

まずは受け取ったjsonデータをnew Date()で日付のデータとして認識させます。

そこからgetFullYear(),getMonth(),getDate(),getHours(),getMinutes()関数でそれぞれ年、月、日、時間、分の情報を取得します。

細かいこととして、getMonth()で取得した月はなぜか実際の月-1されるようです。そのため+1で補正しています。12月のときには1月となるようにしています。また、分が一桁のとき0を先頭につけるようにしています。

活用

例として

App.js

return(
  <div>
      {this.handleToDate(this.post.created_at)}
  </div>
        );

このようにrender内で書いてあげることでうまく表示できます。

RailsでもAPIを介さない場合であればstrftime()を使うことで簡単に便利に日付フォーマットを指定できるようです。