【ITニュース解説】Intl CSS & JS: the comedy of pain

ウェブサイトやアプリケーションを世界中のユーザーが利用できるようにすることは、現代のソフトウェア開発において非常に重要だ。これを国際化（Internationalization、略してIntlまたはi18n）と呼ぶ。しかし、ただ単にサイトの言語を切り替えるだけでは不十分で、各地域の文化や慣習に合わせた表示にするためには、より深い対応が必要となる。もしこの国際化を怠ると、ユーザーは不便を感じ、最悪の場合、サービス利用を諦めてしまうことにもなりかねない。ここでは、国際化において直面しやすい問題と、それらを解決するためのCSSとJavaScriptの重要な機能について解説する。

まず、CSSにおける国際化の対応について説明する。 CSSのプロパティには、margin-leftやpadding-rightのように、物理的な方向を指定するものがある。しかし、アラビア語のように右から左へ記述する言語（RTL言語）の場合、これらのプロパティを使うと意図しないレイアウトになってしまう。この問題を解決するのが「論理プロパティ」だ。例えば、margin-leftやmargin-rightの代わりにmargin-inlineを使うことで、要素の開始側（左から右の言語では左、右から左の言語では右）と終了側の余白を自動的に調整できる。同様に、padding-leftやpadding-rightの代わりにpadding-inlineを使用することで、コンテンツの左右のパディングを適切な方向に適用できる。これにより、どの言語の表示モードでも一貫したレイアウトを保つことが可能になる。

次に、テキストの書字方向に関する対応がある。日本語のように縦書きの表示をサポートする場合、writing-mode: vertical-rl;のようなCSSプロパティを使用する。安易にtransform: rotate(90deg)で要素を回転させると、テキストの読み順やレイアウトが崩れる原因となるため、正しいプロパティを使うことが重要だ。また、:dir()セレクタは、HTML要素のdir属性（書字方向を指定する属性）の値に応じてスタイルを適用できる。例えば、:dir(rtl)を指定することで、右から左へ記述する要素に対してのみ特定のスタイルを適用し、表示の調整を行うことが可能だ。

テキストの改行や表記に関する調整も国際化には不可欠だ。アジア言語には単語間のスペースがないため、line-breakプロパティを使ってテキストの折り返しルールを適切に指定しないと、レイアウトが崩れてしまうことがある。ドイツ語のように長い単語が多い言語では、hyphens: auto;を設定することで、単語を適切な位置で分割して改行し、レイアウトをきれいに保てる。text-transformプロパティでテキストを大文字や小文字に変換する際も注意が必要だ。トルコ語の「I」と「İ」のように、言語によっては大文字・小文字の変換ルールが異なる場合があるため、言語固有のルールを尊重する必要がある。さらに、東アジア言語の文字の表示を調整するためにfont-variant-east-asianプロパティが利用できる。例えば、ルビ（ふりがな）を適切に表示するためにruby値を指定することがある。複数の書字方向のテキスト（例えばヘブライ語と英語）が混在する場合、unicode-bidi: plaintext;プロパティは、テキストの表示順序を正しく修正するのに役立つ。箇条書きのリストについても、list-styleプロパティを使ってarabic-indicのような文化固有の表示形式に変更することが可能だ。

続いて、JavaScriptの国際化API（Intl API）の機能について解説する。 数値の表示は地域によって大きく異なる。例えば、ドイツでは小数点にコンマを、桁区切りにピリオドを使用する。これに対して、手動で文字列の置換を行う方法は、予期せぬエラーや不正確な表示につながりやすい。Intl.NumberFormatは、指定したロケール（地域と言語）に合わせて数値を自動的にフォーマットする機能を提供する。これにより、各地域のユーザーが慣れ親しんだ形式で数値を表示できる。

日付と時刻の表示も国際化において非常に複雑な要素だ。同じ日付でも、アメリカでは「月/日/年」、日本では「年/月/日」というように順序が異なり、曜日の表示形式も様々だ。Intl.DateTimeFormatは、ロケールに応じた日付と時刻の書式設定を可能にする。例えば、日本語のロケールを指定すれば「2025年8月12日火曜日」のように、正しい形式で日付が表示される。これにより、ユーザーが日付の誤解により混乱することを防げる。

多言語対応では、単数形と複数形の扱いの違いも考慮しなければならない。英語では「1 item」「2 items」のようにシンプルだが、ロシア語のように数値によって複数形のルールが異なる言語もある。Intl.PluralRulesは、指定された数値に対して、そのロケールにおける適切な複数形のカテゴリ（単数、複数、少、多など）を判断する機能を提供する。これにより、「1 items」のような不自然な表現を避け、自然な多言語表現を実現できる。

言語名や通貨名などをユーザーにわかりやすく表示することも国際化の一部だ。例えば、言語コード「fr」を「French」ではなく「français」と表示したい場合がある。Intl.DisplayNamesは、言語コードや通貨コード、地域コードなどを、指定したロケールに合わせて表示名に変換する機能を提供する。これにより、ユーザーはより直感的に情報を受け取れるようになる。

相対的な時間表現も、ロケールによって異なる。例えば、「1日前」という表現は「昨日」と表現されることもある。Intl.RelativeTimeFormatは、「昨日」や「2日後」のように、現在からの相対的な時間をロケールに合わせた自然な表現でフォーマットする。

最後に、文字列の並べ替え（ソート）も国際化で重要な要素だ。例えば、ドイツ語のアルファベット順では、「ä」と「z」の並び順が英語のソートルールとは異なる場合がある。通常の文字列比較関数では、これらの言語固有のソートルールに対応できないことが多い。Intl.Collatorは、指定したロケールのルールに基づいて文字列を比較・ソートする機能を提供する。これにより、多言語環境においても正確なアルファベット順での表示が可能となる。

このように、ウェブサイトやアプリケーションを国際化するためには、単なる翻訳以上の細やかな配慮が必要だ。CSSの論理プロパティや書字方向の指定、テキスト処理の調整、そしてJavaScriptのIntl APIを活用することで、世界中のユーザーが快適に利用できる高品質なサービスを提供できるようになる。これらの国際化機能は、現代のソフトウェア開発において「高度な機能」というよりも、「必須の生存ツール」と位置づけられるものだ。適切に対応することで、ユーザーの満足度を高め、グローバルな展開を成功させるための強力な基盤を築くことができる。