こんにちはhiro08です。

仕事で国際化対応することが多々あり、国際化に向けた実装について考える機会が多くあります。Webアプリケーションの国際化は、単に多言語化するだけではありません。例えば、日時や通貨のフォーマットは各国でそれぞれ違いますし、言語によってUIが大きく変わるケースもあります。

すぐに試せる例として、Twitterの言語設定をアラビア語に変更してください。アラビア語は右から左に文字を読むため、TwitterのUIもそれに応じて変わっています。

このように、国際化はその国や土地に合わせたデザイン (設計) をすることで適切にサービス提供する必要があります。

Intl APIについて

下記はMDNからの引用です。

Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。

各国に対応したフォーマットの実装は非常に難しいと感じます。ですが、Intl APIを使うことで各国に合わせたフォーマットに変換してくれます。下記は一例です。特に、ライブラリを使わず円表記に変換することができました。

const en = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(123456789));
// ￥123,456,789

Intl APIはMDNで詳しく取り上げられています。

developer.mozilla.org

主なAPIの紹介

ここでは、実際に実践で使えそうなAPIを紹介していきます。

DateTimeFormat()

日時をフォーマットする場合は、Moment.jsやDay.jsを使うことが多いと思います。日時は国際化において優先して考慮すべき事項でしょう。Intl APIではDateTimeFomrt()としてサポートされています。引数にロケールの識別子を指定します。

const date = new Date();
const format = new Intl.DateTimeFormat('en-US').format(date);
// 6/10/2022

NumberFormat()

次に紹介するのが、数値のフォーマットです。下記例では、1~9が羅列した文字列をカンマ区切りでフォーマットしてくれます。また、currencyとして通貨のフォーマットに変換してくれるオプションもあります。

const number = 123456789
const formatNumber = new Intl.NumberFormat("en-Us").format(number);
// 123,456,789
const formatDollar = new Intl.NumberFormat('en-Us', { style: 'currency', currency: 'USD' }).format(number);
// $123,456,789.00

DisplayNames()

各国の表示名をフォーマットしてくれます。例えば、DisplayNames()にjaロケールを渡します。そして、初期化したregionの値はof()として、USを渡すとアメリカ合衆国に翻訳されました。

const region = new Intl.DisplayNames(['ja'], { type: 'region' });
const region = region.of('US');
// アメリカ合衆国

その他にも

PluralRules() -> 単数・複数
Intl.Segmenter() -> テキスト区切り
RelativeTimeFormat() -> 相対時刻
Locale() -> 各国のロケール識別子の取得

などがあります。Intl APIをある程度抑えておくことで、国際化に向けた実装範囲が見えてきます。

最後に

今回はIntl APIについて調べたまとめでした。国際化に向けた実装は予想以上に難しいです。ある程度、標準APIに乗っかることで、外部のライブライに依存せず国際化の実装が完結するのは便利だなと感じます。現在、日本でも多くのサービスが海外に向けた動き出しをしています。今後、国際化対応はエンジニアとってマストになるかもしれません。

参考

Intl - JavaScript | MDN

ep.115 『言語だけじゃない！国際化対応の切り札 Intl API』 | UIT INSIDE - LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast