では「Intl API を使って多言語フォーマット対応」を見てみましょう。
これを使うと、金額や日付の表記を自動で言語・地域に合わせて整えてくれるので、実務でとても役立ちます。
Intl.NumberFormat で金額をフォーマット
// 日本円（日本語）
const yenJa = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
console.log(yenJa.format(1234567));
// => "￥1,234,567"
// 日本円（英語）
const yenEn = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'JPY' });
console.log(yenEn.format(1234567));
// => "¥1,234,567"
👉 同じ数値でも、言語設定によって「￥」や「¥」の位置や区切り方が変わります。
Intl.DateTimeFormat で日付をフォーマット
const date = new Date('2025-10-26T18:47:00');
// 日本語
const dateJa = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full', timeStyle: 'short' });
console.log(dateJa.format(date));
// => "2025年10月26日日曜日 18:47"
// 英語（アメリカ）
const dateEn = new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short' });
console.log(dateEn.format(date));
// => "Sunday, October 26, 2025 at 6:47 PM"
👉 曜日や月の表記も自動で切り替わります。
カート概要に組み込む
function cartSummaryIntl(cart, lang = 'ja', taxRate = 0.1) {
const validItems = cart.filter(item => item.quantity > 0);
const subtotal = validItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
const totalWithTax = Math.floor(subtotal * (1 + taxRate));
const itemCount = validItems.reduce((acc, item) => acc + item.quantity, 0);
// 通貨フォーマッタ
const currencyFormatter = new Intl.NumberFormat(lang === 'ja' ? 'ja-JP' : 'en-US', {
style: 'currency',
currency: 'JPY'
});
if (lang === 'ja') {
return `カート: ${itemCount}点 / 合計: ${currencyFormatter.format(subtotal)} (税込 ${currencyFormatter.format(totalWithTax)})`;
} else {
return `Cart: ${itemCount} items / Subtotal: ${currencyFormatter.format(subtotal)} (Tax incl. ${currencyFormatter.format(totalWithTax)})`;
}
}
// 実行
const cart = [
{ name: 'Tシャツ', price: 1500, quantity: 2 },
{ name: 'ジーンズ', price: 5000, quantity: 1 },
{ name: '帽子', price: 2000, quantity: 1 }
];
console.log(cartSummaryIntl(cart, 'ja'));
// "カート: 4点 / 合計: ￥10,000 (税込 ￥11,000)"
console.log(cartSummaryIntl(cart, 'en'));
// "Cart: 4 items / Subtotal: ¥10,000 (Tax incl. ¥11,000)"
まとめ
- Intl.NumberFormat → 通貨や数値を言語ごとにフォーマット
- Intl.DateTimeFormat → 日付や時刻を言語ごとにフォーマット
- カート概要に組み込むと国際対応が一気に楽になる
💡 さらに発展させると、Intl.RelativeTimeFormat を使って「3日前」「in 2 days」など相対的な時間表現もできます。
