# gt-react: General Translation React SDK: useTranslations
URL: https://generaltranslation.com/ja/docs/react/api/dictionary/use-translations.mdx
---
title: useTranslations
description: useTranslations フックの API リファレンス
---

{/* 自動生成: 直接編集しないでください。代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`useTranslations` は、[翻訳辞書](/docs/react/guides/dictionaries) から文字列の翻訳を取得するために使用します。

[`<GTProvider>`](/docs/react/api/components/gtprovider) でラップされたコンポーネント内で使用する必要があります。

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

<Callout>
  `useTranslations` は、翻訳対象のコンテンツをすべて保存するために [辞書](/docs/react/guides/dictionaries) を使用します。
  これは、翻訳に [`<T>` コンポーネント](/docs/react/guides/t) を使用する方法とは異なります。
  翻訳に `<T>` コンポーネントだけを使いたい場合、このドキュメントは関係ありません。
</Callout>


## リファレンス

### パラメーター

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop | 説明                                              |
| ---- | ----------------------------------------------- |
| `id` | すべての翻訳キーの先頭に付ける、省略可能な接頭辞です。ネストした辞書の値を扱う場合に便利です。 |

### 戻り値

ID を受け取ると、対応するエントリの翻訳版を返す翻訳関数 `d`

```jsx
(id: string, options?: DictionaryTranslationOptions) => React.ReactNode
```

| 名前         | 型                                                                                      | 説明                          |
| ---------- | -------------------------------------------------------------------------------------- | --------------------------- |
| `id`       | `string`                                                                               | 翻訳対象のエントリの id               |
| `options?` | [`DictionaryTranslationOptions`](/docs/react/api/types/dictionary-translation-options) | `d` の動作をカスタマイズするための翻訳オプション。 |

***


## 例

### 辞書の基本的な使い方

辞書内のすべてのエントリが翻訳対象になります。

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

これらのエントリにアクセスするには、`useTranslations` を呼び出します。
これにより、辞書内の翻訳キーを受け取る関数が返されます。

辞書は `GTProvider` コンポーネントに渡す必要があります。

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

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


### 変数の使用 [#variables]

値を渡すには、(1) 識別子を割り当て、(2) `d` 関数の呼び出し時にその識別子を参照する必要があります。

この例では、翻訳に変数を渡すために `{}` を使用します。
辞書では、識別子として `{userName}` を割り当てます。

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hello, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations();
  
  // こんにちは、Alice！
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice} // こんにちは、Alice // [!code highlight]
    </p>
  );
}
```


### プレフィックスの使用

プレフィックスを使うと、辞書の一部だけを翻訳できます。

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

`useTranslations` フックに `'prefix1.prefix2'` という値を渡しているため、すべてのキーには `prefix1.prefix2` というプレフィックスが付きます:

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

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

***


## 注意

* `useTranslations` 関数を使うと、辞書の翻訳にアクセスできます。
* `useTranslations` フックは、[`<GTProvider>` コンポーネント](/docs/react/api/components/gtprovider)でラップされたコンポーネント内でのみ使用できます。

## 次のステップ