グレゴリオ暦、ヘブライ暦、イスラム暦などのカレンダー名をどのように表示しますか？

はじめに

異なる文化や宗教では、日付の追跡や時間の整理に異なる暦システムを使用しています。グレゴリオ暦は世界の多くの地域で一般的ですが、他の暦システムは宗教的な儀式、文化的な行事、日常生活で使用されています。ヘブライ暦はイスラエルや世界中のユダヤ人コミュニティで使用されています。イスラム暦はイスラム教の宗教的慣行を導きます。仏教暦はタイや他の東南アジア諸国で使用されています。

国際的な利用者にサービスを提供するアプリケーションでは、ユーザーが好みの暦システムを選択できるようにする必要があります。日付選択ツール、設定インターフェース、スケジュールツールでは、ユーザーが自分のニーズに合ったシステムを選択できるように暦の名前を表示します。「gregory」や「islamic-umalqura」のような暗号のようなコードを表示する代わりに、アプリは「グレゴリオ暦」や「ウンム・アル＝クラ暦」のような読みやすい名前を表示します。

JavaScriptのIntl.DisplayNames APIは、暦システムコードを人間が読める名前に変換します。このAPIは翻訳を自動的に処理し、手動の翻訳ファイルを必要とせずにユーザーの言語で暦の名前を表示します。

暦コードとは

暦コードは、異なる暦システムを表す短い文字列識別子です。JavaScriptはこれらの標準化されたコードを内部的に使用して暦を識別します。

一般的な暦コードには以下が含まれます：

グレゴリオ暦のgregory
ヘブライ暦のhebrew
イスラム暦のislamic
仏教暦のbuddhist
中国暦のchinese
日本暦のjapanese

これらのコードはUnicodeロケール識別子仕様に従っています。常に小文字で、必要に応じてislamic-umalquraやislamic-civilのようにハイフンを使用して単語を区切ります。

Intl.DisplayNamesが暦とどのように連携するか

Intl.DisplayNamesコンストラクタは、コードを読みやすいテキストに変換するオブジェクトを作成します。出力言語のロケールと変換したいコードの種類を指定します。

暦の名前を表示するには、タイプとして"calendar"を渡します：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

最初の引数は、英語の場合は'en'、フランス語の場合は'fr'のようなロケールコードです。2番目の引数はtype: 'calendar'を設定するオプションオブジェクトです。

DisplayNamesオブジェクトを作成したら、そのof()メソッドを使用して暦コードを名前に変換します：

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "グレゴリオ暦"

カレンダー名を英語で表示する

グレゴリオ暦、ヘブライ暦、イスラム暦の名前を英語で表示する方法は次のとおりです：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "Gregorian Calendar"
console.log(displayNames.of('hebrew')); // "Hebrew Calendar"
console.log(displayNames.of('islamic')); // "Islamic Calendar"

サポートされているカレンダーであれば、そのコードをof()メソッドに渡すことで表示できます：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('buddhist')); // "Buddhist Calendar"
console.log(displayNames.of('chinese')); // "Chinese Calendar"
console.log(displayNames.of('japanese')); // "Japanese Calendar"
console.log(displayNames.of('persian')); // "Persian Calendar"

イスラム暦には異なる計算方法に基づく複数のバリアントがあります：

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('islamic')); // "Islamic Calendar"
console.log(displayNames.of('islamic-umalqura')); // "Umm al-Qura Calendar"
console.log(displayNames.of('islamic-civil')); // "Islamic Civil Calendar"
console.log(displayNames.of('islamic-tbla')); // "Islamic Tabular Calendar"

利用可能なすべてのカレンダーシステムを取得する

JavaScriptは17種類のカレンダーシステムを提供しています。Intl.supportedValuesOf()を使用してプログラムで完全なリストを取得できます：

const calendars = Intl.supportedValuesOf('calendar');
console.log(calendars);

これにより、サポートされているすべてのカレンダーコードの配列が返されます：

[
  'buddhist',
  'chinese',
  'coptic',
  'dangi',
  'ethioaa',
  'ethiopic',
  'gregory',
  'hebrew',
  'indian',
  'islamic',
  'islamic-umalqura',
  'islamic-tbla',
  'islamic-civil',
  'islamic-rgsa',
  'iso8601',
  'japanese',
  'persian',
  'roc'
]

この配列を反復処理して、すべてのカレンダー名を表示できます：

const calendars = Intl.supportedValuesOf('calendar');
const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

calendars.forEach(calendar => {
  console.log(`${calendar}: ${displayNames.of(calendar)}`);
});

出力結果：

buddhist: Buddhist Calendar
chinese: Chinese Calendar
coptic: Coptic Calendar
dangi: Dangi Calendar
ethioaa: Ethiopic Amete Alem Calendar
ethiopic: Ethiopic Calendar
gregory: Gregorian Calendar
hebrew: Hebrew Calendar
indian: Indian National Calendar
islamic: Islamic Calendar
islamic-umalqura: Umm al-Qura Calendar
islamic-tbla: Islamic Tabular Calendar
islamic-civil: Islamic Civil Calendar
islamic-rgsa: Islamic Calendar (Saudi Arabia)
iso8601: ISO-8601 Calendar
japanese: Japanese Calendar
persian: Persian Calendar
roc: Minguo Calendar

異なる言語でカレンダー名をローカライズする

カレンダー名は、localeパラメータで指定した言語で表示されます。これにより、ユーザーが希望する言語でカレンダー名を表示できます。

アラビア語でカレンダー名を表示する：

const displayNames = new Intl.DisplayNames('ar', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "التقويم الميلادي"
console.log(displayNames.of('hebrew')); // "التقويم العبري"
console.log(displayNames.of('islamic')); // "التقويم الهجري"

フランス語でカレンダー名を表示する：

const displayNames = new Intl.DisplayNames('fr', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "calendrier grégorien"
console.log(displayNames.of('hebrew')); // "calendrier hébraïque"
console.log(displayNames.of('islamic')); // "calendrier musulman"

ヘブライ語でカレンダー名を表示する：

const displayNames = new Intl.DisplayNames('he', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "לוח השנה הגרגוריאני"
console.log(displayNames.of('hebrew')); // "לוח השנה העברי"
console.log(displayNames.of('islamic')); // "לוח השנה ההיג'רי"

中国語でカレンダー名を表示する：

const displayNames = new Intl.DisplayNames('zh', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "公历"
console.log(displayNames.of('hebrew')); // "希伯来历"
console.log(displayNames.of('islamic')); // "伊斯兰历"

ブラウザはすべての翻訳を自動的に処理します。翻訳ファイルや手動での文字列管理は必要ありません。

カレンダー選択ドロップダウンを構築する

ユーザーがカレンダーシステムを選択できるドロップダウンメニューを作成する方法は次のとおりです：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar Selector</title>
</head>
<body>
  <label for="calendar-select">カレンダーを選択：</label>
  <select id="calendar-select"></select>

  <script>
    const userLocale = navigator.language || 'en';
    const displayNames = new Intl.DisplayNames(userLocale, { type: 'calendar' });
    const calendars = Intl.supportedValuesOf('calendar');
    const selectElement = document.getElementById('calendar-select');

    calendars.forEach(calendar => {
      const option = document.createElement('option');
      option.value = calendar;
      option.textContent = displayNames.of(calendar);
      selectElement.appendChild(option);
    });

    selectElement.addEventListener('change', (event) => {
      console.log('Selected calendar:', event.target.value);
    });
  </script>
</body>
</html>

このコードは以下の処理を行います：

navigator.languageでユーザーのブラウザロケールを取得
ユーザーのロケールでDisplayNamesオブジェクトを作成
利用可能なすべてのカレンダーコードを取得
各カレンダーに対してオプション要素を作成
オプションテキストをローカライズされたカレンダー名に設定
カレンダー選択を処理するイベントリスナーを追加

ドロップダウンは自動的にユーザーの言語でカレンダー名を表示します。アラビア語ブラウザのユーザーにはアラビア語のカレンダー名が表示されます。フランス語ブラウザのユーザーにはフランス語のカレンダー名が表示されます。

カレンダー名表示を使用するタイミング

以下の状況でカレンダー名を表示します：

ユーザーが希望するカレンダーシステムを選択する設定ページ
複数のカレンダーシステムをサポートする日付選択コンポーネント
ユーザーが使用するカレンダーを指定するイベント作成フォーム
カレンダー設定が保存されるユーザープロフィールページ
異なるカレンダーシステム間で動作するスケジューリングアプリケーション
特定のカレンダーを参照する宗教的または文化的アプリケーション

カレンダー名の表示により、非グレゴリオ暦システムを使用するユーザーにとってアプリケーションがアクセスしやすくなります。日付やイベントにどのカレンダーシステムが使用されているかについての曖昧さを解消します。

type: 'calendar'を指定したIntl.DisplayNames APIを使用すると、翻訳ファイルやカレンダーシステムのメタデータを管理することなく、ローカライズされたカレンダー名にすぐにアクセスできます。