グレゴリオ暦、ヘブライ暦、イスラム暦などの暦名を表示する方法

はじめに

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

国際的なオーディエンスにサービスを提供するアプリケーションでは、ユーザーが希望する暦システムを選択できるようにする必要があります。日付ピッカー、設定インターフェース、スケジューリングツールは暦名を表示し、ユーザーがニーズに合ったシステムを選択できるようにします。「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); // "Gregorian Calendar"

英語で暦の名前を表示する

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

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">Choose a calendar:</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により、翻訳ファイルや暦システムのメタデータを管理することなく、ローカライズされたカレンダー名に即座にアクセスできます。