# General Translation Knowledge Base: JSX の外にある文字列はどのように翻訳しますか？
URL: https://generaltranslation.com/ja/kb/translate-strings-outside-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: プレースホルダーやモジュールスコープの定数など、JSX の子要素ではない文字列は、それぞれレンダリングされる場所で翻訳関数に渡します。General Translation の useGT フックはこの翻訳関数を返します。また、msg と useMessages を組み合わせれば、コンポーネントの外で定義された定数も翻訳できます。
Category: 国際化
Last updated: 2026-10-21
Authors: Kevin Liu, Kevin Wu
Published: 2026-10-21
JSX の外にある文字列とは、JSX の子要素ではないため翻訳コンポーネントでラップできないテキストのことです。`placeholder` や `aria-label` などの属性値、コード内で組み立てる文字列、モジュールスコープで定義した定数などがこれにあたります。これらはいずれもフックから取得した翻訳関数 (`react-i18next` の `useTranslation` など) に通す必要がありますが、フックはコンポーネント内でしか実行できません。モジュールスコープの定数はファイルの読み込み時に一度だけ評価されるため、そこで翻訳すると、その時点で有効だった言語に固定されてしまいます (サーバー上では、全ユーザーに同じ言語が表示されます) 。そのため、定数には参照だけを持たせ、文字列はレンダリングされる場所で翻訳します。
## Video
The video is narrated in English, with English captions.
[How do I translate strings outside JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-strings-outside-jsx.mp4) (49 秒)
General Translation translates placeholders with `useGT` and constants with `msg` and `useMessages`. Call `useGT` and pass the placeholder to the function it returns, await `getGT` in async components, register each constant string with `msg` and resolve it with `useMessages`, then run `npx gt translate`.
## JSX の外で文字列を翻訳する方法
| アプローチ | 得意なこと | コード上での扱い | 開発者に任される作業 |
| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| [`i18next`](/kb/general-translation-vs-i18next) (`react-i18next`) または `next-intl` | 任意の文字列に使える翻訳関数を備えた成熟したランタイム | [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) または [`useTranslations`](https://next-intl.dev/docs/environments/server-client-components) から取得した [`t`](https://www.i18next.com/overview/api#t) がキーを受け取る。定数にはキーを格納し、レンダリング時に翻訳される | 文字列ごとにキーを考え、言語ごとにファイルを1つずつ作成し、文言が変わるたびにすべてのファイルを同期させること |
| [`react-intl`](/kb/general-translation-vs-react-intl) | メッセージ記述子に ID、デフォルトメッセージ、翻訳者向けの説明を含められる | `defineMessages` で定数内に記述子を宣言し、[`useIntl`](https://formatjs.github.io/docs/react-intl/api#useintl-hook) から取得した [`formatMessage`](https://formatjs.github.io/docs/react-intl/api#formatmessage) がレンダリング時にそれを翻訳する | メッセージごとの ID の付与、言語ごとのファイルへのメッセージ抽出、すべての翻訳の作成 |
| [Lingui](/kb/general-translation-vs-lingui) | 原文そのものがメッセージになるため、キーを考える必要がない | [`msg`](https://lingui.dev/ref/macro#definemessage) マクロで定数内にメッセージを定義し、[`useLingui`](https://lingui.dev/ref/react) から取得した `_` がレンダリング時に翻訳する | `lingui extract` と `lingui compile` の実行、および各カタログの翻訳 |
| General Translation (`gt-react` と `gt-next`) | [`npx gt translate`](/docs/cli/reference/commands/translate) がコード内の各文字列を検出し、本番環境のビルド前に翻訳する | [`useGT`](/docs/react/reference/hooks/use-gt) は、翻訳元文字列を渡して呼び出す関数を返す(キー不要)。[`msg`](/docs/react/reference/functions/msg) で定数内の各文字列を登録し、[`useMessages`](/docs/react/reference/hooks/use-messages) がレンダリング時に翻訳する | CLI が検出できるよう各文字列をリテラルで渡すこと、文言が変わったら [`npx gt translate`](/docs/cli/reference/commands/translate) を再実行すること |
アプリにすでにキーファイルがあり、翻訳者がそれを随時更新している場合は、`i18next` または `next-intl` を使用してください。翻訳者が抽出されたカタログをもとに作業し、各メッセージに説明や原文が必要な場合は、`react-intl` または Lingui が適しています。文字列が複数のコンポーネントや共有定数に散らばっていて、リリースのたびに変わる場合は、General Translation を使用してください。なお、定数を使っているコンポーネントが1つだけなら、その定数をコンポーネント内に移動するだけで済みます。各値が通常の翻訳呼び出しになるためです。
## General Translation で JSX 外の文字列を翻訳する
General Translation の `gt-react` と `gt-next` では、コンポーネント内の文字列は [`useGT`](/docs/react/reference/hooks/use-gt) フックで、定数は [`msg`](/docs/react/reference/functions/msg) と [`useMessages`](/docs/react/reference/hooks/use-messages) で翻訳します。
1. コンポーネント内の文字列には、`const gt = useGT()` を呼び出します。戻り値は翻訳関数そのものなので、変数を名前付きプレースホルダーとして含む文字列リテラルを渡します：`gt('Welcome back, {name}!', { name: user.name })`。曖昧な単語を意図どおりの意味で翻訳させるには、`$context` を追加します。
2. 定数の場合は、各文字列を [`msg`](/docs/react/reference/functions/msg) で登録し、レンダリングする箇所で [`useMessages`](/docs/react/reference/hooks/use-messages) を使って解決します：
```tsx
import { msg, useMessages } from 'gt-react';
const STATUS = { active: msg('Active'), paused: msg('Paused') };
function Badge({ status }: { status: 'active' | 'paused' }) {
const m = useMessages();
return {m(STATUS[status])};
}
```
3. 本番環境向けのビルドの前に [`npx gt translate`](/docs/cli/reference/commands/translate) を実行します。
## サーバーコンポーネントとモジュールスコープ
Next.js App Router の非同期コンポーネントではフックを呼び出せないため、`gt-next/server` から [`getGT`](/docs/react/nextjs/reference/functions/get-gt) と [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) を await して使用します。[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) でセットアップした client-side の `gt-react` アプリでは、[`t`](/docs/react/reference/functions/t-function) 関数をモジュールスコープでも使って翻訳できますが、言語を切り替えるにはページ全体の再読み込みが必要です。フレームワークごとの詳しい手順は、[文字列の翻訳](/docs/react/guides/translating-strings)ガイドを参照してください。
## Related questions
- [JSX の条件付きテキストはどのように翻訳すればよいですか？](https://generaltranslation.com/ja/kb/translate-conditional-jsx.mdx): 文を分割せずに、すべてのバージョンを翻訳します。三項演算子を使うと文が断片に分かれ、断片は意味を失ううえ、各言語の語順に沿った位置にも置けなくなります。General Translation では `` の中で `` を使い、文をひとつの単位として翻訳します。
- [ロケールごとに数値、日付、通貨を書式設定するにはどうすればよいですか？](https://generaltranslation.com/ja/kb/format-numbers-dates-currencies.mdx): 各値はページのレンダリング時に、読者のロケールと JavaScript の Intl API を使って書式設定し、翻訳対象の文章からは切り離します。General Translation の ``、``、``、`` コンポーネントは `` の中でこの両方を行うため、1 つの翻訳ですべての値に対応できます。
- [React アプリを翻訳するには？](https://generaltranslation.com/ja/kb/translate-react-app.mdx): React アプリを翻訳するには、まずコンポーネントを国際化してユーザーの言語でレンダリングできるようにし、次にすべての文字列をサポート対象の各言語に翻訳します。General Translation の gt-react は `` コンポーネント内の JSX をインプレースで翻訳し、npx gt translate は言語ごとに 1 つのファイルを書き出します。
- [翻訳ファイルなしでi18nは実現できますか？](https://generaltranslation.com/ja/kb/i18n-without-translation-files.mdx): はい。General Translationの gt-react と gt-next ライブラリを使えば、翻訳キーも、言語ごとに管理するJSONファイルもなしで、ReactとNext.jsのi18nを実現できます。文言は `` コンポーネント内のJSXにインラインで記述したままで、gt translate コマンドがコードから得た文脈をもとに、ビルド時に各言語の翻訳を生成します。さらにLocadexを使えば、プルリクエストを通じて翻訳を常に最新の状態に保てます。
## Previous and next questions
- Previous question: [Google Slides を翻訳するには？](https://generaltranslation.com/ja/kb/translate-google-slides.mdx)
- Next question: [Locadex エージェントは何をするのか？](https://generaltranslation.com/ja/kb/what-is-locadex.mdx)
## Sitemap
See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.