日付と時刻のフォーマット・パースをもっと簡単に！ date-fns v2 の Unicode Tokens をマスターしよう

Unicode Tokens の利点

将来性: Unicode Tokens は、将来の拡張性と互換性を考慮して設計されています。
標準化: Unicode Tokens は、国際標準に基づいているため、さまざまな言語や地域で一貫した形式で日付と時刻を処理することができます。
一貫性: Unicode Tokens は、日付と時刻のフォーマットとパースにおける一貫性を確保します。これにより、異なるライブラリ間での互換性が向上し、コードの読みやすさと保守性を向上させることができます。

Unicode Tokens の種類

date-fns v2 で使用される Unicode Tokens は、以下の種類に分類されます。

タイムゾーン: z, zz, zzz
ミリ秒: S, SSS
秒: s, ss
分: m, mm
時間: h, hh, H, HH
曜日: E, EE, EEE, EEEE
日: d, dd, ddd
月: M, MM, MMM, MMMM
年: y, yy, yyy, yyyy

Unicode Tokens の使用方法

Unicode Tokens を使用して日付と時刻をフォーマットするには、format() 関数を使用します。この関数は、日付オブジェクトとフォーマット文字列を引数として受け取ります。フォーマット文字列は、フォーマットする日付と時刻の要素を指定する Unicode Tokens で構成されます。

import { format } from 'date-fns';

const date = new Date(2024, 5, 22);
const formattedDate = format(date, 'yyyy-MM-dd');
console.log(formattedDate); // 2024-06-22

Unicode Tokens を使用して日付と時刻をパースするには、parse() 関数を使用します。この関数は、フォーマットされた日付文字列とフォーマット文字列を引数として受け取ります。フォーマット文字列は、パースする日付と時刻の要素を指定する Unicode Tokens で構成されます。

import { parse } from 'date-fns';

const formattedDate = '2024-06-22';
const date = parse(formattedDate, 'yyyy-MM-dd');
console.log(date); // Date { 2024-06-22 00:00:00 GMT-0700 }

Unicode Tokens の詳細については、date-fns のドキュメントを参照してください。

フォーマット

import { format } from 'date-fns';

const date = new Date(2024, 5, 22, 13, 24, 36);

// 年、月、日
console.log(format(date, 'yyyy-MM-dd')); // 2024-06-22
console.log(format(date, 'dd/MM/yyyy')); // 22/06/2024

// 曜日
console.log(format(date, 'EEE')); // 土
console.log(format(date, 'EEEE')); // 土曜日

// 時間、分、秒
console.log(format(date, 'h:mm:ss')); // 1:24:36
console.log(format(date, 'HH:mm:ss')); // 13:24:36

// ミリ秒
console.log(format(date, 'h:mm:ss.SSS')); // 1:24:36.360

// タイムゾーン
console.log(format(date, 'yyyy-MM-dd HH:mm:ss z')); // 2024-06-22 13:24:36 PDT

以下の例では、parse() 関数を使用して、さまざまな Unicode Tokens を使って日付文字列をパースする方法を示します。

import { parse } from 'date-fns';

const formattedDate = '2024-06-22T13:24:36.360-07:00';

// 年、月、日
const date1 = parse(formattedDate, 'yyyy-MM-dd');
console.log(date1); // 2024-06-22

// 時間、分、秒
const date2 = parse(formattedDate, 'HH:mm:ss');
console.log(date2); // 13:24:36

// ミリ秒
const date3 = parse(formattedDate, 'HH:mm:ss.SSS');
console.log(date3); // 13:24:36.360

// タイムゾーン
const date4 = parse(formattedDate, 'yyyy-MM-dd HH:mm:ss z');
console.log(date4); // 2024-06-22 13:24:36 PDT

カスタムフォーマット文字列

Unicode Tokens が導入される前に、date-fns ではカスタムフォーマット文字列を使用して日付と時刻をフォーマットしていました。この方法は、Unicode Tokens よりも柔軟性がありますが、標準化されておらず、さまざまなライブラリ間での互換性が低くなります。

import { format } from 'date-fns';

const date = new Date(2024, 5, 22);
const formattedDate = format(date, 'yyyy/MM/dd HH:mm:ss');
console.log(formattedDate); // 2024/06/22 13:24:36

Luxon

Luxon は、date-fns と同様の機能を提供するもう 1 つの JavaScript ライブラリです。Luxon は、Unicode Tokens をサポートしていますが、独自のフォーマット構文も提供しています。Luxon のフォーマット構文は、date-fns のカスタムフォーマット文字列に似ており、より柔軟性があります。

import { DateTime } from 'luxon';

const date = DateTime.fromJSDate(new Date(2024, 5, 22));
const formattedDate = date.toFormat('yyyy/MM/dd HH:mm:ss');
console.log(formattedDate); // 2024/06/22 13:24:36

Moment.js

Moment.js は、日付と時刻を処理するためのもう 1 つの古い JavaScript ライブラリです。Moment.js は、Unicode Tokens をサポートしていませんが、独自のフォーマット構文を提供しています。Moment.js のフォーマット構文は、date-fns のカスタムフォーマット文字列に似ており、広く使用されています。

import moment from 'moment';

const date = moment(new Date(2024, 5, 22));
const formattedDate = date.format('YYYY/MM/DD HH:mm:ss');
console.log(formattedDate); // 2024/06/22 13:24:36

手動フォーマット

シンプルな日付と時刻のフォーマットであれば、手動でフォーマットすることもできます。これは、最も基本的な方法ですが、複雑なフォーマットの場合は時間がかかります。

const date = new Date(2024, 5, 22, 13, 24, 36);

const year = date.getFullYear();
const month = date.getMonth() + 1; // 月は 0 から始まるため、1 を加算する
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();

const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log(formattedDate); // 2024-06-22 13:24:36