# General Translation React SDKs (gt-react, gt-next): 文字列の翻訳
URL: https://generaltranslation.com/ja/docs/react/guides/translating-strings.mdx
---

title: 文字列の翻訳
description: React、Next.js、TanStack Start、React Native で、General Translation の useGT フックを使って、ラベルやプレースホルダーなどの単独の文字列を翻訳する方法。
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

すべてのテキストが JSX とは限りません。たとえば、プレースホルダー、`aria-label`、代替テキスト、コード内で組み立てる文字列などです。こうしたテキストの翻訳には [`useGT`](/docs/react/reference/hooks/use-gt) フックを使用します。非同期の App Router コンポーネントでは、代わりに [`getGT`](/docs/react/nextjs/reference/functions/get-gt) を使用します。

## `useGT` で翻訳する [#use-gt]

`useGT` を呼び出して翻訳関数を取得し、ソース文字列を渡します。`useGT` はその関数自体を直接返します。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useGT } from 'gt-react';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="同期コンポーネント"
    import { useGT } from 'gt-next';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```

    ```tsx title="非同期 App Router コンポーネント"
    import { getGT } from 'gt-next/server';

    async function Search() {
      const gt = await getGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useGT } from 'gt-tanstack-start';

    function Search() {
      const gt = useGT();
      return <input placeholder={gt('Search products')} aria-label={gt('Search')} />;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { useGT } from 'gt-react-native';

    function Search() {
      const gt = useGT();
      return <TextInput placeholder={gt('Search products')} accessibilityLabel={gt('Search')} />;
    }
    ```
  </Tab>
</Tabs>

*注: `const gt = useGT()` と書いてください。フックが返すのはオブジェクトではなく、関数そのものです。CLI が抽出できるよう、テンプレートリテラルや文字列結合ではなく、文字列リテラルを渡してください。*

## 変数を埋め込む [#variables]

名前付きプレースホルダーを使ったICUメッセージ構文を使用し、値はoptions objectで渡します。これはどのフレームワークでも共通です。

```tsx
const gt = useGT();
gt('Welcome back, {name}!', { name: user.name });
```

## コンテキストを追加 [#context]

文字列の意味を明確にするには`$context`を、安定した識別子を付けるには`$id`を渡します。

```tsx
gt('Bank', { $context: 'a bank of a river' });
```

## コンポーネント外で定義した文字列を再利用する [#shared]

定数、列挙型、設定などのためにモジュールスコープで翻訳可能な文字列を定義する場合は、[`msg`](/docs/react/reference/functions/msg) で登録し、[`useMessages`](/docs/react/reference/hooks/use-messages) で取得します。非同期の App Router コンポーネントでは、代わりに [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) を使用します。文字列は `msg` で一度だけ登録し、レンダリングする場所で取得してください。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```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 <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="同期コンポーネント"
    import { msg, useMessages } from 'gt-next';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```

    ```tsx title="非同期 App Router コンポーネント"
    import { msg } from 'gt-next';
    import { getMessages } from 'gt-next/server';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    async function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = await getMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { msg, useMessages } from 'gt-tanstack-start';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <span>{m(STATUS[status])}</span>;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { msg, useMessages } from 'gt-react-native';

    const STATUS = { active: msg('Active'), paused: msg('Paused') };

    function Badge({ status }: { status: 'active' | 'paused' }) {
      const m = useMessages();
      return <Text>{m(STATUS[status])}</Text>;
    }
    ```
  </Tab>
</Tabs>
## Next steps

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