# gt-react: General Translation React SDK: DictionaryTranslationOptions
URL: https://generaltranslation.com/ja/docs/react/api/types/dictionary-translation-options.mdx
---
title: DictionaryTranslationOptions
description: DictionaryTranslationOptions 型の API リファレンス
---

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


## 概要

`DictionaryTranslationOptions` 型は、辞書エントリに変数を渡し、そのレンダリング方法を指定するために使用します。
これは、[`useTranslations`](/docs/react/api/dictionary/use-translations) で辞書エントリに変数を渡す際に使用します。

<Callout>
  **ビルド時翻訳:**
  `useTranslations` による翻訳はビルド時に実行されますが、変数自体は翻訳されません。
  代わりに、書式を適用したうえで翻訳文に挿入されます。
  必ず[こちらのデプロイガイド](/docs/react/tutorials/quickdeploy)に従ってください。
</Callout>

## リファレンス

### パラメーター

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

### 説明

| Prop        | 説明                                   |
| ----------- | ------------------------------------ |
| `variables` | キーによって、各値が辞書エントリ内のどこに対応するかを示すオブジェクト。 |

***

## 例

### 変数を渡す

辞書エントリに変数を渡すには、次の 2 つが必要です。(1) エントリに変数を追加すること、(2) [`d`](/docs/react/api/dictionary/use-translations) の呼び出し内でその変数を参照することです。

まず、次の構文で辞書エントリに変数を追加します: `{username}`。
`username` は変数名です。

```jsx title="dictionary.ts"
// [!code word:username]
const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};

export default dictionary;
```

次に、変数を参照します:

```jsx title="Component.tsx"
// [!code word:username]
import { useTranslations } from 'gt-react';

const Component = () => {
  const t = useTranslations();
  return <div>{t('greeting.hello', { username : 'Brian123' })}</div>;
};
```


### ICU メッセージ形式を使う

`gt-react` は ICU メッセージ形式をサポートしており、変数の書式設定も行えます。

```jsx title="dictionary.ts"
// [!code word:account-balance]
const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;
```

次に、変数を参照します。

```jsx title="Component.tsx"
// [!code word:account-balance]
import { useTranslations } from 'gt-react';

const Component = () => {
  const t = useTranslations();
  return <div>
    { t(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

***


## 注記

* `variables` オブジェクトは、辞書エントリに値を渡します。
* `variablesOptions` オブジェクトは、変数の挙動を定義します。

## 次のステップ

* 辞書と一般的なベストプラクティスについて詳しくは、[dictionaries](/docs/react/guides/dictionaries)を参照してください。
* 辞書インターフェースについて詳しくは、[`useTranslations`](/docs/react/api/dictionary/use-translations)を参照してください。
* 書式設定オプションについて詳しくは、[`ICU メッセージ形式`](https://unicode-org.github.io/icu/userguide/format_parse/messages/)を参照してください。