【JS応用|豆知識】Intl.RelativeTimeFormat.resolvedOptions() でロケール設定を正確に把握する

1. 導入

Webアプリケーションで「3日前」「2時間後」といった相対的な日時を表示する際、ブラウザ標準のIntl.RelativeTimeFormatオブジェクトは非常に強力です。しかし、実際にブラウザがどのロケールやオプションを選択してフォーマットを実行しているか、確信を持てていますか? resolvedOptions()メソッドは、ブラウザが内部的に決定した実行時の設定を正確に取得するために重要です。設定の不一致による表示崩れや意図しない言語での表示を防ぎ、多言語対応のデバッグを容易にします。

2. 基礎知識

Intl.RelativeTimeFormatは、指定した言語(ロケール)に基づいて、相対時間を人間が読みやすい形式に変換する機能を提供します。インスタンスを生成する際、第2引数でロケールやスタイル(long, short, narrow)を指定できますが、システムがサポートしていないロケールを指定した場合、ブラウザはフォールバック(代替)として別の言語やデフォルト設定を自動選択します。この「実際に適用された設定」をプログラムから確認できるのがresolvedOptions()です。

3. 実装/解決策

resolvedOptions()は、インスタンス化したオブジェクトに対して呼び出します。戻り値は、locale、style、numericといったプロパティを持つオブジェクトです。これにより、意図した通りのロケールが適用されているか、あるいはブラウザが自動的にデフォルト値へ補完したのかをプログラム上で判定できます。

4. サンプルプログラム

5. 応用・注意点

現場での注意点として、「ブラウザの互換性」が挙げられます。古いブラウザや一部の環境では、設定の解釈が異なる場合があります。特に、サポートされていないロケールを指定した場合、resolvedOptions()を確認することで「どの言語にフォールバックされたか」を特定できます。

また、resolvedOptions()で得られる情報はあくまで読み取り専用です。動的にオプションを変更したい場合は、既存のインスタンスを修正するのではなく、新しいオプションでインスタンスを再生成するのがフロントエンド開発におけるベストプラクティスです。デバッグ時には、このメソッドをログ出力に含めるだけで、予期せぬ翻訳ミスの原因切り分けが劇的に早くなります。

タイトルとURLをコピーしました