Day.jsの使い方|インストールからformat・日付計算・比較まで

フレームワーク・ライブラリ
記事内に広告が含まれています。

JavaScriptで日付を扱っていて、標準のDateオブジェクトに手こずった経験はないでしょうか。月が0始まりになる、表示用の文字列を自分で組み立てる必要がある、日付の計算で元のDateが書き換わるなど、Dateには扱いにくい点が多くあります。Moment.jsの代わりになる軽量なライブラリとしてDay.jsが知られていますが、「Dayjs 使い方」で検索しても、インストール、format、日本語化、プラグインの情報が別々の記事に散らばっていて、全体像をつかみにくいのが実情です。

この記事は、Day.jsを初めて使う人が、導入から実際の開発での利用まで1本で理解できるようにまとめています。コードはコピーしてそのまま試せる形で掲載しています。

この記事を読んでわかること

  • npmとCDNそれぞれでのインストール方法と、importの書き方
  • 現在日時の取得と、formatによる日付の整形(日本語表記・曜日を含む)
  • add・subtract・diff・isBeforeなど、日付の計算と比較の使い分け
  • localeによる日本語化と、プラグイン・タイムゾーンの扱い
  • ReactやNode.jsでの使い方と、Moment.jsから移行するときの注意点
Audibleプレミアムプラン30日間無料体験

Day.jsの使い方を始める準備

Day.jsは、JavaScriptで日付の作成・整形・計算・比較を行うための軽量ライブラリです。導入方法は2通りあり、ビルド環境のあるプロジェクトなら npm install dayjs、HTMLファイルだけで試したいなら CDN の <script> タグを使います。どちらの方法でも、dayjs() という関数から始める点は変わりません。

なお、ライブラリの名称は「Day.js」ですが、npmのパッケージ名と関数名は dayjs です。「Dayjs」「dayjs」と表記されていても、指しているのは同じものです。

Day.js · 2kB JavaScript date utility library
2kB JavaScript date utility library
Day.jsの使い方を始める準備

Day.jsでできることを簡単に確認

Day.jsでできるのは、日付の作成・取得・操作・表示・比較です。公式では、Moment.jsとほぼ互換のAPIを持つ2kBの軽量ライブラリとして紹介されています。

主な操作とメソッドの対応は次のとおりです。

やりたいこと主なメソッド例
日付を作るdayjs()dayjs('2026-09-21')
年・月・日を取り出すyear() month() date() day()dayjs().year()
文字列に整形するformat()dayjs().format('YYYY-MM-DD')
日付を進める・戻すadd() subtract()dayjs().add(7, 'day')
日付の差を求めるdiff()a.diff(b, 'day')
日付を比較するisBefore() isAfter() isSame()a.isBefore(b)

それぞれの使い方は、後続の見出しで順に扱います。

Day.jsには、標準の Date と異なる特徴が3つあります。

  • Date を書き換えない:ネイティブの Date.prototype は変更せず、Date を包んだ Dayjs オブジェクトを返します。
  • イミュータブル(不変):add() などの操作は元のオブジェクトを変更せず、新しい Dayjs オブジェクトを返します。
  • メソッドチェーンで書ける:操作を . でつないで書けます。

イミュータブルという点は、次のコードで確認できます。

const today = dayjs('2026-09-21')
const nextWeek = today.add(7, 'day')

console.log(today.format('YYYY-MM-DD'))    // 2026-09-21
console.log(nextWeek.format('YYYY-MM-DD')) // 2026-09-28

today.add(7, 'day') を実行しても today は変わらず、7日後の日付は別のオブジェクト nextWeek に入ります。Date の setDate() のように元の値が書き換わる挙動を想定していると、ここでつまずきます。add() の戻り値を受け取らないと、日付は進みません。

メソッドチェーンの例は次のとおりです。

dayjs('2026-09-21').startOf('month').add(1, 'day').format('YYYY-MM-DD')
// 2026-09-02

月初(9月1日)に移動し、1日進めてから文字列に整形しています。

もう1つ知っておきたいのが、コア機能とプラグインの区別です。Day.jsは本体を小さく保つため、一部の機能を別ファイルのプラグインに分けています。たとえば CustomParseFormat(書式を指定した文字列の解析)、UTC、Timezone、isBetween、isSameOrBefore、relativeTime などはプラグインです。日本語表記のためのlocale(言語設定)も、必要なものだけを個別に読み込みます。

Moment.jsは「大きな1つのライブラリ」ですが、Day.jsは「小さな本体に必要な機能を足す」設計です。この違いは、プラグインやlocaleの節、Moment.jsからの移行の節で改めて触れます。

npmでDay.jsをインストールしてimportする

npmで使う場合は、npm install dayjs でインストールし、import dayjs from 'dayjs' で読み込みます。

インストールコマンドは、使っているパッケージマネージャーに合わせて選びます。

npm install dayjs
# yarn
yarn add dayjs
# pnpm
pnpm add dayjs

インストール後、ES Modules形式でimportします。

import dayjs from 'dayjs'

console.log(dayjs('2026-09-21').format('YYYY年M月D日'))
// 2026年9月21日

このコードは、'2026-09-21' からDay.jsオブジェクトを作り、format() で「2026年9月21日」の形式に整形しています。format() の書式トークンは次の章で整理します。

Node.jsで require を使うCommonJS形式の場合は、次のように書きます。

const dayjs = require('dayjs')

console.log(dayjs().format())

format() を引数なしで呼ぶと、ISO 8601形式の文字列(例:2026-09-21T10:30:00+09:00)が返ります。

Node.jsで import 構文を使うには、package.json に "type": "module" を指定するか、ファイルの拡張子を .mjs にします。VueやReactなど、ViteやwebpackといったバンドラーのあるプロジェクトではES Modules形式でそのまま書けます。npmやNode.jsの基本操作は、周辺のJavaScript環境構築の記事とあわせて確認すると理解が進みます。

TypeScriptでは、型定義がnpmパッケージに同梱されているため、@types/ 系の追加インストールは不要です。ただしimportの書き方は tsconfig.json の設定で変わります。

// esModuleInterop または allowSyntheticDefaultImports が true の場合
import dayjs from 'dayjs'

// 上記の設定がない場合
import * as dayjs from 'dayjs'

importでエラーが出たときは、まず tsconfig.json のこの2つの設定を確認してください。

よくある間違いは、dayjs.format() のように dayjs を関数として呼ばずにメソッドを続けてしまうことです。dayjs は関数なので、dayjs().format() と括弧を付けて日付オブジェクトを作ってから使います。

localeとプラグインは、dayjs/locale/ja や dayjs/plugin/○○ のように、本体とは別のパスからimportします。具体的な手順は「locale・プラグインを使った応用」で扱います。

ブラウザでCDNからDay.jsを使う

CDNで使う場合は、<script> タグで dayjs.min.js を読み込むと、グローバル変数 dayjs が使えるようになります。公式ドキュメントのブラウザ向け例は、jsDelivrのURLです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day.js CDN サンプル</title>
</head>
<body>
  <p id="today"></p>

  <script src="<https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js>"></script>
  <script>
    document.getElementById('today').textContent = dayjs().format('YYYY-MM-DD HH:mm')
  </script>
</body>
</html>

このコードをHTMLファイルとして保存してブラウザで開くと、<p> 要素に現在の日時が「2026-09-21 10:30」のような形式で表示されます。Day.jsを読み込む <script> を、dayjs() を使う <script> よりも先に置くのがポイントです。順序が逆だと dayjs is not defined というエラーになります。

公式ドキュメントでは、CDNとして cdnjs、unpkg、jsDelivr が挙げられています。URLの @1 はメジャーバージョン1系を指定する書き方で、1系の最新版が読み込まれます。@1 のままだと1系の更新が自動で反映されるため、挙動を完全に固定したいときは、dayjs@1.x.x の形でバージョン番号まで指定します(最新のバージョン番号は npm で確認できます)。

ロケールやプラグインもCDNで使えますが、それぞれ別の <script> タグで、dayjs.min.js の後に読み込みます。具体例は後述のlocale・プラグインの節で示します。

CDNを使わずにファイルを自分のサーバーに置く「セルフホスティング」も可能です。公式のREADMEでは、unpkg(https://unpkg.com/dayjs/)から最新版をダウンロードして自分で配置する方法が案内されています。npmとCDNのどちらを選ぶかの判断基準は、後半の「よくある疑問」でまとめます。

Day.jsの基本的な使い方

Day.jsでは、dayjs() を引数なしで呼ぶと現在日時、dayjs('2026-09-21') のように文字列を渡すと指定した日時のDay.jsオブジェクトが作れます。年・月・日・曜日は year() month() date() day() で数値として取り出します。注意したいのは、月が0始まり(1月が0)で、date() は日、day() は曜日を返す点です。

この章のコードは、import dayjs from 'dayjs' を済ませている(CDNならグローバルの dayjs が使える)前提で書いています。

Day.jsの基本的な使い方

現在日時・指定した日時を取得する

現在日時は dayjs()、指定した日時は dayjs() に文字列や数値を渡して取得します。

const now = dayjs()
console.log(now.format()) // 2026-09-21T10:30:00+09:00

dayjs() は呼び出した瞬間の日時を持つオブジェクトを返します。format() を引数なしで呼ぶと、UTCとの時差付きのISO 8601形式の文字列になります(出力は実行した時刻と環境によって変わります)。

日時を指定する場合は、ISO 8601形式の文字列を渡すのが基本です。

dayjs('2026-09-21').format('YYYY-MM-DD HH:mm')       // 2026-09-21 00:00
dayjs('2026-09-21 09:30').format('YYYY-MM-DD HH:mm') // 2026-09-21 09:30
dayjs('2026-09-21T09:30:00+09:00').format('HH:mm')   // 日本時間の環境では 09:30

公式ドキュメントでは、T の代わりに半角スペースで区切る書き方も許容されています。日付だけを渡すと、時刻は 00:00:00 になります。

'09/21/2026' や '2026年9月21日' のような ISO 8601 以外の文字列は、結果が環境によって変わることがあります。公式ドキュメントも、ISO 8601以外は「String + Format」(CustomParseFormat プラグイン)を使うよう案内しています。プラグインの使い方は「locale・プラグインを使った応用」で扱います。

数値を渡す場合は、ミリ秒とUnixタイムスタンプ(秒)で関数が異なります。

dayjs(1318781876406)      // ミリ秒
dayjs.unix(1318781876)    // 秒

dayjs.unix(1318781876).valueOf() // 1318781876000
dayjs(1318781876406).unix()      // 1318781876

dayjs() に渡す数値はミリ秒として扱われるため、APIが秒単位のタイムスタンプを返す場合は dayjs.unix() を使います。秒の値を dayjs() にそのまま渡すと、1970年1月の日付になります。

日付だけの文字列は、Date と扱いが違います。 ネイティブの new Date('2026-09-21') は日付だけの文字列をUTCの0時として解釈するため、日本時間の環境では9時になります。Day.jsはタイムゾーン表記のない文字列をローカル時刻として解釈し、0時になります。

new Date('2026-09-21').getHours() // 日本時間の環境では 9
dayjs('2026-09-21').hour()        // 0

Date から移行するときに、日付がずれて見える原因の1つです。

年・月・日・曜日などの日付情報を取得する

日付の各要素は、要素名と同じ名前のメソッドを引数なしで呼ぶと数値で取得できます。

メソッド取得できる値範囲
year()年—
month()月0〜11(1月が0)
date()月内の日1〜31
day()曜日0(日曜)〜6(土曜)
hour()時0〜23
minute()分0〜59
second()秒0〜59
millisecond()ミリ秒0〜999
const d = dayjs('2026-09-21 09:30:45')

d.year()   // 2026
d.month()  // 8
d.date()   // 21
d.day()    // 1
d.hour()   // 9
d.minute() // 30
d.second() // 45

2026年9月21日は月曜日なので day() は 1、9月なので month() は 8 です。表示用に「9月」としたい場合は month() + 1 とするか、次の章の format('M') を使います。

間違えやすいのが date() と day() です。date() は月の中の日(21日なら21)、day() は曜日の番号です。曜日を「月」「Mon」のような文字で表示する方法は、format の章と日本語化の節で扱います。

月の日数は daysInMonth() で取得できます。

dayjs('2026-09-21').daysInMonth() // 30

カレンダーの描画や、月末日の計算などで使えます。

取得は get() でも書けます。単位名を文字列で渡す形式で、変数で単位を切り替えたいときに向いています。

const d = dayjs('2026-09-21')
const unit = 'month'

d.get(unit) // 8

同じメソッドに引数を渡すと、値を書き換えた新しいDay.jsオブジェクトを返します(setter)。

const d = dayjs('2026-09-21')

d.set('month', 0).format('YYYY-MM-DD') // 2026-01-21
d.date(1).format('YYYY-MM-DD')         // 2026-09-01
d.month(12).format('YYYY-MM-DD')       // 2027-01-21

set('month', 0) は月を1月に、date(1) は日を1日にした新しい日付を返します。範囲を超えた値は繰り上がり、month(12) は翌年の1月になります。元の d は変わりません。

日付の加算・減算は、set() を組み合わせるより add() や subtract() のほうが読みやすくなります。使い方は「Day.jsで日付を計算・比較する」で扱います。

Dateや文字列からDay.jsオブジェクトを作成する

dayjs() には、文字列、数値、Date オブジェクト、別のDay.jsオブジェクトを渡せます。

渡す値書き方備考
文字列dayjs('2026-09-21')ISO 8601形式
ミリ秒dayjs(1318781876406)Unixタイムスタンプ(ミリ秒)
秒dayjs.unix(1318781876)Unixタイムスタンプ(秒)
Datedayjs(new Date(2026, 8, 21))月は0始まり
Day.jsdayjs(d) または d.clone()複製になる
オブジェクトdayjs({ year: 2026, month: 8, day: 21 })ObjectSupport プラグインが必要

既存の Date オブジェクトは、そのまま渡せます。

const date = new Date(2026, 8, 21)
const d = dayjs(date)

d.format('YYYY-MM-DD') // 2026-09-21

new Date(2026, 8, 21) の 8 は9月を表します。Date のコンストラクタも月が0始まりで、Day.jsの month() と同じ数え方です。

{ year, month, day } のようなオブジェクトから作る場合は、ObjectSupport プラグインを読み込みます。

import dayjs from 'dayjs'
import objectSupport from 'dayjs/plugin/objectSupport'

dayjs.extend(objectSupport)

dayjs({ year: 2026, month: 8, day: 21 }).format('YYYY-MM-DD') // 2026-09-21

dayjs.extend() は、プラグインを有効にする命令です。ここでは、dayjs() にオブジェクトを渡して日付を指定する機能を追加しています。配列で日付を指定する場合は ArraySupport プラグインを使います。

Day.jsオブジェクトから別の形式に戻すメソッドもあります。

const d = dayjs('2026-09-21 09:30')

d.toDate()        // ネイティブの Date オブジェクト
d.valueOf()       // ミリ秒のタイムスタンプ
d.unix()          // 秒のタイムスタンプ
d.toISOString()   // UTCのISO 8601形式の文字列

Day.jsを使っていない他のライブラリやAPIに日付を渡すときは、toDate() で Date に戻します。

Date とDay.jsオブジェクトの違いを整理すると、次のとおりです。

項目DateDay.jsオブジェクト
作り方new Date()dayjs()
日付の変更setDate() などで元のオブジェクトを書き換える新しいオブジェクトを返す
月の数え方0始まり0始まり
文字列への整形toLocaleDateString() などformat()
不正な日付の確認isNaN(date) などで判定するisValid()

不正な日付が入っていないかは、isValid() で確認できます。

dayjs('2026-09-21').isValid() // true
dayjs('invalid').isValid()    // false

フォームの入力値や外部APIの値を扱うときは、変換後に isValid() を通しておくと、Invalid Date がそのまま画面に出るのを防げます。

function parseDate(value) {
  const d = dayjs(value)
  return d.isValid() ? d : null
}

変数がDay.jsオブジェクトかどうかは dayjs.isDayjs() で判定できます。

dayjs.isDayjs(dayjs())      // true
dayjs.isDayjs(new Date())   // false

外部APIから 2026-09-21T00:00:00Z のようにZ付きの文字列が返ってきた場合、dayjs() に渡すと、実行環境のローカル時刻に変換して扱われます。

dayjs('2026-09-21T00:00:00Z').format('YYYY-MM-DD HH:mm')
// 日本時間の環境では 2026-09-21 09:00

ブラウザを開いた人のタイムゾーンによって表示が変わるため、特定のタイムゾーンで表示したい場合は、UTC・Timezoneプラグインを使います。詳しくは後述の「UTC・Timezoneでタイムゾーンを扱う」で扱います。

TVCMで話題の【ココナラ】無料会員登録はこちら

Day.jsのformatで日付をフォーマットする

Day.jsで日付を文字列に整形するには、format() に書式を表す文字列を渡します。dayjs().format('YYYY-MM-DD HH:mm:ss') のように、YYYY(年)、MM(月)、DD(日)、HH(時)、mm(分)、ss(秒)を並べて書きます。format() は元の日付を変更せず、整形後の文字列を返します。

この章の出力例は、dayjs('2026-09-21 09:05:07') を、日本時間(UTC+9)の環境で format() した結果です。

Day.jsのformatで日付をフォーマットする

YYYY・MM・DD・HH・mm・ssの基本

書式文字列の中の YYYY や MM は「トークン」と呼ばれ、日付の各要素に置き換わります。トークン以外の文字(- / : や日本語など)は、そのまま出力されます。

const d = dayjs('2026-09-21 09:05:07')

d.format('YYYY-MM-DD HH:mm:ss') // 2026-09-21 09:05:07

よく使うトークンは次のとおりです。

トークン出力例内容
YYYY20264桁の年
YY262桁の年
MM092桁の月(01〜12)
M9月(1〜12)
MMMSep月の省略名
MMMMSeptember月の名前
DD212桁の日(01〜31)
D21日(1〜31)
d1曜日の数値(日曜が0)
dd / ddd / ddddMo / Mon / Monday曜日の名前(短縮〜フル)
HH0924時間表記の時(00〜23)
H924時間表記の時(0〜23)
hh / h09 / 912時間表記の時
mm / m05 / 5分
ss / s07 / 7秒
SSS000ミリ秒(3桁)
Z / ZZ+09:00 / +0900UTCとの時差
A / aAM / am午前・午後

トークンは、同じ文字を重ねると桁数が増えて0埋めされます。M は「9」、MM は「09」です。

間違えやすいのは、大文字と小文字の区別です。 MM は月ですが、小文字の mm は分になります。

d.format('YYYY-MM-DD') // 2026-09-21
d.format('YYYY-mm-DD') // 2026-05-21(mm は分)
d.format('yyyy-mm-dd') // yyyy-05-Mo

3行目のように小文字の yyyy はトークンとして扱われず、そのまま出力されます。さらに mm(分)と dd(曜日の短縮名)が置き換わり、意図しない文字列になります。同じ理由で、HH(24時間)と hh(12時間)も別物です。

書式文字列の中に、トークンと同じ文字を含む英単語を入れる場合は、[ ] で囲んでエスケープします。

d.format('YYYY-MM-DD at HH:mm')   // 2026-09-21 amt 09:05
d.format('YYYY-MM-DD [at] HH:mm') // 2026-09-21 at 09:05

at の a が午前・午後のトークンとして解釈されるため、エスケープしないと amt になります。日本語の「年」「月」「日」「時」などはトークンではないので、そのまま書けます。

format() の戻り値はDay.jsオブジェクトではなく文字列です。add() などの日付操作は、format() より前に済ませます。

dayjs('2026-09-21').add(7, 'day').format('YYYY-MM-DD') // 2026-09-28

YYYY-MM-DDや日本語表記に変換する

YYYY-MM-DD はDay.jsでも最もよく使う書式で、<input type="date"> の値や、APIに日付だけを送るときの形式にそのまま使えます。日本語表記にする場合は、トークンの間に「年」「月」「日」を挟みます。

const d = dayjs('2026-09-21 09:05:07')

d.format('YYYY-MM-DD')          // 2026-09-21
d.format('YYYY/MM/DD')          // 2026/09/21
d.format('YYYYMMDD')            // 20260921
d.format('YYYY年M月D日')         // 2026年9月21日
d.format('YYYY年MM月DD日')       // 2026年09月21日
d.format('M/D')                 // 9/21
d.format('HH時mm分ss秒')         // 09時05分07秒

「2026年9月21日」のように0を付けない表記は M と D、「2026年09月21日」のように桁を揃える表記は MM と DD を使います。

日付と時刻を1つの文字列にする書式も、よく使います。

d.format('YYYY-MM-DD HH:mm:ss')       // 2026-09-21 09:05:07
d.format('YYYY-MM-DDTHH:mm:ssZ')      // 2026-09-21T09:05:07+09:00
d.format('MM/DD/YYYY')                // 09/21/2026
d.format('DD/MM/YYYY')                // 21/09/2026

2行目のように、T はトークンではないためそのまま出力され、ISO 8601形式の文字列になります。Z には実行環境のタイムゾーンの時差が入るため、サーバーとブラウザで結果が変わる場合があります。引数なしの format() も、同じくISO 8601形式(小数秒なし)です。

APIに送る日時を「常にUTC」にしたい場合は、format() ではなく toISOString() を使うと、2026-09-21T00:05:07.000Z のようなUTCの文字列が得られます。UTCやタイムゾーンを指定した整形は、後述の「UTC・Timezoneでタイムゾーンを扱う」で扱います。

不正な日付に対して format() を呼ぶと、Invalid Date という文字列が返ります。

dayjs('invalid').format('YYYY-MM-DD') // Invalid Date

外部から受け取った値を整形するときは、前章の isValid() で確認してから format() を呼ぶと、画面に Invalid Date が表示されるのを防げます。

曜日や時刻を含めて表示する

曜日は ddd(短縮名)や dddd(フル)で表示します。ただし、日本語化していない状態では Monday のように英語で出力されます。日本語で表示するには、日本語のlocale(言語設定)を読み込みます。

import dayjs from 'dayjs'
import 'dayjs/locale/ja'

dayjs.locale('ja')

const d = dayjs('2026-09-21 09:05:07')

d.format('dddd')                    // 月曜日
d.format('ddd')                     // 月
d.format('YYYY年M月D日(ddd) HH:mm')  // 2026年9月21日(月) 09:05

import 'dayjs/locale/ja' で日本語のデータを読み込み、dayjs.locale('ja') で全体の言語を日本語に切り替えています。dddd は「月曜日」、ddd と dd は「月」を返します。MMMM も「9月」のように日本語になります。

localeの読み込みを忘れても、エラーにはなりません。dayjs.locale('ja') を呼んでも、import 'dayjs/locale/ja' がなければ英語のまま出力されます。日本語にならないときは、まずimportを確認してください。特定の日付だけを日本語にする方法や、CDNでの読み込みは「localeで曜日や日付を日本語表示する」で扱います。

localeを使わずに曜日を出したい場合は、day() の数値を配列の添字にする方法もあります。

const weekdays = ['日', '月', '火', '水', '木', '金', '土']

`${d.format('YYYY年M月D日')}(${weekdays[d.day()]})` // 2026年9月21日(月)

day() は日曜が0なので、配列も日曜から並べます。曜日の表示だけが目的で、localeを増やしたくない場合に向いています。

時刻は、24時間表記なら HH:mm、12時間表記なら h:mm A を使います。

dayjs('2026-09-21 15:30').format('HH:mm')   // 15:30
dayjs('2026-09-21 15:30').format('h:mm A')  // 3:30 PM
dayjs('2026-09-21 00:05').format('h:mm A')  // 12:05 AM

12時間表記では、0時台は 12 と表示されます。h や hh を使うときは、午前・午後を区別する A(または a)を必ず付けます。日本語のlocaleでは A が「午前」「午後」になり、dayjs('2026-09-21 15:30').format('A h:mm') は「午後 3:30」を返します。

ログの出力など、ミリ秒まで必要な場合は HH:mm:ss.SSS と書きます。

よく使う組み合わせを整理すると、次のようになります(日本語localeの場合)。

用途書式出力
記事の投稿日YYYY年M月D日2026年9月21日
曜日つきの日付YYYY年M月D日(ddd)2026年9月21日(月)
予約日時YYYY/MM/DD(ddd) HH:mm2026/09/21(月) 09:05
ログの時刻YYYY-MM-DD HH:mm:ss.SSS2026-09-21 09:05:07.000

本体にないトークンや、localeごとの標準的な書式が必要な場合は、プラグインを使います。AdvancedFormat プラグインは、四半期(Q)、序数つきの日(Do)、UnixタイムスタンプのX(秒)とx(ミリ秒)、k(1〜24時表記)などを追加します。

import advancedFormat from 'dayjs/plugin/advancedFormat'

dayjs.extend(advancedFormat)

const d = dayjs('2026-09-21 09:05:07')

d.format('Q')  // 3
d.format('Do') // 21st
d.format('X')  // 1789949107
d.format('x')  // 1789949107000

Q は第3四半期、Do は英語のlocaleで「21st」を返します。X と x は、日本時間の 2026-09-21 09:05:07 に対応するUnixタイムスタンプです。タイムゾーンの違う環境で実行すると、値も変わります。AdvancedFormat の w(週番号)や W(ISO週番号)などのトークンは、weekOfYear や isoWeek といった別のプラグインも読み込まないとエラーになります。

LocalizedFormat プラグインを使うと、L LL LLL LLLL といったlocaleごとの標準の書式を使えます。日本語localeとの組み合わせは次のとおりです。

import dayjs from 'dayjs'
import 'dayjs/locale/ja'
import localizedFormat from 'dayjs/plugin/localizedFormat'

dayjs.extend(localizedFormat)
dayjs.locale('ja')

const d = dayjs('2026-09-21 09:05:07')

d.format('L')    // 2026/09/21
d.format('LL')   // 2026年9月21日
d.format('LLL')  // 2026年9月21日 09:05
d.format('LLLL') // 2026年9月21日 月曜日 09:05
d.format('llll') // 2026年9月21日(月) 09:05

書式文字列を自分で組み立てなくても、日本語の標準的な日付表記が得られます。ユーザーの言語設定に合わせて表示を切り替えるアプリで、書式を1か所にまとめたいときに役立ちます。プラグインの読み込みの仕組みは、後述の「CustomParseFormatなどのプラグインを使う」で扱います。

Day.jsで日付を計算・比較する

Day.jsで日付を進める・戻すには add() と subtract()、月初や週初めなど期間の端に移動するには startOf() と endOf()、2つの日付の差を求めるには diff()、前後関係を調べるには isBefore() isAfter() isSame() を使います。日付を動かすメソッドは新しいDay.jsオブジェクトを返し、diff() は数値、比較メソッドは真偽値を返します。

Day.jsで日付を計算・比較する
やりたいことメソッド戻り値
日付を進める・戻すadd() subtract()新しいDay.jsオブジェクト
期間の始まり・終わりに移動するstartOf() endOf()新しいDay.jsオブジェクト
2つの日付の差を求めるdiff()数値
前後・同じ日かを調べるisBefore() isAfter() isSame()真偽値(true / false)

この章のコードは、import dayjs from 'dayjs' を済ませた前提です。出力例は、日本時間(UTC+9)の環境で dayjs('2026-09-21 09:05:07') を基準に実行した結果です。

add・subtract・startOfで日付を操作する

add(数値, 単位) で日付を進め、subtract(数値, 単位) で戻します。単位には 'day' 'month' 'year' などを文字列で渡します。

const d = dayjs('2026-09-21 09:05:07')
const f = 'YYYY-MM-DD HH:mm:ss'

d.add(7, 'day').format(f)        // 2026-09-28 09:05:07
d.add(1, 'month').format(f)      // 2026-10-21 09:05:07
d.add(3, 'hour').format(f)       // 2026-09-21 12:05:07
d.subtract(1, 'day').format(f)   // 2026-09-20 09:05:07
d.subtract(3, 'month').format(f) // 2026-06-21 09:05:07

add() も subtract() も、元の d は変更せず、計算後の新しいオブジェクトを返します。戻り値を変数に代入しないと、結果は使えません。

単位に使える主な文字列は次のとおりです。

単位短縮形例
'year''y'add(1, 'year')
'month''M'add(1, 'month')
'week''w'add(2, 'week')
'day''d'add(7, 'day')
'hour''h'add(3, 'hour')
'minute''m'add(30, 'minute')
'second''s'add(10, 'second')
'millisecond''ms'add(500, 'millisecond')

短縮形は月が大文字の M、分が小文字の m と区別されます。読みやすさを優先するなら、フルスペルで書くのが無難です。

月の加算は、月末で日付が調整されます。 1月31日に1か月を足すと、存在しない「2月31日」ではなく、2月の末日になります。

dayjs('2026-01-31').add(1, 'month').format('YYYY-MM-DD') // 2026-02-28
dayjs('2028-02-29').add(1, 'year').format('YYYY-MM-DD')  // 2029-02-28

ネイティブの Date で setMonth() を使うと、1月31日の翌月は3月3日にあふれます。Day.jsでは月末に収まるため、「毎月末日」のような処理で日付が飛ぶことはありません。

add() に小数を渡すと、整数に丸められます。add(1.5, 'day') は1日ではなく2日後になりました。日数や月数には整数を渡してください。

startOf(単位) は、その単位の始まりの時刻に移動します。endOf(単位) は終わりの時刻(ミリ秒まで最大値)に移動します。

const d = dayjs('2026-09-21 09:05:07')
const f = 'YYYY-MM-DD HH:mm:ss'

d.startOf('day').format(f)   // 2026-09-21 00:00:00
d.startOf('month').format(f) // 2026-09-01 00:00:00
d.endOf('month').format(f)   // 2026-09-30 23:59:59
d.startOf('year').format(f)  // 2026-01-01 00:00:00
d.endOf('day').format('YYYY-MM-DD HH:mm:ss.SSS') // 2026-09-21 23:59:59.999

startOf('day') は「その日の0時」で、時刻を切り捨てた日付を作りたいときに使います。endOf('month') は月末日の 23:59:59.999 になるため、月の日数を自分で調べなくても月末を取得できます。

週の開始は、標準では日曜日です。日本語のlocaleを読み込んでも変わりません。

d.startOf('week').format('YYYY-MM-DD (ddd)') // 2026-09-20 (Sun)
d.endOf('week').format('YYYY-MM-DD (ddd)')   // 2026-09-26 (Sat)

月曜始まりの週にしたい場合は isoWeek プラグインを読み込み、startOf('isoWeek') を使います。localeに設定された週の開始曜日にも startOf('week') は従います。

import isoWeek from 'dayjs/plugin/isoWeek'

dayjs.extend(isoWeek)

d.startOf('isoWeek').format('YYYY-MM-DD (ddd)') // 2026-09-21 (Mon)

プラグインが必要な単位を指定しても、エラーにはなりません。 isoWeek のプラグインなしで startOf('isoWeek') を呼ぶと、日付が変わらないまま返ります。四半期を表す 'quarter' も QuarterOfYear プラグインが必要で、同じ挙動です。'foo' のような存在しない単位も同様に、何も起きません。startOf() の結果が期待と違うときは、単位名とプラグインの読み込みを確認してください。

実務でよく使う組み合わせを、まとめて示します。

const today = dayjs('2026-09-21')

// 直近7日間(今日を含む)の開始日
today.subtract(6, 'day').format('YYYY-MM-DD') // 2026-09-15

// 今月の初日と末日
today.startOf('month').format('YYYY-MM-DD')   // 2026-09-01
today.endOf('month').format('YYYY-MM-DD')     // 2026-09-30

// 30日後の23:59:59を有効期限にする
today.add(30, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss') // 2026-10-21 23:59:59

// 来月末
today.add(1, 'month').endOf('month').format('YYYY-MM-DD') // 2026-10-31

期限の設定では、add() の後に endOf('day') をつなげると、期限日の終わりまで有効という扱いにできます。

diffで2つの日付の差を求める

2つの日付の差は a.diff(b, 単位) で求めます。結果は「a − b」で、aがbより後ならプラスの数値、前ならマイナスの数値になります。

const a = dayjs('2026-09-21')
const b = dayjs('2026-09-01')

a.diff(b, 'day')  // 20
b.diff(a, 'day')  // -20
a.diff(b, 'week') // 2
a.diff(b)         // 1728000000

単位を省略すると、ミリ秒単位の差になります。'day' 'hour' 'minute' など、add() と同じ単位名を指定できます。

diff() は、標準では小数点以下を切り捨てた整数を返します。小数まで必要な場合は、3番目の引数に true を渡します。

a.diff(b, 'week')       // 2
a.diff(b, 'week', true) // 2.857142857142857

const start = dayjs('2026-09-21 09:00')
const end   = dayjs('2026-09-21 18:30')

end.diff(start, 'hour')       // 9
end.diff(start, 'hour', true) // 9.5
end.diff(start, 'minute')     // 570

月や年の差は、暦の上で満了した数を返します。

// 2026-10-15 と 2026-09-21:1か月には満たない
dayjs('2026-10-15').diff(dayjs('2026-09-21'), 'month')       // 0
dayjs('2026-10-15').diff(dayjs('2026-09-21'), 'month', true) // 0.8

// 満年齢の計算
dayjs('2026-09-21').diff(dayjs('1990-09-22'), 'year') // 35
dayjs('2026-09-22').diff(dayjs('1990-09-22'), 'year') // 36

1990年9月22日生まれの人は、2026年9月21日時点では35歳で、2026年9月22日に36歳になります。'year' で差を取ると、誕生日を迎える前後で満年齢どおりの値になります。

日数の差では、時刻の影響に注意します。 diff(…, 'day') は24時間単位で数えて切り捨てるため、暦の日付が違っても、経過時間が24時間未満なら 0 になります。

const x = dayjs('2026-09-22 00:00')
const y = dayjs('2026-09-21 23:00')

x.diff(y, 'day') // 0(経過は1時間)
x.startOf('day').diff(y.startOf('day'), 'day') // 1(暦の上では1日違い)

「あと何日」「何日目」のようにカレンダー上の日数を求めたい場合は、両方を startOf('day') で0時に揃えてから diff() を呼びます。

const now      = dayjs('2026-09-21 15:00')
const deadline = dayjs('2026-09-30 10:00')

deadline.diff(now, 'day')                                    // 8
deadline.startOf('day').diff(now.startOf('day'), 'day')      // 9

時刻を揃えずに diff() を呼ぶと、カレンダー上の残り日数より1日少なく出ることがあります。画面に「あと9日」と表示したいなら、0時に揃えた後者の書き方が適しています。

不正な日付が含まれていると、diff() は NaN を返します。外部から受け取った日付は、isValid() を通してから計算します。

「3日前」「30分前」のような相対表示は、diff() ではなく relativeTime プラグインの fromNow() が担当します。表示用の文言まで作りたい場合は、後述のプラグインの節で扱います。

isBefore・isAfter・isSameで日付を比較する

日付の前後や一致は、isBefore() isAfter() isSame() で調べ、結果は true か false で返ります。これらは標準機能で、プラグインなしで使えます。

const x = dayjs('2026-09-21 09:00')
const y = dayjs('2026-09-21 18:00')

x.isBefore(y) // true
x.isAfter(y)  // false
x.isSame(y)   // false

x.isBefore(y) は「xがyより前か」を返します。引数には、Day.jsオブジェクトのほか、日付の文字列や Date も渡せます。

第2引数に単位を渡すと、その単位で丸めて比較します。時刻を無視して「同じ日か」を調べるときに使います。

x.isSame(y, 'day')     // true(同じ日)
x.isSame(y)            // false(時刻まで一致しない)

const z = dayjs('2026-09-22')

x.isSame(z, 'day')     // false
x.isSame(z, 'month')   // true(同じ月)
x.isBefore(z, 'day')   // true
x.isBefore(y, 'day')   // false(同じ日なので「前」ではない)

単位を省略すると、ミリ秒まで完全に一致しなければ isSame() は true になりません。「今日かどうか」を調べるなら、isSame(dayjs(), 'day') のように単位を付けます。

Day.jsオブジェクト同士を === や == で比べても、同じ日時かどうかは判定できません。 オブジェクトの同一性を比べるため、日時が同じでも false になります。

const x1 = dayjs('2026-09-21 09:00')
const x2 = dayjs('2026-09-21 09:00')

x1 === x2   // false
x1 == x2    // false
x1.isSame(x2) // true

< や <= などの大小比較は、内部の数値(ミリ秒)で比べるため動作しますが、等しさの判定は isSame() に統一すると、書き方がそろって読みやすくなります。

isBefore() と isAfter() は、同じ日時のときはどちらも false です。「以前」「以降」(境界を含む比較)には、isSameOrBefore と isSameOrAfter プラグインを使います。範囲内かどうかは isBetween プラグインです。これらは標準機能ではないため、読み込まずに呼ぶと x.isSameOrBefore is not a function というエラーになります。

import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import isBetween from 'dayjs/plugin/isBetween'

dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)
dayjs.extend(isBetween)

const x = dayjs('2026-09-21 09:00')
const y = dayjs('2026-09-21 18:00')

x.isSameOrBefore(x) // true
x.isSameOrAfter(y)  // false

const start = dayjs('2026-09-01')
const end   = dayjs('2026-09-30')

dayjs('2026-09-21').isBetween(start, end)        // true
start.isBetween(start, end)                       // false(境界は含まない)
start.isBetween(start, end, null, '[]')           // true(両端を含む)
dayjs('2026-09-30 12:00').isBetween(start, end, 'day', '[]') // true

isBetween(開始, 終了) は、標準では開始と終了の日時そのものを範囲に含めません。両端を含めたいときは、第4引数に '[]' を渡します。第3引数は単位で、null を渡すとミリ秒単位の比較です。最後の例では、単位に 'day' を指定して、9月30日の12:00を「9月30日の範囲内」として扱っています。

実務では、次のような場面で使います。

// 期限切れかどうかの判定
const deadline = dayjs('2026-09-30 23:59:59')
dayjs('2026-09-21 12:00').isAfter(deadline) // false(期限内)

// キャンペーン期間内かどうか(両端を含む)
dayjs('2026-09-21').isBetween('2026-09-01', '2026-09-30', 'day', '[]') // true

不正な日付を比較すると、isBefore() も isAfter() も false になります。「期限切れではない」と誤って判定されないよう、比較の前に isValid() で確認します。

WEBCOACH|副業・フリーランス特化型のオンラインWebデザインスクール

locale・プラグインを使った応用

Day.jsで曜日や月を日本語で表示するには、日本語のlocale(言語設定)を読み込み、dayjs.locale('ja') で切り替えます。書式を指定した文字列の解析、相対時間、UTC、タイムゾーンといった機能は、標準では含まれておらず、プラグインを読み込んで有効にします。

localeとタイムゾーンは名前が似ていますが、決めるものが違います。

locale・プラグインを使った応用
localeタイムゾーン
決めるもの曜日名・月名・午前午後の表記、週の開始曜日時刻そのもの(UTCからの時差)
出力の違いMonday → 月曜日09:00+09:00 → 20:00-04:00(前日)
切り替えても変わらないもの時刻言語
使うものdayjs/locale/jautc と timezone のプラグイン

「日本語で表示したい」ならlocale、「日本時間で表示したい」ならタイムゾーンです。この章のコードは、出力例を日本時間(UTC+9)の環境で実行した結果で示します。

localeで曜日や日付を日本語表示する

日本語表示は、dayjs/locale/ja をimportし、dayjs.locale('ja') を呼ぶと有効になります。Day.jsは標準で英語(米国)のlocaleのみを持ち、それ以外は必要なものだけを読み込む設計です。

import dayjs from 'dayjs'
import 'dayjs/locale/ja'

dayjs.locale('ja')

dayjs('2026-09-21').format('YYYY年M月D日(ddd) dddd') // 2026年9月21日(月) 月曜日
dayjs('2026-09-21').format('MMMM')                   // 9月

import 'dayjs/locale/ja' でデータを読み込み、dayjs.locale('ja') で全体の言語を切り替えます。ddd は「月」、dddd は「月曜日」、MMMM は「9月」になります。この設定は、アプリの起動時(エントリーポイント)で1回行えば十分です。

CDNで使う場合は、dayjs.min.js の後にlocaleのファイルを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ja.js"></script>
<script>
  dayjs.locale('ja')
  document.body.textContent = dayjs().format('YYYY年M月D日(ddd)')
</script>

localeのファイルは、dayjs.min.js を読み込んだ後に置きます。順序が逆だと、localeの読み込み時にエラーになります。

dayjs.locale('ja') はグローバルな設定です。特定の日付だけを日本語にしたい場合は、インスタンスごとに .locale('ja') を呼びます。

dayjs('2026-09-21').locale('ja').format('dddd') // 月曜日
dayjs('2026-09-21').format('dddd')              // Monday(全体の設定が英語のまま)

dayjs.locale('ja') は、それ以前に作ったDay.jsオブジェクトには影響しません。 公式ドキュメントにも明記されており、実際に確認すると次のようになります。

import dayjs from 'dayjs'
import 'dayjs/locale/ja'

const before = dayjs('2026-09-21')  // 切り替え前に作成
dayjs.locale('ja')
const after = dayjs('2026-09-21')   // 切り替え後に作成

before.format('dddd') // Monday
after.format('dddd')  // 月曜日

モジュールの読み込み順が原因で、一部の画面だけ英語のまま表示される場合は、dayjs.locale('ja') を呼ぶ前に日付オブジェクトが作られていないかを確認してください。dayjs.locale() を引数なしで呼ぶと、現在の全体のlocale名('en' や 'ja')が返ります。インスタンスの .locale() を引数なしで呼ぶと、そのオブジェクトが持つlocale名を確認できます。

localeを読み込み忘れた場合は、エラーにならず英語のままです。import 'dayjs/locale/ja' の有無を先に確認します。

日本語の曜日名や月名の一覧は、localeData プラグインで取得できます。セレクトボックスの選択肢を作るときに便利です。

import localeData from 'dayjs/plugin/localeData'

dayjs.extend(localeData)

dayjs.weekdays()      // ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日']
dayjs.weekdaysShort() // ['日', '月', '火', '水', '木', '金', '土']
dayjs.months()        // ['1月', '2月', '3月', ... ]

日本語localeの週の開始は日曜日です。月曜始まりにしたい場合は、updateLocale プラグインで設定を書き換えます。

import updateLocale from 'dayjs/plugin/updateLocale'

dayjs.extend(updateLocale)
dayjs.updateLocale('ja', { weekStart: 1 })

dayjs('2026-09-21').startOf('week').format('YYYY-MM-DD (ddd)') // 2026-09-21 (月)

updateLocale は、指定したlocale全体の設定を書き換えます。アプリ全体で週の始まりが月曜になるため、他の画面のカレンダーにも影響します。

CustomParseFormatなどのプラグインを使う

プラグインは、import してから dayjs.extend() に渡すと有効になります。標準では含まれていない機能を、必要なものだけ追加する仕組みです。

import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'

dayjs.extend(customParseFormat)

dayjs.extend() は、アプリの起動時に1回呼べば全体で有効になります。同じプラグインを複数回 extend しても、二重には適用されません。

CDNの場合は、dayjs.min.js の後にプラグインのファイルを読み込み、window.dayjs_plugin_プラグイン名 を extend に渡します。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
<script>
  dayjs.extend(window.dayjs_plugin_customParseFormat)
</script>

よく使うプラグインは次のとおりです。

プラグイン追加される機能参照する箇所
CustomParseFormatdayjs(文字列, 書式) で書式を指定した解析この節
AdvancedFormat / LocalizedFormatformat() のトークン追加、locale別の書式formatの章
RelativeTime「3日前」のような相対表示この節
IsBetween / IsSameOrBefore / IsSameOrAfter範囲・以前・以降の比較計算・比較の章
IsoWeek / QuarterOfYear月曜始まりの週、四半期計算・比較の章
LocaleData / UpdateLocale曜日名の一覧、localeの設定変更前の節
UTC / TimezoneUTC、タイムゾーンの変換次の節

CustomParseFormat は、ISO 8601以外の文字列を日付にするためのプラグインです。 標準の dayjs('21/09/2026') は、ISO 8601以外の文字列をブラウザーやNode.jsの Date の解析に任せるため、結果が環境によって変わります。実際に、'09/21/2026' は2026年9月21日になりますが、'21/09/2026' や '2026年9月21日' は Invalid Date になりました。

第2引数に書式を渡すと、その書式のとおりに解析されます。

dayjs('21-09-2026', 'DD-MM-YYYY').format('YYYY-MM-DD')                 // 2026-09-21
dayjs('2026年9月21日', 'YYYY年M月D日').format('YYYY-MM-DD')             // 2026-09-21
dayjs('2026年9月21日 15時30分', 'YYYY年M月D日 H時m分').format('YYYY-MM-DD HH:mm') // 2026-09-21 15:30

書式に使うトークンは、format() と同じ YYYY MM DD HH mm などです。日本語の「年」「月」「日」は、書式にそのまま書けます。

標準では、書式と少しずれた入力も受け入れます。厳密に照合したい場合は、第3引数に true(strictモード)を渡します。

dayjs('2026-02-30', 'YYYY-MM-DD').format('YYYY-MM-DD')        // 2026-03-02(あふれた日付に補正される)
dayjs('2026-02-30', 'YYYY-MM-DD', true).isValid()             // false
dayjs('2026/09/21', 'YYYY-MM-DD').isValid()                   // true(区切り文字の違いを許容)
dayjs('2026/09/21', 'YYYY-MM-DD', true).isValid()             // false

フォームの入力検証など、存在しない日付や書式違いを弾きたい場面では、strictモードと isValid() を組み合わせます。複数の書式を受け付ける場合は、書式を配列で渡せます。

dayjs('21/09/2026', ['YYYY-MM-DD', 'DD/MM/YYYY'], true).format('YYYY-MM-DD') // 2026-09-21

日本語localeと午前・午後の解析には、落とし穴があります。 dayjs.locale('ja') を設定した状態で A(午前・午後)を含む文字列を解析すると、午後が認識されず、午前として扱われました(Day.js 1.11.23で確認)。

// dayjs.locale('ja') を設定済み
dayjs('21/09/2026 03:30 PM', 'DD/MM/YYYY hh:mm A').format('HH:mm')        // 03:30(15:30にならない)
dayjs('21/09/2026 03:30 PM', 'DD/MM/YYYY hh:mm A', 'en').format('HH:mm')  // 15:30

第3引数にlocale名を渡すと、そのlocaleで解析されます(strictモードにする場合は、第4引数に true を渡します)。ただし、入力に午前・午後が含まれる場合の解析は注意点が多いため、可能なら HH:mm(24時間表記)で受け取るほうが安全です。

もう1つ、日常的に使うプラグインが RelativeTime です。「3日前」「30分後」のような相対表示を作ります。

import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/ja'

dayjs.extend(relativeTime)
dayjs.locale('ja')

const now = dayjs('2026-09-21 12:00')

dayjs('2026-09-18 12:00').from(now)        // 3日前
dayjs('2026-09-21 11:30').from(now)        // 30分前
dayjs('2026-09-24 12:00').from(now)        // 3日後
dayjs('2026-09-18 12:00').from(now, true)  // 3日

from(基準) は、基準の日時から見た相対表現を返します。現在時刻が基準なら fromNow() を使います。第2引数に true を渡すと、「前」「後」を付けない形になります。日本語で表示するには、dayjs.locale('ja') の後に日付オブジェクトを作る必要があります(前の節のとおり)。

ブログの投稿日を「3日前」と表示する、コメントやチャットの投稿時刻を「30分前」と表示する、といった場面で使います。差の数値そのものが必要なら、前章の diff() を使います。

UTC・Timezoneでタイムゾーンを扱う

タイムゾーンを扱うには、utc と timezone の2つのプラグインを読み込みます。特定の地域の時刻に変換するには .tz('Asia/Tokyo') のように地域名を指定し、UTCで扱うには dayjs.utc() を使います。

まず、utc プラグインです。UTC(協定世界時)の時刻を扱えます。

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

dayjs.extend(utc)

const local = dayjs('2026-09-21 09:05:07') // 日本時間の環境

local.utc().format()                         // 2026-09-21T00:05:07Z
dayjs.utc('2026-09-21 09:05:07').format()    // 2026-09-21T09:05:07Z
dayjs.utc('2026-09-21 09:05:07').local().format() // 2026-09-21T18:05:07+09:00
local.utcOffset()                            // 540

3つの書き方は、意味が違います。

  • local.utc():同じ瞬間を、UTCの表示に変換します。日本時間の9:05は、UTCでは0:05です。
  • dayjs.utc('2026-09-21 09:05:07'):文字列を、UTCの時刻として解釈します。UTCの9:05を表すため、日本時間では18:05になります。
  • .local():UTCから、実行環境のタイムゾーンの表示に戻します。

utcOffset() は、UTCからの時差を「分」で返します。日本は+9時間なので 540 です。

utc プラグインだけでは、UTCと固定の時差しか扱えません。「ニューヨーク」「ロンドン」のような地域名を指定し、夏時間(サマータイム)にも対応する場合は、timezone プラグインを追加します。timezone は utc に依存するため、両方を extend します。

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

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

const jst = dayjs.tz('2026-09-21 09:00', 'Asia/Tokyo')

jst.format()                               // 2026-09-21T09:00:00+09:00
jst.tz('America/New_York').format()        // 2026-09-20T20:00:00-04:00
dayjs.utc('2026-09-21 00:00').tz('Asia/Tokyo').format() // 2026-09-21T09:00:00+09:00

dayjs.tz(文字列, 地域名) は、文字列をその地域の時刻として解釈します。.tz(地域名) は、同じ瞬間を別の地域の表示に変換します。日本時間の9:00は、ニューヨークでは前日の20:00です。

タイムゾーンの指定には、'Asia/Tokyo' のようなIANAタイムゾーン名を使います。'JST' のような略称は使えません。存在しない地域名を渡すと、RangeError: Invalid time zone specified になります。timezone だけを extend して utc を忘れた場合も、r.utc is not a function というエラーになります。

.tz() の第2引数に true を渡すと、時刻の数字を保ったまま、タイムゾーンだけを差し替えます。

const local = dayjs('2026-09-21 09:05:07') // 日本時間

local.tz('America/New_York').format()       // 2026-09-20T20:05:07-04:00(同じ瞬間を変換)
local.tz('America/New_York', true).format() // 2026-09-21T09:05:07-04:00(時刻を保って地域だけ変更)

第2引数なしは「時刻を変換」、true ありは「時刻の数字はそのままで地域を変更」です。用途が違うため、混同すると9時間分ずれます。

サーバーがUTCで動いていても、日本時間で表示したい場合は、次のように書きます。

dayjs('2026-09-21T00:00:00Z').tz('Asia/Tokyo').format('YYYY-MM-DD HH:mm:ss') // 2026-09-21 09:00:00

実行環境のタイムゾーンがUTCの場合でも、日本時間の表示になります(TZ=UTC で実行して確認)。環境に依存せず、特定の地域の時刻で表示したい場合に、.tz() が役立ちます。

利用者のタイムゾーンは dayjs.tz.guess() で推定できます。

dayjs.tz.guess() // Asia/Tokyo(実行環境のタイムゾーン名)

指定のタイムゾーンをアプリ全体の既定にするには、dayjs.tz.setDefault() を使います。

dayjs.tz.setDefault('America/New_York')

dayjs.tz('2026-09-21 09:00').format()   // 2026-09-21T09:00:00-04:00
dayjs('2026-09-21 09:00').tz().format() // 2026-09-20T20:00:00-04:00
dayjs('2026-09-21 09:00').format()      // 2026-09-21T09:00:00+09:00(通常の dayjs() は変わらない)

dayjs.tz.setDefault() // 実行環境のタイムゾーンに戻す

setDefault() が影響するのは dayjs.tz() と .tz()(引数なし)だけです。通常の dayjs() は、実行環境のタイムゾーンのままです。

夏時間は、timezone プラグインが自動で反映します。ニューヨークは9月には -04:00 ですが、1月には -05:00 になります。

dayjs.tz('2026-09-21 09:00', 'America/New_York').format() // 2026-09-21T09:00:00-04:00
dayjs.tz('2026-01-15 09:00', 'America/New_York').format() // 2026-01-15T09:00:00-05:00

異なるタイムゾーンで作った日時も、同じ瞬間なら isSame() は true になります。dayjs.tz('2026-09-21 09:00', 'Asia/Tokyo') と dayjs.tz('2026-09-20 20:00', 'America/New_York') は同じ瞬間であり、比較や diff() でもそのように扱われます。

タイムゾーンの指定が必要な場面は、海外拠点との会議時刻の表示、サーバーがUTCで動いているサービスの日本時間表示、イベントの開始時刻を各国の現地時刻で見せるページなどです。単に日本語で表示したいだけなら、タイムゾーンではなくlocaleの話です。

月額99円から。容量最大1TB!ブログ作成におすすめのWordPressテーマ「Cocoon」も簡単インストール

React・Node.jsやMoment.jsでDay.jsを使う

ReactでもNode.jsでも、Day.jsは npm install dayjs で導入し、これまでの章と同じ書き方で使えます。Reactでは、日付の状態を文字列で持ち、描画するときに dayjs() で変換すると扱いやすくなります。Node.jsのESM(import 構文)では、プラグインとlocaleのimportに拡張子 .js が必要です。Moment.jsからの移行は、moment を dayjs に置き換えるだけで済む部分が多い一方、不変性、プラグイン、日付の検証結果に違いがあります。

この章のコードは、React 19.3、Node.js 22、Day.js 1.11.23、Moment.js 2.31.0で実行して確認した結果です。出力例は日本時間(UTC+9)の環境のものです。

React・Node.jsやMoment.jsでDay.jsを使う

ReactでDay.jsを使う基本例

ReactでDay.jsを使うときも、特別な設定は要りません。コンポーネントで import dayjs from 'dayjs' と書き、日付の整形や計算に使います。日本語表示にするlocaleは、アプリのエントリーポイントで1回だけ設定します。

// main.jsx(エントリーポイント)
import dayjs from 'dayjs'
import 'dayjs/locale/ja'

dayjs.locale('ja')

各コンポーネントでは、渡された日付文字列を dayjs() に通して表示します。

import dayjs from 'dayjs'

export function PostDate({ iso }) {
  const d = dayjs(iso)

  return (
    <time dateTime={iso}>
      {d.isValid() ? d.format('YYYY年M月D日(ddd)') : '日付不明'}
    </time>
  )
}

<PostDate iso="2026-09-21T00:00:00Z" /> は、<time dateTime="2026-09-21T00:00:00Z">2026年9月21日(月)</time> を出力します。iso に 'abc' のような不正な値が渡された場合は、isValid() の判定で「日付不明」を表示し、Invalid Date が画面に出るのを防いでいます。

入力フォームと組み合わせる例です。Reactの状態(useState)には、Day.jsオブジェクトではなく文字列を持たせ、描画のたびに dayjs() で変換します。

import { useState } from 'react'
import dayjs from 'dayjs'

export function DeadlineNotice() {
  const [value, setValue] = useState('2026-09-30')
  const deadline = dayjs(value)
  const remaining = deadline.diff(dayjs().startOf('day'), 'day')

  return (
    <div>
      <input type="date" value={value} onChange={(e) => setValue(e.target.value)} />
      <p>
        {deadline.isValid()
          ? `締切(${deadline.format('M月D日(ddd)')})まであと${remaining}日`
          : '日付を入力してください'}
      </p>
    </div>
  )
}

<input type="date"> の値は YYYY-MM-DD 形式の文字列で、そのまま dayjs() に渡せます。2026年9月21日に開くと「締切(9月30日(水))まであと9日」と表示され、入力を 2026-10-31 に変えると「あと40日」になります。入力欄を空にすると dayjs('') は不正な日付になるため、「日付を入力してください」を表示します。残り日数の計算に startOf('day') を使っているのは、計算・比較の章で説明した、時刻の影響を避けるためです。

Day.jsオブジェクトを useEffect の依存配列に入れると、レンダーのたびに実行されます。 dayjs(value) は呼ぶたびに新しいオブジェクトを作るため、値が同じでも「変更された」と判定されるからです。

const date = dayjs(value)

useEffect(() => { /* ... */ }, 2026/10/01)           // 毎回実行される
useEffect(() => { /* ... */ }, 2026/10/01) // 日時が変わったときだけ
useEffect(() => { /* ... */ }, [value])          // 元の文字列を使う

value が変わらないままボタンの状態だけを3回更新したところ、1行目のエフェクトは初回と合わせて4回、2行目と3行目は1回だけ実行されました。依存配列には、元の文字列か valueOf() の数値を使います。

Next.jsなどでサーバー側レンダリング(SSR)をする場合は、描画中に dayjs() で現在時刻を表示すると、ハイドレーションの不一致が起きます。 サーバーが出力したHTMLとクライアントの初回描画で時刻が違うと、Reactが不一致のエラーを出します。実際に、サーバー側で 10:00:00、クライアント側で 10:00:05 を描画したところ、「Hydration failed because the server rendered text didn’t match the client」というエラーが出ました。

現在時刻は、マウント後に useEffect の中でセットすると回避できます。

import { useState, useEffect } from 'react'
import dayjs from 'dayjs'

export function Clock() {
  const [now, setNow] = useState(null)

  useEffect(() => {
    setNow(dayjs())
    const id = setInterval(() => setNow(dayjs()), 1000)
    return () => clearInterval(id)
  }, [])

  return <p>{now ? now.format('YYYY-MM-DD HH:mm:ss') : ''}</p>
}

サーバーが出力するHTMLは空の <p></p> で、マウント後に 2026-09-21 10:00:00 のような現在時刻が入り、1秒ごとに更新されます。

サーバーとクライアントでタイムゾーンが違う場合は、同じ日時でも表示が変わります。ブログの投稿日のように、固定の日時を表示するなら、UTC・Timezoneの節で扱った .tz('Asia/Tokyo') で地域を指定すると、実行環境に関係なく同じ表示になります。

TypeScriptでは、型を Dayjs としてimportします。

import dayjs, { Dayjs } from 'dayjs'

type Props = { date: Dayjs }

export function Label({ date }: Props) {
  return <span>{date.format('YYYY-MM-DD')}</span>
}

import dayjs, { Dayjs } from 'dayjs' は、esModuleInterop を有効にした設定で型チェックが通ることを確認しています。

Reactの周辺ライブラリでも、Day.jsは使われています。Ant Designは、日付や時刻の処理に標準でDay.jsを使い、DatePicker の値もDay.jsオブジェクトです。MUI X Date Pickersも、Day.js用のアダプター(AdapterDayjs)を使うと、value={dayjs()} のようにDay.jsオブジェクトを渡せます。これらを使うプロジェクトでは、すでにDay.jsが依存関係に入っている場合があります。

Node.jsでDay.jsを使う基本例

Node.jsでは、npm install dayjs の後、CommonJSなら require('dayjs')、ESMなら import dayjs from 'dayjs' で読み込みます。ESMでプラグインやlocaleをimportするときは、dayjs/plugin/utc.js のように拡張子 .js を付けます。

CommonJSの例です。ファイル名に使う日時の文字列や、有効期限の計算がよくある用途です。

const dayjs = require('dayjs')

// ファイル名用のタイムスタンプ
const stamp = dayjs('2026-09-21 09:05:07').format('YYYYMMDD_HHmmss')
console.log(`backup_${stamp}.zip`) // backup_20260921_090507.zip

// 30分間有効なトークンの期限
const issuedAt = dayjs('2026-09-21 15:20')
const expiresAt = issuedAt.add(30, 'minute')

expiresAt.toISOString()                       // 2026-09-21T06:50:00.000Z
expiresAt.unix()                              // 1789973400
dayjs('2026-09-21 15:40').isBefore(expiresAt) // true
dayjs('2026-09-21 16:00').isBefore(expiresAt) // false
JSON.stringify({ issuedAt })                  // {"issuedAt":"2026-09-21T06:20:00.000Z"}

add() と isBefore() で有効期限の判定ができ、unix() でJWTなどに使う秒単位のタイムスタンプを取得できます。Day.jsオブジェクトを JSON.stringify() に渡すと、UTCのISO 8601形式の文字列になるため、APIのレスポンスにそのまま含められます。

ESMで、UTC・Timezoneプラグインと日本語localeを使う例です。

// app.mjs(または package.json に "type": "module" を指定した .js)
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc.js'
import timezone from 'dayjs/plugin/timezone.js'
import 'dayjs/locale/ja.js'

dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.locale('ja')

console.log(dayjs.utc('2026-09-21 00:00').tz('Asia/Tokyo').format('YYYY年M月D日(ddd) HH:mm'))
// 2026年9月21日(月) 09:00

これまでの章では import utc from 'dayjs/plugin/utc' と拡張子なしで書いてきましたが、Node.jsが直接ESMとして読み込む場合、拡張子なしの書き方は ERR_MODULE_NOT_FOUND になります。エラーメッセージには「Did you mean to import “dayjs/plugin/utc.js”?」と表示されるため、指示どおり .js を付ければ解決します。CommonJSの require('dayjs/plugin/utc') は、拡張子なしで動きます。

サーバーやコンテナのタイムゾーンがUTCの場合、dayjs() はUTC基準になります。 TZ=UTC で実行すると、dayjs('2026-09-21T00:00:00Z').format() は 2026-09-21 00:00:00 +00:00 を返しました。日本時間で扱いたいときの方法は2つあります。

// 方法1:スクリプトの先頭でタイムゾーンを指定する
process.env.TZ = 'Asia/Tokyo'

// 方法2:表示するときに地域を指定する(UTC・Timezoneプラグインが必要)
dayjs('2026-09-21T00:00:00Z').tz('Asia/Tokyo').format('YYYY-MM-DD HH:mm:ss') // 2026-09-21 09:00:00

方法1は、日付を作る前に設定すれば、以降の dayjs() が日本時間で動きます(確認済み)。プロセス全体の設定なので、他のライブラリの日付処理にも影響します。方法2は、日時ごとに地域を明示するため、影響範囲が限定されます。ログの時刻を日本時間にそろえる場合は、次のように書けます。

const line = `[${dayjs('2026-09-21T09:05:07.123Z').tz('Asia/Tokyo').format('YYYY-MM-DD HH:mm:ss.SSS')}] server started`
// [2026-09-21 18:05:07.123] server started

TypeScriptでNode.jsを書く場合の import の書き方は、導入の章で示した tsconfig.json の設定に従います。

Moment.jsからDay.jsへ移行するときのポイント

Moment.jsからの移行は、moment() を dayjs() に置き換えるのが基本です。format() add() subtract() startOf() diff() isBefore() などは、同じ名前と同じ引数で動きます。ただし、不変性、プラグイン、検証の結果、localeの4点は、置き換えだけでは動作が変わります。

Moment.js公式ドキュメントは、Moment.jsを保守モードのレガシープロジェクトと位置づけています。新機能の追加、APIの不変化、バンドルサイズの改善は予定していないと明記し、新規プロジェクトでの利用を勧めていません。代替として、Day.jsやLuxon、date-fnsなどを挙げています。

主なAPIの対応表です。

Moment.jsDay.js必要なプラグイン
moment()dayjs()なし
moment(文字列, 書式)dayjs(文字列, 書式)CustomParseFormat
format() add() subtract() startOf() endOf() diff()同じなし
isBefore() isAfter() isSame()同じなし
isBetween() isSameOrBefore() isSameOrAfter()同じIsBetween IsSameOrBefore IsSameOrAfter
fromNow() from()同じRelativeTime
format('Do') format('Q')同じAdvancedFormat
moment.utc() .utc()dayjs.utc() .utc()UTC
moment.tz()(moment-timezone)dayjs.tz()UTC と Timezone
moment.duration()dayjs.duration()Duration
moment.min() moment.max()dayjs.min() dayjs.max()MinMax
moment.isMoment()dayjs.isDayjs()なし
moment.locale('ja')import 'dayjs/locale/ja' と dayjs.locale('ja')なし

この表でプラグインが必要とされた機能は、Moment.jsでは本体に含まれています。Day.jsで、プラグインを読み込まずに呼ぶと、isBetween、fromNow、utc などは is not a function になり、dayjs.duration や dayjs.min は undefined になります。

1つ目の違いは、不変性です。 Moment.jsのオブジェクトは可変で、add() や startOf() が元のオブジェクトを書き換えます。

const m = moment('2026-09-21 09:05:07')
m.add(1, 'day')
m.format('YYYY-MM-DD') // 2026-09-22(m が書き換わった)

const d = dayjs('2026-09-21 09:05:07')
d.add(1, 'day')
d.format('YYYY-MM-DD') // 2026-09-21(d は変わらない)

Moment.jsで「戻り値を使わず、元のオブジェクトを変更する」コードを書いていた場合、Day.jsに置き換えると、エラーにならずに日付が進まなくなります。add( subtract( startOf( endOf( set( が、代入なしの文として呼ばれている箇所を、検索して洗い出します。

// Moment.js
m.add(1, 'day')

// Day.js(戻り値を受け取る)
d = d.add(1, 'day')

2つ目の違いは、存在しない日付の扱いです。 Moment.jsは 2026-02-30 を不正な日付として扱いますが、Day.jsは標準では2026年3月2日として扱います。

moment('2026-02-30').isValid() // false
dayjs('2026-02-30').isValid()  // true
dayjs('2026-02-30').format('YYYY-MM-DD') // 2026-03-02

入力値の検証にMoment.jsの isValid() を使っている場合は、CustomParseFormat を読み込み、strictモードに置き換えます。

dayjs('2026-02-30', 'YYYY-MM-DD', true).isValid() // false

3つ目は、不正な日付を整形したときの文字列です。 Moment.jsは Invalid date、Day.jsは Invalid Date を返し、大文字と小文字が違います。この文字列で判定しているコードがあれば、isValid() に書き換えます。

4つ目は、localeの読み込みです。 Node.jsでは、Moment.jsは moment.locale('ja') だけで日本語に切り替わりました。Day.jsは、import 'dayjs/locale/ja' を書かないと、dayjs.locale('ja') を呼んでも英語のままで、エラーも出ません。

また、ISO 8601以外の文字列を moment() に渡すと、非推奨の警告を出して Date の解析に切り替わります。Day.jsは警告なしで同じ挙動をするため、moment(文字列, 書式) の形で書いていた箇所は、CustomParseFormat を使った dayjs(文字列, 書式) にそろえます。

移行の手順は、次の流れが安全です。

  1. npm install dayjs で導入し、locale(dayjs.locale('ja'))をエントリーポイントで設定する
  2. moment をimportしているファイルを検索し、moment( を dayjs( に置き換える
  3. 使っているメソッドを対応表で確認し、必要なプラグインを dayjs.extend() で登録する
  4. 代入なしで add() や startOf() を呼んでいる箇所を、戻り値を受け取る形に直す
  5. isValid() の判定と、書式付きの解析(moment(文字列, 書式))を、strictモードで確認する
  6. テストを通し、moment を使う箇所がなくなったら npm uninstall moment で取り除く

一度にすべて置き換えず、段階的に進める場合は、2つのライブラリの日付を受け渡すことになります。その際は、toDate() で Date を経由します。

const d = dayjs(moment('2026-09-21 09:05:07').toDate())
const m = moment(dayjs('2026-09-21 09:05:07').toDate())

moment(dayjs(...)) のようにDay.jsオブジェクトを直接渡すと、時刻が失われて 2026-09-21 00:00:00 になりました。互いのオブジェクトは直接渡さず、Date を経由させます。

送料無料の情報が満載!ネットで買うなら楽天市場

Day.jsのよくある疑問

導入方法はビルド環境の有無で、曜日の日本語化はlocaleの読み込みで、format・add・diffは「表示する・動かす・差を測る」という目的で選び分けます。

Day.jsはnpmとCDNのどちらで使えばいい?

Vite・webpack・Next.jsなどのビルド環境があるならnpm、ビルド環境のない静的なHTMLや動作確認ならCDNを選びます。判断に迷ったら、プロジェクトにpackage.jsonがあるかどうかで決めて問題ありません。

項目npmCDN
向いている場面Reactなどのアプリ、Node.js、ビルド環境のあるサイトpackage.jsonのない静的HTML、動作確認、小さなスクリプト
読み込み方import dayjs from 'dayjs'<script>タグ(グローバルにdayjsが定義される)
localeの追加import 'dayjs/locale/ja'localeごとに別の<script>タグを追加
バージョン管理package.jsonとロックファイルで固定URLのバージョン指定で管理

Day.jsはlocaleやプラグインを使う分だけ読み込む設計です。npmではimportした分だけがビルドに含まれ、CDNでは必要なファイルを<script>タグで追加します。導入コード自体は「Day.jsの使い方を始める準備」で扱っているため、ここでは選び方だけ押さえれば十分です。

CDNを使う場合の注意点が2つあります。

  • CDNのURLに@1と書くと1系の最新版に追従します。本番環境で動作を固定したいときは、dayjs@x.y.zの形式でパッチバージョンまで指定します。
  • localeやプラグインの<script>は、必ずdayjs.min.jsより後に読み込みます。

Node.jsではCDNを使えないため、npmで導入します。Reactもビルド環境を前提にするのが一般的なので、npmが基本です。

Day.jsで日本語の曜日を表示するには?

日本語のlocaleをimportしてdayjs.locale('ja')を実行し、formatでdddd(月曜日)またはddd(月)を指定します。localeを読み込まないと、dayjs.locale('ja')を実行しても日本語にならず、英語の表記のままです。

npmの場合は次のように書きます。

import dayjs from 'dayjs'
import 'dayjs/locale/ja'

dayjs.locale('ja')

const d = dayjs('2026-09-21')
d.format('YYYY年M月D日(dddd)') // 2026年9月21日(月曜日)
d.format('YYYY/MM/DD(ddd)')      // 2026/09/21(月)

import 'dayjs/locale/ja'で日本語のデータを読み込み、dayjs.locale('ja')で「以降のDay.jsは日本語で表示する」と切り替えています。ddddは「月曜日」、dddは「月」の形式で出力されます。

CDNの場合は、dayjs.min.jsの後にjaのlocaleファイルを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ja.js"></script>
<script>
  dayjs.locale('ja')
  console.log(dayjs('2026-09-21').format('YYYY年M月D日(dddd)')) // 2026年9月21日(月曜日)
</script>

日本語化には、グローバルに切り替える方法と、インスタンス単位で指定する方法があります。

dayjs().locale('ja').format('dddd') // このインスタンスだけ日本語

dayjs.locale('ja')で切り替えるのは以降に作るオブジェクトの設定で、すでに作成済みのインスタンスには影響しません。切り替え前に作った日付が英語のまま表示される場合は、この挙動が原因です。ページ全体を日本語で統一するなら、アプリの初期化時に一度だけdayjs.locale('ja')を呼ぶ構成が扱いやすくなります。

locale(表示言語・曜日名・週の始まりなどの地域設定)は、タイムゾーンとは別の仕組みです。日本語にしても時刻がJSTに変わるわけではありません。タイムゾーンの扱いは「UTC・Timezoneでタイムゾーンを扱う」を参照してください。

Day.jsのformat・add・diffはどう使い分ける?

formatは「日付を文字列にして表示する」、add・subtractは「日付を前後に動かす」、diffは「2つの日付の差を数値で求める」メソッドです。目的が表示なのか、計算なのか、期間の測定なのかで選びます。

やりたいことメソッド戻り値
画面に表示する文字列にしたいformat()文字列
日付を進める・戻したいadd() / subtract()新しいDay.jsオブジェクト
2つの日付の間隔を知りたいdiff()数値
どちらが先かを判定したいisBefore() / isAfter() / isSame()真偽値

3つを組み合わせた例です。

import dayjs from 'dayjs'

const start = dayjs('2026-09-21')
const end = start.add(10, 'day')

end.format('YYYY-MM-DD')   // '2026-10-01'
end.diff(start, 'day')     // 10
start.format('YYYY-MM-DD') // '2026-09-21'(startは変わらない)

add(10, 'day')は10日後の日付を持つ新しいオブジェクトを返します。formatはそのオブジェクトを表示用の文字列にするだけで、日付の値は変えません。diff(start, 'day')はendからstartを引いた日数を返します。

間違えやすい点は3つです。

  • addの結果を受け取らないと何も起きない:Day.jsのオブジェクトはイミュータブル(値を変更できない)です。start.add(1, 'day')だけを書いてもstartは変わらないため、const next = start.add(1, 'day')のように受け取ります。
  • diffは「呼び出す側 − 引数」:a.diff(b)は、aがbより後の日付ならプラスになります。順序を逆にすると符号が反転します。
  • diffは端数を切り捨てる:'day'を指定すると、24時間に満たない端数は切り捨てられます。第3引数にtrueを渡すと、小数を含む値が返ります。

実務では、締切までの残り日数の表示でこの3つを組み合わせます。

const deadline = dayjs('2026-10-31')
const today = dayjs().startOf('day')

const remaining = deadline.diff(today, 'day')
console.log(`締切まであと${remaining}日`) // 2026-09-21に実行した場合: 締切まであと40日

dayjs()は現在の時刻まで含むため、そのままdiffすると時刻の端数で日数が1日少なく出ることがあります。startOf('day')で当日の0時にそろえてから比較すると、カレンダー上の日数と一致します。startOfや比較メソッドの詳細は「Day.jsで日付を計算・比較する」で解説しています。

【不要なパソコンを送るだけ】パソコン無料処分サービス『送壊ゼロ』

まとめ

Day.jsは、dayjs()で日付オブジェクトを作り、formatで表示し、add・diff・比較メソッドで計算する流れを覚えれば、日常的な日付処理の大半をカバーできます。日本語化やタイムゾーンなど標準にない機能は、localeやプラグインを追加して補います。

重要ポイント

  • 導入方法はビルド環境で選ぶ:ビルド環境があるならnpm install dayjsとimport dayjs from 'dayjs'、静的HTMLなら<script>タグでCDNから読み込みます。
  • dayjs()で作るのはDateとは別のオブジェクト:引数なしで現在日時、文字列やDateを渡すとその日時のオブジェクトになります。月はmonth()が0始まり、曜日はday()が0(日曜)から始まる点に注意します。
  • formatは表示専用:日付の値は変えず、YYYY-MM-DDやYYYY年M月D日(dddd)のような文字列を返します。
  • add・subtract・startOfは新しいオブジェクトを返す:元のオブジェクトは変わらないため、結果は変数で受け取ります。
  • diffは数値、比較メソッドは真偽値:日数などの差はdiff(呼び出す側から引数を引いた値)、前後関係の判定はisBefore・isAfter・isSameを使います。
  • 日本語化にはlocaleの読み込みが必須:import 'dayjs/locale/ja'のあとにdayjs.locale('ja')を実行します。localeは表示言語の設定で、タイムゾーンとは別の仕組みです。
  • 標準にない機能はプラグインで追加する:dayjs.extend()で登録します。独自形式の文字列を解析するならCustomParseFormat、タイムゾーンを扱うならUTCとTimezoneを組み合わせます。
  • ReactでもNode.jsでもAPIは同じ:npmで導入し、importして使う書き方は変わりません。
  • Moment.jsからの移行では、APIの近さと違いの両方を見る:メソッド名は似ていますが、Day.jsはイミュータブルで、標準機能を小さく保つ代わりにプラグインで拡張する設計です。移行時は、プラグインが必要な箇所と、日付を直接書き換えていた処理を優先して確認します。
タイトルとURLをコピーしました