MDX におけるローカライズされたフォーマットと複数形

この例では、EdgeKits Core の Zero-JS i18n アーキテクチャを使った場合に、MDX の中で 補間・複数形ルール・実行時フォーマット がどのように機能するかを示します。

前回のデモはインタラクティブなコンポーネントにフォーカスしていましたが、今回は 動的なテキスト が、数値や UI の状態が変化しても、どのように Cloudflare KV から直接取得されるかを示します。

ローカライズされたテキスト付きの動的カウンター

下にはシンプルなカウンターを公開する React Island があります。 このコンポーネント自体には 英語の文字列は一切含まれていません。すべてのラベルは KV から取得されます。

• 単数形と複数形（1 item → 5 items）
• 補間された値（{count}）
• アクティブなロケールに基づくローカライズされた表現

英語とドイツ語を切り替えて、複数形の扱いが自動的に変わる様子を確認してみてください。

Counter demo

0

0 items

IncrementReset

これが重要な理由

従来のクライアントサイド i18n では、次のようなことが必要になります。

• JSON の辞書をブラウザに配信する
• フォーマッティングエンジンをバンドルに含める
• 複数形ルールを手動で配線する
• React 内でロケール状態を更新する

EdgeKits Core を使う場合:

1. Astro が Edge 上で正しい翻訳を読み込みます。
2. 複数形と補間のロジックは、ハイドレーション前に サーバー側 で実行されます。
3. React Island は 事前にフォーマットされた型安全なテキスト を受け取ります。
4. クライアント側の i18n ライブラリは不要で、配信されるのは 0 KB です。

実運用でのユースケース

このパターンが特に有効なのは、次のようなケースです。

• 価格や数量を扱う UI ウィジェット
• ローカライズされたラベルが必要なダッシュボード
• インタラクティブなデモを埋め込んだ MDX ドキュメント
• 動的なバリデーションメッセージを持つフォーム
• テキストが数値や状態に依存するあらゆるコンポーネント

翻訳は KV に保存されているため、コンテンツ制作者は、コンポーネントコードに触れることなく文言を管理できます。複雑な複数形ロジックや数値フォーマットを含む場合でも同様です。