Day.jsは、Moment.jsに代わる定番となるのか

はじめに

「日付操作のライブラリといえば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>

基本的な使い方

まずは基本的なインポートと、現在時刻の取得から見ていきましょう。

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"

日本語ロケールへの切り替え

日本向けサービスでは、ロケール設定によって曜日や月の表示を日本語化できます。

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日(土)"

フォームの入力期間バリデーション

予約フォームやイベント申込フォームで「開始日は終了日より前でなければならない」といったバリデーションにも活用できます。

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: "開始日は終了日より前に設定してください" }

タイムゾーンを考慮した表示

グローバル展開しているサービスでは、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'));

まとめ

Day.jsは、Moment.jsの使いやすいAPIをそのまま引き継ぎながら、バンドルサイズの課題を解消した日付ライブラリです。イミュータブルな設計とプラグインによる機能拡張の仕組みにより、必要な機能だけを取り込んで軽量なまま運用できます。

すでにMoment.jsを使っているプロジェクトであれば、APIの互換性が高いため移行のハードルも低いはずです。これから新しく日付処理を実装するのであれば、まずDay.jsを候補に入れてみることをおすすめします。公式ドキュメントにはさらに多くのプラグインが用意されているので、自分のプロジェクトに必要な機能を探してみてください。