Webのあれこれ

アイキャッチアイコンday.jsで日付をフォーマット!

カテゴリ: React / Next.js

  • 作成日:2022/12/08
  • 更新日:2022/12/09

目次

    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の基本的な使い方について解説しました!
    とても、簡単に日付を操作できるのでどんどん活用していきましょう!!

    この記事へのコメント

    この記事にはまだコメントがありません。

    お気軽にコメント残してください📝

    © 2022 wadeenOpenMojiis licensed underCC BY-SA 4.0