多言語Webサイトを作る上での考慮点

今回は、HTML や JavaScript の仕様を知る意味でも、特定のライブラリを使用せずに国際化する方法を調べる。
MDN の国際化に関するページには、以下の 5 つの考慮点が挙げられている。

文字セット(通常はUnicode)
測定単位(通貨、°C/°F, km/マイル、など)
日時フォーマット
キーボードレイアウト
テキストの方向

文字セット(通常はUnicode)

W3C のあらゆる言語の文字セットを掲載しているページが存在するが、既にメンテナンスされていない。
また、可能な限り UTF-8 を使用することが推奨されている。

<meta charset="utf-8">

watsuyo_2

測定単位(通貨、°C/°F, km/マイル、など)

JavaScript の標準組み込みオブジェクトである Intl.NumberFormat コンストラクターを使うことで国際化対応できる。

第一引数には、ISO 639-1 コードを指定する。
style には何の単位なのかを単位を指定する。

通貨の例

currency には、 ISO 4217 通貨コードを指定する。

const price = 99.99

const formattedPriceDe = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(price)
console.log(formattedPriceDe) // 99,99 €

const formattedPriceJa = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(price)
console.log(formattedPriceJa) // ¥100

温度(摂氏/華氏) の例

const celsiusTemperature = 25
const fahrenheitTemperature = celsiusTemperature * 9 / 5 + 32

const celsiusFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'celsius' })
const fahrenheitFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'fahrenheit' })

const formattedCelsius = celsiusFormatter.format(celsiusTemperature)
const formattedFahrenheit = fahrenheitFormatter.format(fahrenheitTemperature)

console.log(formattedCelsius) // 25°C
console.log(formattedFahrenheit) // 77°F

距離（キロメートル/マイル）の例

const distanceInKilometers = 10
const distanceInMiles = distanceInKilometers * 0.62137119

const kilometerFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer' })
const mileFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'mile' })

const formattedKilometers = kilometerFormatter.format(distanceInKilometers)
const formattedMiles = mileFormatter.format(distanceInMiles)

console.log(formattedKilometers) // 10 km
console.log(formattedMiles) // 6.2137119 mi

watsuyo_2

日時フォーマット

日時フォーマットに関しても、JavaScript の標準組み込みオブジェクトを使用することで対応できる。
今回は、Intl.DateTimeFormat は使用する。

日付の例:

const date = new Date('2023-06-16')
const options = { year: 'numeric', month: 'long', day: 'numeric' }

const formatterJa = new Intl.DateTimeFormat('ja-JP', options)
const formattedDateJa = formatterJa.format(date)
console.log(formattedDateJa)
// 2023年6月16日

const formatter = new Intl.DateTimeFormat('en-US', options)
const formattedDate = formatter.format(date)
console.log(formattedDate)
// June 16, 2023

時刻の例:

const timeJa = new Date().toLocaleTimeString('ja-JP')
const timeEn = new Date().toLocaleTimeString('en-US')

console.log(timeJa)
// 13:24:24

console.log(timeEn)
// 1:24:24 PM

watsuyo_2

キーボードレイアウト

HTML 要素の lang 属性を使用し、ブラウザにページの言語を認識してもらう必要がある。
lang 属性には ISO 639-1 Language Codes を使用する。

<html lang="ja">

この設定によって、Google 翻訳などの機械翻訳をスムーズに行うことができる。
アクセシビリティの観点でも、スクリーンリーダーが適切な言語で読み上げるためにも大事な設定である。
SEO の観点では、Google は lang 属性を参考にしていないらしい。

watsuyo_2

テキストの方向

HTMLの dir 属性にテキストの方向を指定することができる。
dir 属性のデフォルトは、ltr (left to right) となっている。

右書きの言語（アラビア語など）に対しては、right to left を表す rtl を指定する。

<html lang="ar" dir="rtl">