はじめに
「日付操作のライブラリといえばMoment.js」——そう思っていた方も多いのではないでしょうか。しかし、Moment.jsは現在メンテナンスモードに入っており、公式ドキュメントでも新規プロジェクトでの採用が推奨されていません。バンドルサイズの大きさも、パフォーマンスを意識する開発者にとって悩みの種でした。
そんな中で存在感を増しているのが、今回紹介するDay.jsです。Moment.jsとほぼ同じAPIを持ちながら、わずか2KBという圧倒的な軽量さを実現しています。この記事では、Day.jsの特徴から具体的な使い方までを解説していきます。
とはいえ、読むより触った方が早いと思います。日付の加算・減算やフォーマットをその場で書き換えて試せるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。
Day.jsとは
Day.jsは、日付のパース・検証・操作・表示をシンプルに行うためのJavaScriptライブラリです。GitHub上で48,000以上のスターを獲得しており、Moment.jsからの移行先として広く採用されています。
最大の特徴は「Moment.jsと同じAPI設計を、大幅に軽量化した形で提供している」という点です。既存のMoment.jsコードをほぼそのままの書き方でDay.jsに置き換えられるため、学習コストを抑えつつパフォーマンスを改善できます。
主な特徴
- 超軽量 - gzip圧縮時わずか2KB。Moment.jsの約1/20程度のサイズです
- Moment.js互換API -
dayjs()のように、Moment.jsとほぼ同じ書き方で日付操作が可能 - イミュータブル設計 - すべてのメソッドが新しいインスタンスを返すため、意図しない値の書き換えが起きません
- プラグイン機構 - 必要な機能だけをプラグインとして読み込めるため、不要なコードを含めずに済みます
- 国際化対応 - ロケールファイルもオンデマンドで読み込めるため、多言語対応してもバンドルサイズが肥大化しません
インストール
npm、yarn、pnpmのいずれでもインストール可能です。
# npm
npm install dayjs
# yarn
yarn add dayjs
# pnpm
pnpm add dayjs
CDN経由で読み込むことも可能です。
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
Day.jsのサンプルを動かす
下の入力欄に日付を入れて、ボタンを押してみてください。Day.jsのadd()・subtract()・diff()・format()を組み合わせて、日付の加算・減算と今日との差分をその場で計算し直しています。日付欄を直接書き換えても、inputイベントで即座に再計算されます。
まずは要点だけを抜き出すと、次のような書き方になります。
import dayjs from 'dayjs'
const base = dayjs('2026-07-25')
base.format('YYYY年MM月DD日(ddd)') // "2026年07月25日(土)"
base.add(1, 'month').format('YYYY-MM-DD') // "2026-08-25"
base.subtract(1, 'week').format('YYYY-MM-DD') // "2026-07-18"
base.diff(dayjs(), 'day') // 基準日から今日までの日数差
実際に動かせるものが以下です。ボタンで日付を操作するたびに、format()とdiff()の結果が画面に反映されます。
「+1ヶ月」を押すたびにadd(1, 'month')が呼ばれ、日付欄・差分表示の両方が更新されるのが分かるはずです。add(1, 'month')をadd(1, 'year')に、'day'を'hour'に書き換えれば、それぞれ加算する単位や差分の粒度を変えられます。イミュータブル設計なので、currentは毎回新しいインスタンスとして返ってくる点にも注目してください。
基本的な使い方
まずは基本的なインポートと、現在時刻の取得から見ていきましょう。
import dayjs from 'dayjs';
// 現在時刻を取得
const now = dayjs();
console.log(now.format('YYYY-MM-DD HH:mm:ss'));
日付のパース
文字列やDateオブジェクトから日付インスタンスを生成できます。
dayjs('2026-07-25');
dayjs('2026-07-25T09:00:00');
dayjs(new Date());
フォーマット
format()メソッドで任意の書式に変換できます。
dayjs('2026-07-25').format('YYYY年MM月DD日');
// => "2026年07月25日"
dayjs().format('YYYY-MM-DD dddd');
// => "2026-07-25 Saturday"
日付の加算・減算
add()やsubtract()で日付の計算が行えます。イミュータブルなので、元のインスタンスは変更されません。
const today = dayjs('2026-07-25');
today.add(1, 'month'); // 1ヶ月後
today.subtract(7, 'day'); // 7日前
today.add(3, 'year'); // 3年後
日付の比較
前後関係や差分の計算も直感的に書けます。
const start = dayjs('2026-07-01');
const end = dayjs('2026-07-25');
end.isAfter(start); // true
start.isBefore(end); // true
end.diff(start, 'day'); // 24（差分の日数）
実践的なユースケース
相対時間の表示
SNSのタイムラインなどでよく見る「3時間前」「2日前」といった表示は、relativeTimeプラグインで簡単に実現できます。
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const postedAt = dayjs().subtract(3, 'hour');
console.log(postedAt.fromNow());
// => "3 hours ago"
投稿からの経過時間を入力欄で変えられるサンプルが以下です。数値を書き換えるたびに、relativeTimeプラグインが提供するfromNow()の結果が再計算されます。
hoursに大きい数値（例: 48）を入れるとfromNow()は「2 days ago」のように単位を自動で切り上げてくれます。日本語表示にしたい場合は、次の項で紹介するロケール設定と組み合わせてください。
日本語ロケールへの切り替え
日本向けサービスでは、ロケール設定によって曜日や月の表示を日本語化できます。
import dayjs from 'dayjs';
import 'dayjs/locale/ja';
dayjs.locale('ja');
console.log(dayjs('2026-07-25').format('YYYY年MM月DD日(ddd)'));
// => "2026年07月25日(土)"
日付を選び、チェックボックスでdayjs.locale()の切り替えを試せるサンプルです。チェックを外すとdddの曜日表示が英語に戻ります。
dayjs.locale('ja')はグローバルに効くため、以降に生成するdayjs()インスタンスすべてに反映されます。フォーマット文字列の'ddd'を'dddd'に変えると、曜日が省略形から完全な表記に変わることも確認できます。
フォームの入力期間バリデーション
予約フォームやイベント申込フォームで「開始日は終了日より前でなければならない」といったバリデーションにも活用できます。
import dayjs from 'dayjs';
function validateDateRange(startDateStr, endDateStr) {
const start = dayjs(startDateStr);
const end = dayjs(endDateStr);
if (!start.isValid() || !end.isValid()) {
return { valid: false, message: '日付の形式が正しくありません' };
}
if (!start.isBefore(end)) {
return { valid: false, message: '開始日は終了日より前に設定してください' };
}
return { valid: true, message: null };
}
validateDateRange('2026-08-01', '2026-07-25');
// => { valid: false, message: "開始日は終了日より前に設定してください" }
開始日・終了日の2つの<input type="date">に対して、入力するたびにisValid()とisBefore()でリアルタイムに検証するサンプルです。
初期状態は開始日が終了日より前なので「✅ OK」と表示されます。試しに終了日を開始日より前に変えてみてください。isBefore()がfalseを返し、エラーメッセージに切り替わるはずです。
タイムゾーンを考慮した表示
グローバル展開しているサービスでは、utcとtimezoneプラグインを組み合わせることで、ユーザーごとのタイムゾーンに合わせた表示が可能です。
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
const meetingTime = dayjs.utc('2026-07-25T09:00:00');
console.log(meetingTime.tz('Asia/Tokyo').format('HH:mm'));
console.log(meetingTime.tz('America/New_York').format('HH:mm'));
UTC基準の時刻とタイムゾーンをプルダウンで選び、utc・timezoneプラグインのtz()でその場で変換するサンプルです。
プルダウンをAmerica/New_Yorkに切り替えると、tz()が夏時間（DST）まで考慮したうえで現地時刻に変換してくれるのが確認できます。UTC時刻の入力を変えれば、会議時刻を各拠点の時刻に置き換えるような用途にもそのまま応用できます。
まとめ
Day.jsは、Moment.jsの使いやすいAPIをそのまま引き継ぎながら、バンドルサイズの課題を解消した日付ライブラリです。イミュータブルな設計とプラグインによる機能拡張の仕組みにより、必要な機能だけを取り込んで軽量なまま運用できます。
すでにMoment.jsを使っているプロジェクトであれば、APIの互換性が高いため移行のハードルも低いはずです。これから新しく日付処理を実装するのであれば、まずDay.jsを候補に入れてみることをおすすめします。公式ドキュメントにはさらに多くのプラグインが用意されているので、自分のプロジェクトに必要な機能を探してみてください。