日付操作ライブラリ比較：date-fns、dayjs、luxon、moment

フロントエンド開発で日付を扱う際、Date オブジェクトの限界にすぐにぶつかります。そこで登場するのが日付操作ライブラリですが、選択肢は多く、それぞれ設計思想や機能が大きく異なります。特に moment は公式に非推奨となっており、新規プロジェクトでの使用は避けるべきです。ここでは、プロフェッショナルな開発者がアーキテクチャ判断を行うために必要な、技術的・実践的な観点から4つの主要ライブラリを比較します。

📅 ライブラリの基本設計と状態

moment はかつてデファクトスタンダードでしたが、公式ドキュメントおよび npm ページ に明記されている通り、「メンテナンスモード」に入っており、新規プロジェクトでの使用は推奨されていません。代わりに date-fns、dayjs、luxon のいずれかを検討すべきです。

残り3つは、以下のような設計思想の違いがあります：

• date-fns: 関数型スタイル。不変性を保ち、個別の関数をインポートして使う。
• dayjs: moment に似たチェーン可能な API を提供しつつ、軽量でモジュール化可能。
• luxon: 現代的な JavaScript（特に Intl API）を活用し、タイムゾーン処理に強みを持つ。

🧩 不変性とオブジェクト指向 vs 関数型

date-fns は完全に不変で、関数に日付を渡すと新しい日付が返されます。元の値は一切変更されません。

// date-fns
import { addDays, format } from 'date-fns';

const today = new Date();
const tomorrow = addDays(today, 1);
console.log(format(tomorrow, 'yyyy-MM-dd')); // 新しい日付を返す

dayjs は moment と同様にチェーン可能なメソッドを持ちますが、内部的には不変です（各メソッドが新しいインスタンスを返す）。

// dayjs
import dayjs from 'dayjs';

const today = dayjs();
const tomorrow = today.add(1, 'day');
console.log(tomorrow.format('YYYY-MM-DD')); // 新しいインスタンス

luxon も同様に不変で、DateTime クラスのメソッドは常に新しいインスタンスを返します。

// luxon
import { DateTime } from 'luxon';

const today = DateTime.now();
const tomorrow = today.plus({ days: 1 });
console.log(tomorrow.toFormat('yyyy-MM-dd')); // 新しいインスタンス

moment（非推奨）は、古いバージョンでは可変でしたが、後期には不変メソッドも追加されました。しかし、設計が古く、bundle size も大きいのが問題です。

// moment（非推奨）
import moment from 'moment';

const today = moment();
const tomorrow = today.clone().add(1, 'days'); // clone 必須で安全
console.log(tomorrow.format('YYYY-MM-DD'));

💡 補足：dayjs や luxon は moment と似た API を持ちますが、内部は不変で安全です。一方、date-fns は「関数に日付を渡す」という素朴なアプローチを取ります。

🌍 タイムゾーン対応

date-fns はコアパッケージにタイムゾーンサポートが含まれていません。date-fns-tz という別パッケージが必要です。

// date-fns + date-fns-tz
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz';

const utcDate = zonedTimeToUtc('2023-07-01 12:00:00', 'Asia/Tokyo');
const tokyoTime = utcToZonedTime(utcDate, 'Asia/Tokyo');
console.log(format(tokyoTime, 'yyyy-MM-dd HH:mm', { timeZone: 'Asia/Tokyo' }));

dayjs もコアにはタイムゾーン機能がなく、timezone プラグインを有効にする必要があります。

// dayjs + timezone plugin
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');
const tokyoTime = dayjs.tz('2023-07-01 12:00:00', 'Asia/Tokyo');
console.log(tokyoTime.format('YYYY-MM-DD HH:mm'));

luxon はビルトインでタイムゾーン対応しており、Intl API を利用するため、追加プラグイン不要で動作します。

// luxon（タイムゾーン内蔵）
import { DateTime } from 'luxon';

const tokyoTime = DateTime.fromISO('2023-07-01T12:00:00', { zone: 'Asia/Tokyo' });
console.log(tokyoTime.toFormat('yyyy-MM-dd HH:mm')); // タイムゾーン情報保持

moment は moment-timezone という別パッケージが必要で、bundle size がさらに膨らみます（非推奨）。

// moment-timezone（非推奨）
import moment from 'moment-timezone';

const tokyoTime = moment.tz('2023-07-01 12:00:00', 'Asia/Tokyo');
console.log(tokyoTime.format('YYYY-MM-DD HH:mm'));

💡 タイムゾーンを頻繁に扱うアプリ（国際サービス、スケジューラなど）では、luxon が最も手軽で堅牢です。

📦 ツリーシェイキングとバンドルサイズ

date-fns は関数単位でインポートできるため、ツリーシェイキングに最適です。使わない関数は一切バンドルされません。

// date-fns — 最小限のコード
import { format, isBefore } from 'date-fns';

dayjs もプラグイン方式で、必要な機能だけを追加できます。コアは非常に小さいです。

// dayjs — コア + 必要なプラグインのみ
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

luxon は ES モジュール対応でツリーシェイキング可能ですが、機能が密結合しているため、date-fns や dayjs ほど細かく削減できません。

// luxon — 基本的に DateTime を使う
import { DateTime } from 'luxon';

moment はツリーシェイキングが効きにくい構造で、ロケールデータも含めると bundle size が肥大化します（非推奨）。

🗓️ パースとフォーマットの柔軟性

date-fns は parse 関数でカスタムフォーマットに対応しますが、フォーマット文字列の指定が必要です。

// date-fns
import { parse, format } from 'date-fns';

const date = parse('01/07/2023', 'dd/MM/yyyy', new Date());
console.log(format(date, 'yyyy-MM-dd'));

dayjs は CustomParseFormat プラグインを使うことで、柔軟なパースが可能になります。

// dayjs + CustomParseFormat
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

const date = dayjs('01/07/2023', 'DD/MM/YYYY');
console.log(date.format('YYYY-MM-DD'));

luxon は fromFormat メソッドで直接カスタムフォーマットをパースできます。

// luxon
import { DateTime } from 'luxon';

const date = DateTime.fromFormat('01/07/2023', 'dd/MM/yyyy');
console.log(date.toFormat('yyyy-MM-dd'));

moment は柔軟なパースが可能でしたが、非推奨のため新規採用は避けてください。

🔁 相対時間（例：「2分前」）の扱い

date-fns は formatDistance 関数で相対時間を生成できます。

// date-fns
import { formatDistance, subMinutes } from 'date-fns';
import { ja } from 'date-fns/locale';

const past = subMinutes(new Date(), 2);
console.log(formatDistance(past, new Date(), { locale: ja })); // 「2分前」

dayjs は RelativeTime プラグインを有効にすることで、.fromNow() が使えます。

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

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

const past = dayjs().subtract(2, 'minute');
console.log(past.fromNow()); // 「2分前」

luxon は toRelative() メソッドを備えており、ロケール対応も簡単です。

// luxon
import { DateTime } from 'luxon';

const past = DateTime.now().minus({ minutes: 2 });
console.log(past.toRelative({ locale: 'ja' })); // 「2分前」

🧪 テストと不変性の安全性

すべての現代的ライブラリ（date-fns, dayjs, luxon）は不変性を保証しており、ユニットテストで副作用の心配がありません。一方、moment は過去に可変インスタンスによるバグが多発した経緯があり、それが非推奨の理由の一つでもあります。

✅ まとめ：どのライブラリを選ぶべきか？

実践的な選択基準

• 最小限の bundle size と関数型志向が好きなら → date-fns
• moment に似た API で軽量さが欲しいなら → dayjs
• タイムゾーンや国際化を多用するなら → luxon
• 新規プロジェクトで moment を使うのは避けてください

最終的には、チームの好みやプロジェクトの要件（特にタイムゾーンの有無）によって決めるのがベストです。ただし、moment は公式に非推奨なので、移行計画を立てるか、最初から他の選択肢を選ぶことを強く推奨します。