# General Translation React SDKs (gt-react, gt-next): useTranslations
URL: https://generaltranslation.com/ja/docs/react/reference/hooks/use-translations.mdx
---

title: useTranslations
description: General Translation の gt-react で、id を使って辞書から string の翻訳を取得します。useTranslations の API リファレンス。

---

`useTranslations` hook は、[翻訳辞書](/docs/react/guides/translating-with-dictionaries) から id を使って string の翻訳を取得します。これは、[`<T>`](/docs/react/reference/components/t) コンポーネントおよび [`useGT`](/docs/react/reference/hooks/use-gt) の辞書ベースの代替手段です。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` から import していますが、代わりにお使いのフレームワークのパッケージから import してください。*

## 概要 [#overview]

`useTranslations` を呼び出して参照関数を取得し、その関数にエントリの id を渡します。

```tsx
const t = useTranslations(); // 翻訳関数を取得する
t('greeting.hello'); // idを渡して翻訳を取得する
```

*注: `gt-react` では、[`<GTProvider>`](/docs/react/reference/components/gt-provider) の配下で `useTranslations` を呼び出してください。辞書は provider または初期化呼び出しに渡しておく必要があります。`gt-next` では、同期的なサーバーコンポーネントでも動作します。`<T>` のみを使用する場合は、これは不要です。*

## 仕組み [#how-it-works]

* **id ベースの参照。** 返される関数は、id を使って辞書エントリをアクティブなロケール向けに解決します。変数は補間されますが、翻訳はされません。
* **ルート id プレフィックス。** `rootId` を渡すと、すべての参照にプレフィックスが付きます。これは、ネストされた辞書セクション内で扱う際に便利です。
* **ネストされたオブジェクト。** 返される関数には、単一の文字列ではなくネストされた辞書オブジェクトを読み取るための `.obj(id)` メソッドがあります。
* **存在しない id は例外になります。** 辞書に存在しない id を参照すると例外が発生します。

## パラメータ [#parameters]

| パラメータ                | 説明                            | 型        | 任意 | デフォルト |
| -------------------- | ----------------------------- | -------- | -- | ----- |
| [`rootId`](#root-id) | すべての 参照 id に付与されるプレフィックス。 | `string` | はい | —     |

### `rootId` [#root-id]

**型** `string` · **任意**

すべての参照 `id` の先頭に付与される任意のプレフィックスです。辞書内のネストされた一部を扱う際に便利です。

## 戻り値 [#returns]

**型** `(id: string, options?: DictionaryTranslationOptions) => string`

指定した id に対応する翻訳済みのエントリを返す関数です。ネストされたオブジェクトを読み取るための `.obj(id)` メソッドも利用できます。

| 名前        | 説明            | 型                                                                                            | 任意  |
| --------- | ------------- | -------------------------------------------------------------------------------------------- | --- |
| `id`      | 解決するエントリの id。 | `string`                                                                                     | いいえ |
| `options` | エントリの補間変数。    | [`DictionaryTranslationOptions`](/docs/react/reference/types/dictionary-translation-options) | はい  |

## 例 [#examples]

```tsx title="dictionary.ts"
const dictionary = {
  greeting: 'Hello, Bob', // [!code highlight]
};
export default dictionary;
```

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return <p>{t('greeting')}</p>; // [!code highlight]
}
```

```tsx title="dictionary.ts"
const dictionary = {
  greeting: 'Hello, {userName}!', // [!code highlight]
};
export default dictionary;
```

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations();
  const greetingAlice = t('greeting', { userName: 'Alice' }); // [!code highlight]
  return <p>{greetingAlice}</p>; // "Hello, Alice!"
}
```

```tsx title="UserDetails.tsx"
import { useTranslations } from 'gt-react';

// dictionary: { prefix1: { prefix2: { greeting: 'Hello, Bob' } } }
export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return <p>{t('greeting')}</p>; // prefix1.prefix2.greeting に解決される
}
```

## メモ [#notes]

* `useTranslations` は、id を使って辞書内の翻訳にアクセスします。
* 非同期の App Router コンポーネントでは、代わりに [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations) を使用してください。
* `gt-react` では、利用可能な辞書を持つ [`<GTProvider>`](/docs/react/reference/components/gt-provider) 内で使用する必要があります。
* セットアップ方法と規約については、[辞書ガイド](/docs/react/guides/translating-with-dictionaries) を参照してください。