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

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


## 概要

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

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

## リファレンス

### パラメーター

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

### 説明

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

***

## 例

### コンテキスト

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

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

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-native';

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


### ICU message format を使う

`gt-react-native` は ICU message format をサポートしているため、変数の書式も設定できます。

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

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

ICU message format の詳細については、[ICU message format documentation](https://unicode-org.github.io/icu/userguide/format_parse/messages/)を参照してください。


### 字符制限

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

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

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

***


## 注記

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

## 次のステップ

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