# gt-react: General Translation React SDK: GT JSX データ形式
URL: https://generaltranslation.com/ja/docs/react/reference/gt-jsx.mdx
---
title: GT JSX データ形式
description: 圧縮版の General Translation JSX データ形式のリファレンス
---

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

GT JSXデータ形式は、Reactアプリケーション内の翻訳済みUIを表現するためにGeneral Translationライブラリで使用される、圧縮されたデータ形式です。


## はじめに: JSX ツリー

React では、JSX ツリーは次のような構造のオブジェクトとして表現されます。

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...その他のprops
    };
    // ...その他の属性
};
type JSXTree = Element | string;
```

GT JSX は、この JSX ツリー構造を圧縮した形式で、React アプリケーション内の翻訳済み UI を表現するために General Translation のライブラリで使用されます。


## リファレンス

```ts
type Element = {
    t?: string; // tag name
    c?: (Element | Variable | string)[]; // children
    i?: number; // GT ID of the element
    d?: {
        b?: Record<string, Element | Variable | string>; // 分岐
        t?: "p" | "b"; // 分岐変換タイプ (plural or branch)
        pl?: string; // placeholder
        ti?: string; // title
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // style
    };
}
type Variable = {
    k: string; // key
    v?: "v" | "n" | "c" | "d" | "rt"; // 型
    i?: number; // GT ID
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```

## GT JSX: 文字列

GT JSX の最もシンプルな形式は文字列で、静的なテキストを表します。

たとえば、次のようになります。

```jsx
<T>Hello, world!</T>
```

GT JSX では次のように表されます:

```ts
"Hello, world!"
```

文字列の配列も GT JSX として有効です:

```ts
["Hello, ", "world!"]
```


## GT JSX: エレメント

GT では、JSX の `Element` 型を 2 通りで表現します。

### 変数

1つ目は変数で、キーと任意の型を持つシンプルなオブジェクトです。これは、runtimeで変化しうる変数を表すために使用されます。

```ts
type Variable = {
    k: string; // `k` represents key, the name of the variable
    v?: ( // represents the type of the variable, if left out is assumed as `v`
        "v" | // `v`, a generic variable
        "n" | // `n`, a number variable
        "c" | // `c`, a currency variable
        "d" | // `d`、日時変数
        "rt" // `rt`、相対時間変数
    );
    i?: number; // GT ID of the variable
}
```


#### 例 1: Var

```jsx
<T>Hello, <Var>{name}</Var>!</T>
```

GT JSX では次のように表現されます:

```ts
["Hello, ", { k: "_gt_var_1", i: 1 }, "!"]
```

<Callout type="info">
  `name` prop がない変数には、GT ID に基づいて一意の内部名が割り当てられます
</Callout>


#### 例 2: Num

```jsx
<T>The count is <Num>{count}</Num></T>
```

GT JSX では次のように表現されます。

```ts
["The count is ", { k: "count", v: "n", i: 1 }]
```


#### 例 3: name prop を使う場合

```jsx
<T>This product costs <Currency name="cost">{amount}</Currency></T>
```

GT JSX では次のように表現します:

```ts
["This product costs ", { k: "cost", v: "c", i: 1 }]
```


### 要素

変数ではない要素は、次のデータ構造で表現されます。

<Callout type="info">
  これらの属性はすべて省略可能です。
  空のオブジェクトは、元の対応する要素と同じ位置にある翻訳済み要素であり、その子孫に翻訳対象の内容が含まれていないことを表します。
  **実際には、`i` は常に含まれます。**
</Callout>

```ts
type Element = {
    t?: string; // タグ名
    c?: GTJSXTree | GTJSXTree[]; // 子要素
    i?: number; // 要素のGT ID
    d?: { // data-_gt プロパティ
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // 分岐
        t?: "p" | "b"; // 分岐変換タイプ（plural または 分岐）
        pl?: string; // プレースホルダー
        ti?: string; // タイトル
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // スタイル
    }
}
```

#### 例 1: シンプルなタグ

```jsx
<T>Hello, <b>world</b>!</T>
```

GT JSX では、次のように表します。

```ts
["Hello, ", { c: "world", i: 1 }, "!"]
```


#### 例 2: ネストあり、変数付き

```jsx
<T><b>Hello</b>, my name is <i><Var>{name}</Var></i></T>
```

GT JSX では次のように表現されます:

```ts
[
    { t: "b", c: "Hello", i: 1 },
    ", my name is ",
    { 
        t: "i",
        c: { k: "_gt_var_3", i: 3 }, 
        i: 2 
    }
]
```


#### 例 3: 複数形を使う場合

```jsx
<T>
    <Plural 
        n={count} 
        one={<>I have <Num>{count}</Num> item</>} 
        other={<>I have <Num>{count}</Num> items</>}
    />
</T>
```

GT JSX では次のように表現されます。

```ts
{ 
    i: 1,
    d: {
        t: "p",
        b: {
            one: {
                c: ["I have", { k: "_gt_num_4", v: "n", i: 3 }, "item"],
                i: 2 
            },
            other: {
                c: ["I have", { k: "_gt_num_4", v: "n", i: 3 }, "items"],
                i: 2 // 並列ブランチでは同じIDが使用されることに注意
            }
        }
    }
}
```


### GTJSX 型

```ts
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```


## GT ID

GT ID は、JSX ツリー内の要素と変数に対して、1 から始まる深さ優先の連番で割り当てられます。

`<Branch>` や `<Plural>` のような分岐コンポーネントがある場合は、並列する分岐に同じ GT ID が割り当てられます。これは、ある言語では別の言語より分岐が多い場合 (たとえば複数形の種類がより多い言語) でも、適切な props とロジックを持つ要素を引き続き作成できるようにするためです。

## GT JSX JSON ファイル

各 JSX ツリーは `<T>` コンポーネントの子要素を表します。
コンポーネントは翻訳用の JSON ファイルにまとめて保存されます。
これらのファイルに保存される JSON オブジェクトの型は、次のとおりです。

```ts
type GTJSXFile = {
    [key: string]: GTJSXTree;
}
```

ここで、`key` はユーザー定義の値、または元の言語の `GTJSXTree` のハッシュ値のいずれかであり、
`GTJSXTree` は前述の GT JSX ツリーを表す型です。


### 完全な例

記述したJSX:

```jsx
<T>
    <b>Alice's</b> happy <i>customer</i>
</T>
```

次のような JSX ツリーで表されます:

```ts
[
    {
        type: "b",
        "props": {
            "children": "Alice's"
        }
    },
    " happy ",
    {
        type: "i",
        "props": {
            "children": "customer"
        }
    }
]
```

これは次のように GT JSX にミニファイされます:

```ts
[{ t: "b", c: "Alice's", i: 1 }, " happy ", { t: "i", c: "customer", i: 2 }]
```

スペイン語に翻訳した場合、GT JSX は次のようになります:

```ts
[{ c: "El cliente", i: 2 }, " feliz ", { c: "de Alice", i: 1 }]
```

次のような内容のファイルに保存されます。

```json
{ "abc123": [{ "c": "El cliente", "i": 2 }, " feliz ", { "c": "de Alice", "i": 1 }] }
```

<Callout type="info">`abc123` はスペイン語訳ではなく、元の英語の GT JSX ツリーのハッシュです。</Callout>

スペイン語訳を元の JSX ツリーと照合すると、次のものが生成されます。

```ts
[
    {
        type: "i",
        "props": {
            "children": "El cliente"
        }
    },
    " feliz ",
    {
        type: "b",
        "props": {
            "children": "de Alice"
        }
    }
]
```

これを、意図したとおりのUIとして表示できます：

```jsx
<><i>El cliente</i> feliz <b>de Alice</b></>
```


### ハッシュ

ハッシュ化アルゴリズム、ハッシュ長は未定

### runtime でのハッシュ計算を避ける

runtime でハッシュを計算しなくて済むよう、これらのライブラリには、ユーザーが ID を指定できるオプションのフォールバック機構があります。

```jsx
<T id="example">
    Hello, world
</T>
```

翻訳用のJSONファイルにIDが含まれている場合は、ハッシュではなくそのIDが使用されます。

```json
{ "example": "Hello, world" }
```