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

2024-04-02

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

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

トークン意味
G西暦年(紀元後)2024
GG西暦年(紀元後、2桁)24
y年(省略形)24
yy年(2桁)24
yyy年(3桁)024
yyyy年(4桁)2024
M月(数字)3
MM月(2桁)03
MMM月(3文字略称)3月
MMMM月(フルネーム)3月
w週番号(ISO 8601)13
ww週番号(2桁)13
W週番号(省略形)13
WW週番号(2桁)13
d日付26
dd日付(2桁)26
D曜日(数字)2
DD曜日(3文字略称)
DDD曜日(フルネーム)火曜日
E曜日(省略形)
EE曜日(2文字略称)
EEE曜日(3文字略称)
EEEE曜日(フルネーム)火曜日
a午前/午後午前
aa午前/午後(省略形)午前
aaa午前/午後(3文字略称)午前
aaaa午前/午後(フルネーム)午前

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

  • 西暦年(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桁)
  • SSS | ミリ秒(3桁)

補足

  • 上記の表は、よく使用されるトークンのみを抜粋しています。
  • トークンの詳細は、上記の参考資料を参照してください。
  • 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 で日付をフォーマットするには、さまざまな方法があります。それぞれの方法のメリットとデメリットを理解して、ニーズに合った方法を選びましょう。





初心者でも安心!date-fnsでRFC7231準拠の日付フォーマットを行うチュートリアル

date-fns の formatRFC7231 は、RFC 7231 標準に従って日付をフォーマットする関数です。これは、HTTP ヘッダーなどの特定の状況で日付を表現する必要がある場合に便利です。使い方formatRFC7231 の使い方は以下の通りです。


date-fns で特定の年代に属するデータをフィルタリング

getDecade 関数の役割与えられた日付が属する10年単位の期間(年代)を数値で返します。例えば、2024年4月12日であれば、getDecade(new Date(2024, 3, 12)) は 2020 を返します。使い方動作の仕組み


【フロントエンドエンジニア必見】date-fns hoursToMinutesで時間を分に変換する方法

date-fnsライブラリのConversion Helpersは、日付と時刻の操作を簡潔に行うための関数群を提供します。その中のhoursToMinutes関数は、時間数を分に変換する関数です。使い方引数hours: 変換したい時間数を表す数値


過去最も近い土曜日を取得する:date-fns の previousSaturday 関数徹底解説

previousSaturday 関数は、以下の引数を受け取ります。date: 対象となる日付オブジェクト。Date 型、または date-fns の parse 関数で生成されたオブジェクトなど。この関数は、date よりも過去で最も近い土曜日をDate 型で返します。


isSameISOWeek 関数でサクッと判定!2つの日付が同じ週かどうかを判断する方法

isSameISOWeek 関数は、以下の2つの引数を受け取ります。date1: 比較対象となる最初の日付date2: 比較対象となる2番目の日付これらの引数は、Date オブジェクト、または YYYY-MM-DD 形式の文字列で指定できます。