date-fns vs Moment.js：JavaScriptで日付を扱うためのライブラリ徹底比較

date-fns の General に関連する Unicode トークン解説

General カテゴリ のトークンは、日付の一般的な部分を表します。以下に、よく使用されるトークンとその意味をまとめました。

これらのトークンを組み合わせて、さまざまな書式設定文字列を作成できます。例えば、以下の書式設定文字列は、

• 西暦年（4桁）
• 月（2桁）
• 日付（2桁）
• 曜日（3文字略称）

を組み合わせて、日付を "2024年3月26日（火）" のように表示します。

const date = new Date(2024, 2, 26);
const formattedDate = format(date, 'yyyy-MM-dd (EEE)');
console.log(formattedDate); // 2024-03-26 (火)

その他の General カテゴリのトークン

• q | 四半期
• Q | 四半期（省略形）
• h | 時（12時間制）
• hh | 時（12時間制、2桁）
• H | 時（24時間制）
• HH | 時（24時間制、2桁）
• m | 分
• mm | 分（2桁）
• s | 秒
• ss | 秒（2桁）
• S | ミリ秒
• SS | ミリ秒（2桁）

補足

• 上記の表は、よく使用されるトークンのみを抜粋しています。
• トークンの詳細は、上記の参考資料を参照してください。
• date-fns は、さまざまなロケールに対応しています。ロケールによって、日付の書式設定や解析の規則が異なる場合があります。

const date = new Date(2024, 2, 26);

// 西暦年（4桁）
const formattedDate1 = format(date, 'yyyy');
console.log(formattedDate1); // 2024

// 月（2桁）
const formattedDate2 = format(date, 'MM');
console.log(formattedDate2); // 03

// 日付（2桁）
const formattedDate3 = format(date, 'dd');
console.log(formattedDate3); // 26

// 曜日（3文字略称）
const formattedDate4 = format(date, 'EEE');
console.log(formattedDate4); // 火

// 午前/午後（フルネーム）
const formattedDate5 = format(date, 'aaaa');
console.log(formattedDate5); // 午前

// 時（12時間制）
const formattedDate6 = format(date, 'h');
console.log(formattedDate6); // 10

// 分（2桁）
const formattedDate7 = format(date, 'mm');
console.log(formattedDate7); // 33

// 秒（2桁）
const formattedDate8 = format(date, 'ss');
console.log(formattedDate8); // 54

// ミリ秒（3桁）
const formattedDate9 = format(date, 'SSS');
console.log(formattedDate9); // 123

// さまざまな書式設定を組み合わせて表示
const formattedDate10 = format(date, 'yyyy年MM月dd日 (EEE) HH時mm分ss秒 SSSミリ秒');
console.log(formattedDate10); // 2024年03月26日 (火) 10時33分54秒 123ミリ秒

その他のサンプルコード

• date-fns の公式ドキュメントには、さまざまな書式設定文字列の例が掲載されています。

date-fns の General カテゴリのトークンを使うことで、さまざまな書式設定文字列を簡単に作成できます。これらのトークンを組み合わせて、さまざまなニーズに対応することができます。

日付をフォーマットする他の方法

JavaScript の標準機能を使う

JavaScript には、Date オブジェクトのメソッドを使って日付をフォーマットする機能が標準で備わっています。

const date = new Date(2024, 2, 26);

// 年を取得
const year = date.getFullYear();

// 月を取得
const month = date.getMonth() + 1;

// 日付を取得
const day = date.getDate();

// 曜日を取得
const dayOfWeek = date.getDay();

// 午前/午後を取得
const amPm = date.getHours() < 12 ? '午前' : '午後';

// 時を取得
const hours = date.getHours() % 12;

// 分を取得
const minutes = date.getMinutes();

// 秒を取得
const seconds = date.getSeconds();

// ミリ秒を取得
const milliseconds = date.getMilliseconds();

// フォーマットされた日付を出力
console.log(`${year}年${month}月${day}日 ${dayOfWeek} ${amPm} ${hours}時${minutes}分${seconds}秒 ${milliseconds}ミリ秒`);

この方法は、シンプルで分かりやすいですが、複雑な書式設定には対応していないというデメリットがあります。

Moment.js などのライブラリを使う

Moment.js は、JavaScript で日付を扱うためのライブラリです。date-fns よりも多くの機能が備わっており、複雑な書式設定にも対応できます。

moment.locale('ja');

const formattedDate = moment(date).format('YYYY年MM月DD日 (ddd) HH時mm分ss秒 SSSミリ秒');
console.log(formattedDate); // 2024年03月26日 (火) 10時33分54秒 123ミリ秒

Moment.js は、多くのプロジェクトで使用されており、コミュニティも大きいです。

自作の関数を使う

上記の方法以外にも、自作の関数を使って日付をフォーマットすることもできます。

function formatDate(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const dayOfWeek = date.getDay();
  const amPm = date.getHours() < 12 ? '午前' : '午後';
  const hours = date.getHours() % 12;
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const milliseconds = date.getMilliseconds();

  return `${year}年${month}月${day}日 ${dayOfWeek} ${amPm} ${hours}時${minutes}分${seconds}秒 ${milliseconds}ミリ秒`;
}

const formattedDate = formatDate(date);
console.log(formattedDate); // 2024年03月26日 (火) 10時33分54秒 123ミリ秒

この方法は、自由度が高いというメリットがありますが、複雑な書式設定に対応するには、コード量が増えてしまうというデメリットがあります。

• シンプルな書式設定であれば、JavaScript の標準機能を使うのがおすすめです。
• 複雑な書式設定が必要であれば、date-fns などのライブラリを使うのがおすすめです。
• より自由度の高い書式設定が必要であれば、自作の関数を使うのがおすすめです。

JavaScript で日付をフォーマットするには、さまざまな方法があります。それぞれの方法のメリットとデメリットを理解して、ニーズに合った方法を選びましょう。