dayjsの使い方

はじめに

皆さん、日付の操作ってどんな風にされていますか？？

私はほぼdayjsを使っています。

js標準のDateオブジェクトって扱いにくいと私は感じてしまって、専らdayjs派です。

dayjsは日付の操作が楽になる便利なライブラリです。軽量らしいです。

私は時間の差分等の計算が多いオリアプを開発したので、もう手放せないと思っているような尊い存在です。

大阪オフ会の0次会で伝えてみると知らなかった～！教えてほしかった～という声をいただいたので、ここでよく行う操作をまとめてみます。

日付系のライブラリではmoment.jsもかつては有名でしたが、サポート終了となったので、moment.js→dayjsに移行していっている流れです。これもすでに結構前の話ですが。。。ググって出てきてもmoment.jsではなくdayjsにしましょう。使い方はかなり似ています。

インストール

まずはインストールです。

npm install dayjs

インポート

使うファイルでインポートします。

import dayjs from "dayjs";

使い方

現在の日時情報の取得

const now = dayjs();
console.log(now);

//console
M {
  '$L': 'en',
  '$d': 2024-12-01T12:29:30.435Z,
  '$y': 2024,
  '$M': 11,
  '$D': 1,
  '$W': 0,
  '$H': 21,
  '$m': 29,
  '$s': 30,
  '$ms': 435,
  '$x': {},
  '$isDayjsObject': true
}

dayjs型のオブジェクトになるので、これを出力したい形式に整形します。

const now = dayjs().format("YYYY-MM-DD");
console.log(now);

//console
2024-12-01

dayjs()のカッコの中にDate型の値やstring型で渡したら、その日付情報をdayjsで操作することができます。

空なら現在時刻です。

 const now = dayjs("2020-12-1").format("YYYY-MM-DD");
 console.log(now);

//console
2020-12-01

format

format()内に文字列として書くだけなので簡単で自由自在です。

公式はこちら

日付の加算

const nextWeek = dayjs().add(7, "day").format("YYYY-MM-DD");
console.log(nextWeek);

//console(今日は12/1)
2024-12-08

日付の減算

 const lastWeek = dayjs().subtract(7, "day").format("YYYY-MM-DD");
  console.log(lastWeek);

//console(今日は12/1)
2024-11-24

減算はaddを使って-7としても同様の結果が得られます！

日付の比較

const date1 = dayjs("2024-12-01");
const date2 = dayjs("2024-12-31");
console.log(date1.isBefore(date2));

//console
true

const date1 = dayjs("2024-12-01");
const date2 = dayjs("2024-12-31");
console.log(date1.isAfter(date2));

//console
false

日付の差の計算

const start = dayjs("2024-12-01");
const end = dayjs("2024-12-31");
const diff = end.diff(start, "day");
console.log(diff);

//console
30

当月の最初の日を取得

const startOfMonth = dayjs().startOf("month").format("YYYY-MM-DD");
console.log(startOfMonth);

//console
2024-12-01

ちなみに翌月の最初の日付なら

const startOfNextMonth = dayjs()
    .add(1, "month")
    .startOf("month")
    .format("YYYY-MM-DD");
  console.log(startOfNextMonth);

//console
2025-01-01

当月の最終日を取得

const endOfLastMonth = dayjs()
    .endOf("month")
    .format("YYYY-MM-DD");
  console.log(endOfLastMonth);

//console
2024-12-31

ちなみに前月の最後の日付なら

const endOfLastMonth = dayjs()
    .subtract(1, "month")
    .endOf("month")
    .format("YYYY-MM-DD");
  console.log(endOfLastMonth);

//console
2024-11-30

注意点

オリアプで使う場合、VercelでSSRはtimezoneがUTCになるので気を付けてください。

デプロイしたとたんに時間がズレるというこおとが起こります(起こりましたwww)

9時間ズレますので知らないと結構焦ると思います。

タイムゾーンを明示的に日本にする必要があります。

私はdayjsのタイムゾーンをjaにするラッパーを作成してそれを使うようにしていました。

import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Tokyo");

export { dayjs };

このdayjsをimportして使っていたという感じです。

おわりに

めっちゃ簡単やんってなりませんでしたか？？

もう標準のDateオブジェクトの操作したくないです。

公式サイトにもサンプルあってわかりやすいと思うので、やりたいことに合わせて調べてぜひ活用してください！