日付の特定の部分だけを表示するにはどうすればよいですか？

はじめに

「2024年10月15日（火曜日）」のような完全な日付形式は特定の状況では適していますが、多くの場合、日付の特定の部分のみを表示する必要があります。出版日には月と年だけを表示したり、カレンダーには曜日だけを表示したり、誕生日には日と月だけを表示したりすることがあります。

JavaScriptのIntl.DateTimeFormatは各日付コンポーネントに対する個別のオプションを提供しています。「完全」や「短縮」のようなプリセットスタイルを選ぶ代わりに、どの部分を含めるか、そしてそれぞれをどのように書式設定するかを正確に指定します。

日付コンポーネントの理解

日付には独立して書式設定できる4つの主要コンポーネントがあります。

weekdayは週のどの曜日かを示します。yearはどの年かを示します。monthは年のどの月かを示します。dayは月のどの日かを示します。

各コンポーネントは表示方法を制御する異なる書式設定値を受け入れます。オプションオブジェクトには必要なコンポーネントのみを含めます。

曜日の書式設定

weekdayオプションは週の曜日を表示します。出力の長さを制御する3つの値を受け入れます。

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

narrow値は1文字を生成します。short値は省略名を生成します。long値は完全な曜日名を生成します。

一部のロケールでは、2つの曜日が同じnarrowスタイルを持つことがあります。例えば、英語ではTuesday（火曜日）とThursday（木曜日）はどちらも「T」で始まります。

年のフォーマット

yearオプションは年を表示します。2つの値を受け付けます。

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"

numeric値は完全な年を表示します。2-digit値は最後の2桁のみを表示します。

月のフォーマット

monthオプションは年の月を表示します。異なる詳細レベルを提供する5つの値を受け付けます。

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

numeric値は先頭のゼロなしで月を数字として表示します。2-digit値は先頭のゼロありで月を数字として表示します。narrow値は1文字を生成します。short値は省略された月名を生成します。long値は完全な月名を生成します。

一部のロケールでは、2つの月が同じnarrowスタイルを持つことがあります。例えば、英語では3月（March）と5月（May）はどちらも「M」で始まります。

日のフォーマット

dayオプションは月の日を表示します。2つの値を受け付けます。

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"

numeric値は先頭のゼロなしで日を表示します。2-digit値は先頭のゼロありで日を表示します。

一桁の日の場合、numericは「5」のような値を生成し、2-digitは「05」を生成します。

複数の日付要素を組み合わせる

必要な組み合わせを正確に表示するために、単一のフォーマッターで複数のオプションを指定できます。

const date = new Date('2024-10-15');

// 月と年のみ
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// 曜日と日のみ
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// 月と日のみ
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// カスタムフォーマットによるすべての要素
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

フォーマッターは、ロケールの規則に従って自動的に要素を配置します。順序や句読点について心配する必要はありません。

ロケール間でのオプションの動作

同じオプションでも、異なるロケールでは異なる出力が生成されます。各ロケールは日付要素の順序とフォーマットに関して独自の規則に従います。

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

ドイツ語では日が最初に来て、ピリオド区切りを使用します。日本語は年-月-日の順序で日本語の文字を使用します。アラビア語は月名と数字の両方にアラビア文字を使用します。

曜日と月の名前もロケールに基づいて変化します。

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

フランス語では曜日と月の名前の両方が小文字です。スペイン語も小文字を使用しますが、カンマ区切りが含まれます。

一般的なユースケース

月と年の表示は、出版日やアーカイブリストに適しています。

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

曜日名の表示は、カレンダーやスケジュールに適しています。

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

年を除いた月と日の表示は、誕生日や年次イベントに適しています。

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

まとめ

Intl.DateTimeFormatのオプションオブジェクトを使用すると、日付全体ではなく特定の部分を表示できます。weekdayオプションはnarrow、short、またはlongを受け付けます。yearオプションはnumericまたは2-digitを受け付けます。monthオプションはnumeric、2-digit、narrow、short、またはlongを受け付けます。dayオプションはnumericまたは2-digitを受け付けます。

複数のオプションを組み合わせて、必要な部分だけを正確に表示できます。フォーマッタはロケールに基づいて順序と句読点を自動的に処理します。異なるロケールでは、同じ日付コンポーネントを表示するために異なる規則が使用されます。