【Rails × React】うわ…Railsのcreated_at、汚すぎ…！

6989 ワード
React Rails6 Rails moment.js Rails テキストリンク

Rails × React SPAの作成にあたり、投稿日時をフロントで表示したくなった。
Railsではデフォルトでcreated_at、というカラムが生成されるのでこれをうまくビューで表示したい。
というのもrailsのcreated_atはUTC時刻でdatetime型なので以下のように画面上にそのまま表示するとキモい

よってこれをなんとかしたい。

結論…momentを使おう

以下サイト参考にさせていただきました。
https://ryusou.dev/posts/react-day-momentjs

手順①…momentのインストール

以下のコマンドを実行

npm install moment

手順②…momentの読み込み

以下の記述をmomentを読み込みたいjsxファイルに記述

import moment from moment

手順③…日付を表示したい箇所でmomentを呼び出す

{this.state.outputs.map((output, output_index) => {
  return(
    <li key={output_index}>
      <h3>アウトプット{output_index+1}</h3>
      <h4>気づき</h4>
      <p>{output.awareness.content}</p>
      {output.action_plans.map((action_plan, action_plan_index) => {
        return(
          <div className="action-plan" key={action_plan.id}>
            <h4>アクションプラン{action_plan_index +1}</h4>
            <p>{action_plan.time_of_execution}{action_plan.what_to_do}{action_plan.how_to_do}</p>
          </div>
        )
      })}
      <p>投稿日：{moment(output.awareness.created_at).format('YYYY-MM-DD')}</p>
    </li>
  )
})}

今回は読書のアウトプット一覧にて、気付きとアクションプランを表示する箇所に実装。

<p>投稿日時：{moment(output.awareness.created_at).format('YYYY-MM-DD')}</p>

この部分でmomentを使用。書き方としては

moment(日付データ).format('表示したいフォーマット')

の形式になる。

実装結果

これで以下のようにcreated_atから日付だけを抜き出すことに成功。
日付もちゃんとUTCとのずれが修正されているし、見た目としてもとても見やすくなった。