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

はじめに

「2024年10月15日火曜日」のような完全な日付形式は一部のコンテキストでは適していますが、多くの場合、日付の特定の部分のみを表示する必要があります。公開日には月と年のみ、カレンダーには曜日のみ、誕生日には日と月のみを表示したい場合があります。

JavaScriptのIntl.DateTimeFormatは、各日付コンポーネントに対して個別のオプションを提供します。「full」や「short」のようなプリセットスタイルを選択する代わりに、含める部分とそれぞれのフォーマット方法を正確に指定します。

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

日付には、個別にフォーマットできる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スタイルを持つ場合があります。たとえば、英語では火曜日と木曜日の両方が「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月と5月の両方が「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値は日を先頭ゼロ付きで表示します。

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

複数の日付部分の組み合わせ

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

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

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
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を受け入れます。

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