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

## 概要

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

<Callout>
  **ビルド時翻訳:**
  `useGT`、`getGT`、`msg` では、翻訳されるのは元の文字列のみで、変数は翻訳されません。
  動的コンテンツを含む文字列を翻訳する場合は、[`tx`](/docs/next/api/strings/tx) を参照してください。
</Callout>

## リファレンス

### パラメータ

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| プロパティ        | 説明                                                                                   |
| ------------ | ------------------------------------------------------------------------------------ |
| `[variable]` | 変数は オプションオブジェクト のトップレベルキーとして渡します。キー名は、文字列 内のプレースホルダー (例: `{username}`) に対応します。 |
| `$context`   | 翻訳の指針となるよう、コンテンツに コンテキスト を指定します。                                                    |
| `$id`        | 翻訳エディターで使用する識別子を指定します。                                                               |
| `$maxChars`  | 翻訳の文字数を制限します。ライブラリはこの上限を厳密に適用します。                                                    |

***

## 例

### コンテキスト

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

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

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

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


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

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

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

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

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

***


## 注記

* `InlineTranslationOptions` は、インライン文字列の翻訳に使用します。
* 変数は `variables` キーの下にネストせず、オプションオブジェクトのトップレベルキーとして渡します。

## 次のステップ

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