JavaScriptの国際化（i18n）：Intl API によるブラウザネイティブの国際化
JavaScriptには、数値、日付、リストの書式設定や、ロケールに応じた複数形ルールの処理を行うための標準機能としてIntl APIが組み込まれています。外部ライブラリは不要です。このAPIはすべての最新ブラウザおよびNode.jsでサポートされており、ロケールに応じた文字列の比較、分割、相対的な時刻の書式設定を、追加の設定なしですぐに利用できます。
Add i18n to plain JavaScript in three steps
There is no JavaScript-specific package to install: @better-i18n/core is the plain-JavaScript client every other SDK here wraps.
Install the client
One dependency-free package. It runs in browsers, Node, Deno, Bun and Cloudflare Workers.
npm install @better-i18n/core
# Zero dependencies. Runs in browsers, Node, Deno,
# Bun and Cloudflare Workers.Create the client once
Instantiate at module scope so the 60-second in-memory cache is shared instead of rebuilt on every call.
import { createI18nCore } from '@better-i18n/core'
export const i18n = createI18nCore({
projectId: 'your-org/your-project', // Settings → General → Project ID
defaultLocale: 'en',
})Read a message
getMessages returns a plain nested object, so a four-line lookup helper is the whole runtime you need.
import { i18n } from './i18n.js'
const messages = await i18n.getMessages('en')
// getMessages resolves to { namespace: { key: value } }
const t = (path) =>
path.split('.').reduce((node, part) => node?.[part], messages) ?? path
document.querySelector('h1').textContent = t('home.title')
// Locales come from the project manifest, not a hardcoded array
const languages = await i18n.getLanguages()How it works
Where a JavaScript string comes from
No build step and no bundled locale files: the client resolves a locale at runtime and the edge answers it.
Read path — every locale load
Reads from the plain object getMessages() already returned.
0 network calls per render
getMessages(locale) — served from the in-memory cache if it is warm.
60s TTL · 0 deps
Cloudflare worker answers from the nearest edge cache.
max-age=60 · always 200
The published translation files the sync worker wrote.
source of truth
Fallback chain — tried in order when a hop fails
Write path — dashboard to app
Proposal reviewed in the dashboard, glossary enforced.
MCP · dashboard · CLI
Sync worker writes the locale files to R2.
better-i18n publish
Fire-and-forget purge of the affected keys and the manifest.
non-critical by design
The next getMessages() past the TTL returns the new copy.
~60s worst case
With the client, or with fetch
The client adds caching, retries and the fallback chain. If you would rather own that yourself, the CDN is a plain JSON endpoint.
import { i18n } from './i18n.js'
import { normalizeLocale } from '@better-i18n/core'
let current = 'en'
let messages = await i18n.getMessages(current)
export async function setLocale(next) {
// The CDN stores locales lowercased: pt-BR → pt-br
current = normalizeLocale(next)
messages = await i18n.getMessages(current)
document.documentElement.lang = current
render()
}JavaScript Intl APIの実践
組み込みのIntlコンストラクタを使用して、あらゆる最新ブラウザまたはNode.jsランタイムでロケール固有の出力として通貨・日付・序数をフォーマットします。
// Using the built-in Intl API
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
});
console.log(formatter.format(1234.56)); // "1.234,56 €"
// Date formatting
const date = new Intl.DateTimeFormat('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
console.log(date.format(new Date())); // "2026年3月2日"
// Pluralization
const plural = new Intl.PluralRules('en');
const suffixes = { one: 'st', two: 'nd', few: 'rd', other: 'th' };
function ordinal(n) {
return `${n}${suffixes[plural.select(n)]}`;
}JavaScript Intl APIの機能
関連ガイド
その他のフレームワークガイドを見る
Get started
今すぐJavaScriptの国際化を始めましょう
AIを活用したワークフロー、CLIによる同期、50ms未満のCDN配信でJavaScriptの翻訳を管理できます。