day.jsで日付をフォーマット！

APIでデータを取得する際によく使われる、日付操作ライブラリのday.jsについて解説します。
今回は、React,TypeScriptで検証を行います。また、React ,Next.js初心者向けの記事になります🙇‍♂️

以前でしたら、moment.jsが主流だったと思うのですが、現在ではday.jsが主に用いることが多いかと思います！

手順

day.jsのインストール

普段通り、インストールします。

// npm
npm install dayjs

// yarn
yarn add dayjs

基本的な使い方

day.jsでは、簡単に日付を取得したり、タイムゾーンの操作を行うことが可能です。

JavascriptのDateオブジェクト生成することが多いかと思いますが、day.jsでも簡単に取得することができます。
フォーマットの指定で簡単に変更できます。

const today = dayjs().format("YYYY/MM/DD"); // 現在の日付情報を取得
console.log(today); // 2022/12/08

次にタイムゾーンの操作方法です。
タイムゾーンを操作する際は、初期化を行う必要があります。

// インポート
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'

// 初期化
  dayjs.extend(utc)
  dayjs.extend(timezone)

初期化をして、タイムゾーンのエリアを指定します。日本は、Asia/Tokyo を指定すればOKです。
あとは、そのまま繋げて書いてあげましょう！

// APIで取得した日付を指定の形に変換
  const date = "Fri Dec 08 2022 22:00:00 GMT+0900 (日本標準時)"; // APIで取得
  const now = dayjs.utc(date).tz("Asia/Tokyo").format("YYYY/MM/DD");
  console.log(now); // 2022/12/08

また余談ですが、Cloud Firestore等ではミリ秒で返ってきますが、その際は事前に変換してあげましょう！

firestoreData.map(({ date }) => {
  const firestoreDateTime = new Date(date.seconds * 1000)
  // (省略)
})

共通パーツにする

プラグインやフレームワーク等のアップデート、保守性等を考慮して、よく使うパーツは共通化しましょう。
軽微な調整でもファイル数が増えてくると、管理が大変ですしバグの温床になってしまいます。

今回は、utils > dateToString.ts を作成して、フォーマットのみ各ページで任意のものにできるようにします。
_{dateToString.ts}

import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'

  dayjs.extend(utc)
  dayjs.extend(timezone)

export const dateToString = (date: string | Date, format: string) => {
  return dayjs.utc(date).tz('Asia/Tokyo').format(format)
}

呼び出し側では、変換する日付とフォーマットを入れればOKです！これで使い回しましょ〜

dateToString(date, 'YYYY/MM/DD')

まとめ

簡単な内容でしたが、day.jsの基本的な使い方について解説しました！
とても、簡単に日付を操作できるのでどんどん活用していきましょう！！