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

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


## 概要

`InlineTranslationOptions` 型は、インライン翻訳に変数を渡し、そのレンダリング方法を指定するために使用します。
また、翻訳に コンテキスト と識別子を追加することもできます。
これは、インライン文字列の翻訳に変数を渡すために [`useGT`](/docs/react/api/strings/use-gt) および [`msg`](/docs/react/api/strings/msg) とあわせて使用されます。

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

## リファレンス

### パラメーター

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

### 説明

| Prop        | 説明                                                                                         |
| ----------- | ------------------------------------------------------------------------------------------ |
| `variables` | 各値が文字列内のどこに対応するかをキーで示すオブジェクトです。                                                            |
| `$context`  | 必要に応じて、コンテンツの文脈を示すための変数として `$context` を `variables` オブジェクトに含められます (翻訳時に使用されます) 。           |
| `$id`       | 必要に応じて、翻訳エディタで使用する識別子として `$id` を `variables` オブジェクトに含められます。                                |
| `$maxChars` | 必要に応じて、翻訳の文字数を制限する変数として `$maxChars` を含められます。ライブラリは `formatCutoff()` ロジックを使ってこの制限を厳密に適用します。 |

***

## 例

### コンテキスト

文字列にコンテキストを追加するには、`$context` prop を使用します。

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

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, world!', { $context: '丁寧な挨拶' })}</div>;
};
```


### 変数を渡す

文字列に変数を追加するには、`{variable-name}` 構文を使用します。これは、変数名を中括弧で囲む形式です。

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

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
```


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

`gt-react` は ICU メッセージ形式に対応しており、変数の書式設定もできます。

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

const Component = () => {
  const gt = useGT();
  return <div>
    { gt(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

ICU メッセージ形式の詳細については、[ICU メッセージ形式のドキュメント](https://unicode-org.github.io/icu/userguide/format_parse/messages/) を参照してください。


### 字符制限

翻訳の長さを制限するには、`$maxChars` を使用します:

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

const Component = () => {
  const gt = useGT();
  return <div>{gt('Welcome to our application', { $maxChars: 15 })}</div>; 
  // 出力: "Bienvenue à no\u202F…"
};
```

***


## 注記

* `InlineTranslationOptions` は、インライン文字列の翻訳に使用します。
* `variables` オブジェクトは、テキストに埋め込む値を渡します。
* `variablesOptions` オブジェクトは、変数の挙動を定義します。

## 次のステップ

* インライン文字列の翻訳について詳しくは、[`useGT`](/docs/react/api/strings/use-gt)を参照してください。
* 書式オプションについて詳しくは、[`ICU メッセージ形式`](https://unicode-org.github.io/icu/userguide/format_parse/messages/)を参照してください。