# General Translation React SDKs (gt-react, gt-next, gt-react-native): React SPA の国際化
URL: https://generaltranslation.com/ja/docs/react/guides/spa/internationalizing-react-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 設定済みの React SPA で JSX と文字列を翻訳対象としてマークする方法。

アプリケーションのエントリポイントより前に SPA イニシャライザが実行されるため、コンポーネントと
モジュールレベルの文字列では、すぐにアクティブなロケールを使用できます。このページでは、
この起動モデルに固有の実装ルールを説明します。

## JSX を翻訳する [#jsx]

翻訳可能な JSX のブロック全体を
[`<T>` コンポーネント](/docs/react/reference/components/t) でラップします。各ブロック内の構造は
静的に保ち、[`<T>`](/docs/react/reference/components/t) を別の [`<T>`] の中に
ネストしないでください:

```tsx title="src/components/Welcome.tsx"
import { T, Var } from 'gt-react';

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return (
    <T>
      <h1>
        Welcome, <Var>{name}</Var>!
      </h1>
      <p>Your workspace is ready.</p>
    </T>
  );
}
```

書式設定されていない動的な値には、[`<Var>`](/docs/react/reference/components/var) を使用します。値をロケールに応じて
フォーマットする必要がある場合は、[`<Currency>`](/docs/react/reference/components/currency)、
[`<DateTime>`](/docs/react/reference/components/datetime)、および
[`<Num>`](/docs/react/reference/components/num) を使用します。

条件付きコンテンツにも、安定した翻訳構造が必要です。名前付きの選択肢には
[`<Branch>`](/docs/react/reference/components/branch) を使用し、数に応じて変化するテキストには
[`<Plural>`](/docs/react/reference/components/plural) を使用します。条件によって単語だけでなく
文法も変わる場合は、各分岐に完全な文を含めてください。

完全なパターンについては、[JSX の翻訳](/docs/react/guides/translating-jsx)、
[変数のフォーマット](/docs/react/guides/formatting-variables)、および
[複数形と分岐の処理](/docs/react/guides/handling-plurals-and-branches)
で紹介しています。

## 文字列を翻訳する [#strings]

初期化済みの SPA では、文字列には [`t()`](/docs/react/reference/functions/t-function)
を使用します。bootstrap はアプリケーションをインポートする前に翻訳が完了するのを待つため、
[`t()`](/docs/react/reference/functions/t-function) は
モジュールスコープでも使用できます:

```ts title="src/navigation.ts"
import { t } from 'gt-react';

export const navigation = [
  { label: t('Home'), href: '/' },
  { label: t('About'), href: '/about' },
];
```

ソースメッセージは静的である必要があります。動的な値は ICU
構文を使用して別途渡します：

```ts
import { t } from 'gt-react';

const greeting = t('Hello, {name}!', { name: 'Ada' });
const attendees = t(
  '{count, plural, one {One person is here} other {# people are here}}',
  { count: 3 }
);
```

SPA のロケールセレクターは、ロケールの変更後にアプリケーションを再読み込みするため、
モジュールレベルでの翻訳は新しいロケールで再評価されます。コンテキストと
共有メッセージのパターンについては、
[文字列の翻訳](/docs/react/guides/translating-strings)を参照してください。

## ロケール選択を追加 [#locale-selector]

ユーザーが言語を選択する場所に、[`<LocaleSelector>` コンポーネント](/docs/react/reference/components/locale-selector)
を追加します。

```tsx title="src/components/LanguageMenu.tsx"
import { LocaleSelector } from 'gt-react';

export default function LanguageMenu() {
  return <LocaleSelector />;
}
```

イニシャライザに設定されているロケールを読み込み、選択内容を保存した後、
SPA を再読み込みして、モジュールレベルでの翻訳に新しいロケールを適用します。

## 実装を検証する [#validate]

コンテンツにマークを付けた後、翻訳構文を確認します。

```bash
npx gt validate
```

次に、アプリケーションで既存の型チェックと本番ビルドを実行します。翻訳を生成する前に、
翻訳構文エラー、ロケールファイルの欠落、バンドラーのインポートエラーを修正してください。

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.