Intl APIで構築するスマートな国際化設計：日付・数値・通貨・並び替えを地域別に美しく整えるJavaScript戦略


## 概要

JavaScriptには、**ロケールに応じた日付・数値・通貨などを表示するための強力な組み込みAPI**が存在する。  
それが `Intl`（Internationalization）だ。

- 日付を「YYYY/MM/DD」だけでなく、各国の文化に沿って表示したい
- 通貨を国別にフォーマットし、記号・小数点を正しく処理したい
- 数値の区切りや丸め、単位表現を制御したい
- 名前の並び順をロケールに応じて柔軟に変更したい

こういった要件に対して、`Intl`は**実装コストを抑えつつ高品質な表現**を可能にする。

---

## 対象環境

```text
ES2020 以降（Node.js / モダンブラウザ）
```

---

## Intl API 全体の構成

| API                         | 用途                     |
|----------------------------|--------------------------|
| `Intl.DateTimeFormat`      | 日時フォーマット        |
| `Intl.NumberFormat`        | 数値・通貨・単位の表現  |
| `Intl.Collator`            | 文字列の並び順比較      |
| `Intl.RelativeTimeFormat`  | 「1分前」「2日後」など  |
| `Intl.ListFormat`          | 配列の結合（A、B、およびC） |

---

## DateTimeFormat：日付を文化的に表現する

```js
const date = new Date('2024-03-30T12:00:00');

const formatted = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
}).format(date);

console.log(formatted); // 2024年3月30日土曜日
```

### ✅ 対応例

| ロケール     | 出力                            |
|--------------|---------------------------------|
| `'en-US'`    | March 30, 2024, Saturday        |
| `'fr-FR'`    | samedi 30 mars 2024             |
| `'zh-CN'`    | 2024年3月30日星期六             |

---

## NumberFormat：数値・通貨・単位の制御

### ✅ 数値フォーマット

```js
const nf = new Intl.NumberFormat('en-US');
nf.format(1234567.89); // "1,234,567.89"
```

### ✅ 通貨フォーマット

```js
const yen = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
console.log(yen.format(1200)); // "￥1,200"
```

### ✅ 単位付き数値

```js
const temp = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius'
});
console.log(temp.format(22)); // "22°C"
```

---

## RelativeTimeFormat：「〜前」「〜後」

```js
const rtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "昨日"
console.log(rtf.format(3, 'week')); // "3週間後"
```

---

## ListFormat：配列を自然言語で表現

```js
const lf = new Intl.ListFormat('ja', { type: 'conjunction' });
lf.format(['りんご', 'バナナ', 'みかん']); // "りんご、バナナ、およびみかん"
```

---

## Collator：文字列の並び順比較

```js
const names = ['たなか', 'サトウ', 'あべ'];

names.sort(new Intl.Collator('ja-JP').compare);
console.log(names); // ['あべ', 'サトウ', 'たなか']
```

→ ✅ アルファベット・ひらがな・カタカナの**ロケールごとの比較ロジック**を自動処理

---

## 設計判断フロー

| 目的                           | 使用すべきIntl API         |
|--------------------------------|-----------------------------|
| 日時表示                       | `Intl.DateTimeFormat`       |
| 金額・数値                     | `Intl.NumberFormat`         |
| 「1時間前」「3日後」など       | `Intl.RelativeTimeFormat`   |
| 名前や用語のソート             | `Intl.Collator`             |
| 配列の自然言語化               | `Intl.ListFormat`           |

---

## よくあるミスと注意点

### ❌ Intlは環境依存のため、一部ロケールに未対応な場合あり

→ ✅ `Intl.supportedLocalesOf()` で確認可能

```js
Intl.supportedLocalesOf(['fr-FR', 'de-DE', 'xx-YY']);
```

---

### ❌ 通貨や単位の記号は自動調整されるため、**自前で文字列を付け足さない**

---

## 結語

`Intl` は**“美しく正確な出力”を、わずかな構文で達成できる**構文的洗練の結晶である。

- 環境に依存しない統一フォーマット  
- グローバル対応の簡素化  
- UIの言語整合性の確保  
- 書き捨てではなく、**設計された表示**

国際化は、グローバルサービスだけの課題ではない。  
**“ユーザーに届く言葉で、誤解なく伝える”ことが設計の責任である。**

`Intl` を知ることは、**コードの言語的表現力を最大化するための第一歩**だ。