メインコンテンツまでスキップ

`Intl.DisplayNames`

· 約5分
Shu-yu Guo ([@_shu](https://twitter.com/_shu)) と Frank Yung-Fong Tang

全世界のユーザーに届くWebアプリケーションは、多くの異なる言語で言語名、地域名、スクリプト名、通貨名を表示する必要があります。それらの名称の翻訳にはデータが必要であり、そのデータはUnicode CLDRで利用可能です。これらのデータをアプリケーションの一部としてパッケージングすることは開発者の時間を費やすことにつながります。ユーザーは言語名や地域名の翻訳において一貫性を好む傾向があり、世界の地政学的動向に合わせてそのデータを更新するには、絶え間ないメンテナンスが必要です。

幸いなことに、ほとんどのJavaScriptランタイムは既にその翻訳データを提供し、最新状態を維持しています。新しいIntl.DisplayNames APIはJavaScript開発者がその翻訳に直接アクセスできるようにし、ローカライズされた名前を簡単に表示することができます。

使用例

ISO-3166 2文字の国コードを使用して英語で地域名を取得するためにIntl.DisplayNamesオブジェクトを作成する例を以下に示します。

const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
regionNames.of('US');
// → 'United States'
regionNames.of('BA');
// → 'Bosnia & Herzegovina'
regionNames.of('MM');
// → 'Myanmar (Burma)'

Unicodeの言語識別子構文を使用して、繁体字中国語で言語名を取得する例を以下に示します。

const languageNames = new Intl.DisplayNames(['zh-Hant'], { type: 'language' });
languageNames.of('fr');
// → '法文'
languageNames.of('zh');
// → '中文'
languageNames.of('de');
// → '德文'

ISO-4217 3文字の通貨コードを使用して簡体字中国語で通貨名を取得する例を以下に示します。一部の言語では単数形と複数形の形式が異なる場合がありますが、通貨名は単数形で表示されます。複数形の場合、Intl.NumberFormatを使用できます。

const currencyNames = new Intl.DisplayNames(['zh-Hans'], {type: 'currency'});
currencyNames.of('USD');
// → '美元'
currencyNames.of('EUR');
// → '欧元'
currencyNames.of('JPY');
// → '日元'
currencyNames.of('CNY');
// → '人民币'

ISO-15924 4文字のスクリプトコードを使用して英語でスクリプト名を取得する最終的なサポートされているタイプの例を以下に示します。

const scriptNames = new Intl.DisplayNames(['en'], { type: 'script' });
scriptNames.of('Latn');
// → 'Latin'
scriptNames.of('Arab');
// → 'Arabic'
scriptNames.of('Kana');
// → 'Katakana'

より高度な使用例として、第2引数のoptionsパラメータにはstyleプロパティもサポートされています。styleプロパティは表示名の幅に対応しており、"long""short"、または"narrow"のいずれかを指定できます。異なるスタイルの値が常に異なるわけではありません。デフォルトは"long"です。

const longLanguageNames = new Intl.DisplayNames(['en'], { type: 'language' });
longLanguageNames.of('en-US');
// → 'American English'
const shortLanguageNames = new Intl.DisplayNames(['en'], { type: 'language', style: 'short' });
shortLanguageNames.of('en-US');
// → 'US English'
const narrowLanguageNames = new Intl.DisplayNames(['en'], { type: 'language', style: 'narrow' });
narrowLanguageNames.of('en-US');
// → 'US English'

完全なAPI

Intl.DisplayNamesの完全なAPIは以下の通りです。

Intl.DisplayNames(locales, options)
Intl.DisplayNames.prototype.of( code )

コンストラクタは他のIntl APIと一貫性があります。第1引数はロケールのリストであり、第2引数はlocaleMatchertypestyleプロパティを受け入れるoptionsパラメータです。

"localeMatcher"プロパティは他のIntl APIと同様に扱われます。typeプロパティは"region""language""currency"または"script"を指定できます。styleプロパティは"long""short"または"narrow"を指定でき、デフォルトは"long"です。

Intl.DisplayNames.prototype.of( code )ではインスタンスのtypeに応じて以下の形式が期待されます。

結論

他のIntl APIと同様に、Intl.DisplayNamesが広く利用可能になると、ライブラリやアプリケーションは独自の翻訳データをパッケージングして配布する代わりに、ネイティブ機能を利用することを選ぶようになります。

Intl.DisplayNamesのサポート