# General Translation Knowledge Base: ロケールごとに数値、日付、通貨を書式設定するにはどうすればよいですか？ URL: https://generaltranslation.com/ja/kb/format-numbers-dates-currencies.mdx Docs index: https://generaltranslation.com/llms.txt Description: 各値はページのレンダリング時に、読者のロケールと JavaScript の Intl API を使って書式設定し、翻訳対象の文章からは切り離します。General Translation の ``、``、``、`` コンポーネントは `` の中でこの両方を行うため、1 つの翻訳ですべての値に対応できます。 Category: ロケール別フォーマット Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 各値はレンダリング時に、読者のロケールと JavaScript の `Intl` API を使って書式設定します。`Intl` API は、ロケールごとの桁区切り、小数点記号、通貨記号の位置、日付の並び順を適用します。たとえば 12,450.75 ユーロは英語では €12,450.75、ドイツ語では 12.450,75 € となり、2026 年 8 月 4 日は米国英語では 8/4/2026、ドイツ語では 4.8.2026 となります。厄介なのは、値を含む文章のほうです。文章は事前に翻訳されますが、値はレンダリング時にしか確定しないため、各翻訳には値を差し込むためのスロットが必要です。さらに日付はタイムゾーンにも左右されるため、UTC のサーバーとロサンゼルスのブラウザでは、同じ時点でも異なる日付がレンダリングされることがあります。 ## Video The video is narrated in English, with English captions. [How do I format numbers, dates and currencies for each locale?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-format-numbers-dates-currencies.mp4) (45 秒) General Translation formats values for each locale with `Num`, `Currency` and `DateTime`. After `npx gt init`, `Num` groups digits and `Currency` formats an amount without converting it, `DateTime` formats dates and `RelativeTime` writes phrases such as three days ago, and `npx gt translate` writes the words around them in each language. ## ロケールごとに値を書式設定する方法 | アプローチ | 得意なこと | 自分で対応する必要があること | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------------------- | | JavaScript の `Intl` API のみ | 言語に組み込まれており、数値、通貨、日付、相対時間を各ロケールの慣習に従って書式設定できる | 値を含むすべての文を全言語で翻訳し、書式設定済みの値をそれぞれの文に組み込むこと | | 国際化 (i18n) ライブラリのフォーマッター ([`react-intl`](/kb/general-translation-vs-react-intl)、`next-intl`、[`i18next`](/kb/general-translation-vs-i18next)) | ICU メッセージの `{total, number, ::currency/EUR}` のように、翻訳済みの各メッセージ内で値を書式設定できる | 言語ごとに各メッセージをキー付きファイルに記述し、それらのファイルを常に最新の状態に保つこと | | 日付ライブラリ (`date-fns`、`Day.js`) | 言語ごとにインポートしたロケールデータを使い、日付の書式設定と計算を行える | 数値と通貨の扱い、各ロケールの読み込み、日付を含むすべての文の翻訳 | | General Translation ([``](/docs/react/reference/components/t) 内の [``](/docs/react/reference/components/num)、[``](/docs/react/reference/components/currency)、[``](/docs/react/reference/components/datetime)、[``](/docs/react/reference/components/relative-time)) | アクティブなロケールに合わせ、`Intl` で各値をローカルに書式設定する。周囲の文は値の差し込み位置を残したまま、言語ごとに一度だけ翻訳される | 各金額の通貨コードの選択と、サーバーでレンダリングされたページにおけるロケール、タイムゾーン、`baseDate` の固定 | 価格の列のように値が単独で表示される場合は、`Intl` だけで十分です。翻訳者がキー付きファイルでメッセージを管理している場合は i18n ライブラリのフォーマッターを、日付計算のためにすでに日付ライブラリを使っている場合はそのライブラリを使いましょう。複数の言語で提供され、リリースのたびに変わる文の中に値が含まれる場合は、General Translation のコンポーネントが適しています。 ## 翻訳文の中で値を書式設定する General Translation の `gt-next`、`gt-react`、および実験的な `gt-tanstack-start` と `gt-react-native` には、値の型ごとに専用のコンポーネントが用意されています。翻訳文の中に書式設定された値を含めるには、次の手順に従います。 1. 文を [``](/docs/react/reference/components/t) でラップします。 2. 各値を、その型に対応するコンポーネントでラップします。数値、パーセンテージ、単位には [``](/docs/react/reference/components/num)、ISO 4217 通貨の金額 (通貨換算は行いません) には [``](/docs/react/reference/components/currency)、日時には [``](/docs/react/reference/components/datetime)、「3 日前」のような表現には [``](/docs/react/reference/components/relative-time) を使用します。 ```tsx

Your total is {total}.

; ``` 3. [`npx gt translate`](/docs/cli/reference/commands/translate) を実行し、文を言語ごとに 1 回だけ翻訳します。 各コンポーネントは値を翻訳対象から除外し、General Translation API に送信せずに `Intl` を使ってローカルで書式設定します。 ## サーバーでレンダリングされたアプリと Vue サーバーでレンダリングされたアプリでハイドレーションエラーを防ぐには、[``](/docs/react/reference/components/datetime) ではロケールと `timeZone` オプションを、[``](/docs/react/reference/components/relative-time) ではロケールと共通の `baseDate` を固定してください。[Vue アプリ](/docs/vue/guides/formatting-variables)では、`gt-vue` が提供する [``](/docs/vue/reference/components/num)、[``](/docs/vue/reference/components/currency)、[``](/docs/vue/reference/components/datetime) を使用できます。詳しい手順は、[数値と日付のフォーマット](/docs/react/guides/formatting-variables)ガイドを参照してください。 ## Related questions - [React で複数形を扱うにはどうすればよいですか？](https://generaltranslation.com/ja/kb/how-to-handle-plurals-in-react.mdx): React で複数形を扱うには、各言語の複数形ごとに文を 1 つずつ用意し、その言語の複数形規則に従って選択します。英語の複数形は 2 種類ですが、ロシア語は 4 種類、アラビア語は 6 種類あるためです。gt-react と gt-next に含まれる General Translation の `` コンポーネントに翻訳元の形を渡せば、各対象言語に必要な形は General Translation が生成します。 - [JSX の外にある文字列はどのように翻訳しますか？](https://generaltranslation.com/ja/kb/translate-strings-outside-jsx.mdx): プレースホルダーやモジュールスコープの定数など、JSX の子要素ではない文字列は、それぞれレンダリングされる場所で翻訳関数に渡します。General Translation の useGT フックはこの翻訳関数を返します。また、msg と useMessages を組み合わせれば、コンポーネントの外で定義された定数も翻訳できます。 - [JSX の条件付きテキストはどのように翻訳すればよいですか？](https://generaltranslation.com/ja/kb/translate-conditional-jsx.mdx): 文を分割せずに、すべてのバージョンを翻訳します。三項演算子を使うと文が断片に分かれ、断片は意味を失ううえ、各言語の語順に沿った位置にも置けなくなります。General Translation では `` の中で `` を使い、文をひとつの単位として翻訳します。 - [React アプリを翻訳するには？](https://generaltranslation.com/ja/kb/translate-react-app.mdx): React アプリを翻訳するには、まずコンポーネントを国際化してユーザーの言語でレンダリングできるようにし、次にすべての文字列をサポート対象の各言語に翻訳します。General Translation の gt-react は `` コンポーネント内の JSX をインプレースで翻訳し、npx gt translate は言語ごとに 1 つのファイルを書き出します。 ## Previous and next questions - Previous question: [デプロイのたびに翻訳を最新の状態に保つにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translations-in-ci.mdx) - Next question: [翻訳をレビュー・編集するにはどうすればよいですか？](https://generaltranslation.com/ja/kb/review-translations.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.