# General Translation Key Concepts: 動的コンテンツ
URL: https://generaltranslation.com/ja/docs/key-concepts/dynamic-content.mdx
---
title: 動的コンテンツ
description: GT で動的コンテンツを扱う際の簡単な概要。
---

## 概要

**動的コンテンツ** とは一般に、ユーザー、コンテキスト、環境などに応じて変化する可能性があるコンテンツのことです。
これに対して **静的コンテンツ** は、ユーザー、コンテキスト、環境などに関係なく常に同じ内容のままです。

<Accordions>
  <Accordion title="動的コンテンツと静的コンテンツの違いは何ですか？">
    要点

    * 静的コンテンツは変化しません (生の文字列やテキストなど) 。
    * 動的コンテンツは変化します (名前、メールアドレス、時刻、言語など) 。

    **静的コンテンツとは？**

    静的コンテンツとは一般に、ユーザーに配信されるバンドル内に含まれる生のテキストを指します。
    ひとつの目安として、開発者がソースコードを読んで確認できるテキストや文字列は、静的テキストだと考えられます。

    たとえば、次のファイルを見てみましょう。

    ```jsx title="Landing.jsx" copy

    export default function Landing() {
        return (
            <> Welcome to my app!</>
        );
    }
    ```

    「Welcome to my app!」というテキストは、変化しないため静的コンテンツです。

    では、ユーザーがログインしているかどうかに応じて表示を変えるようにページを変更したいとしたらどうでしょうか。

    ```jsx title="Landing.jsx" copy

    export default function Landing(user) {

        if (user) {
            return (
                <h1> Welcome to my app, {user.name}! </h1>
            );
        }
        
        return (
            <h1> Welcome to my app!</h1>
        );
    }
    ```

    この2つのフレーズは条件付きでレンダリングされていますが、どちらも静的テキストと見なされます。
    先ほどの目安を思い出してください。`landing.jsx` のソースコードを読めば、このコンテンツは確認できます。

    一方、`{user.name}` は変化する可能性があるため、動的コンテンツと見なされます。
    `landing.jsx` ファイルを読むだけでは、ユーザーの画面に実際に何がレンダリングされるかはわかりません。
  </Accordion>
</Accordions>

## &quot;Tx するか、しないか&quot;

動的なコンテンツを翻訳したい場合もあれば、そのままにしておきたい場合もあります。

わかりやすい例としては、ユーザーのメールアドレスや名前です。
別の例としては、銀行口座の残高やユーザーの SSN などがあります。
このような項目は、(1) アプリが別の言語でレンダリングされても翻訳が必要になることはほとんどなく、(2) 内容が変わりうるものです (この場合はユーザーごとに異なります) 。

### 例

```jsx title="Greeting.jsx" copy
import { T, Var } from 'gt-next'

export default function Greeting(name) {
    return (
        <T id='greeting'>
            Hello, <Var>{name}</Var>!
        </T>
    );
}
```

翻訳の面では、これには 2 つの利点があります。

1. 考えうるすべての名前に対して翻訳を作成する必要がありません。
   * `<Var>` を使えば、実質的には次のような 1 つの翻訳を生成するだけで済みます。
     * `¡Hola, $&#123;name&#125;!`
   * `<Var>` を使わない場合は、名前ごとに on-demand 翻訳を行う必要があります。
     * &quot;¡Hola, Alice!&quot;, &quot;¡Hola, Bob!&quot;, &quot;¡Hola, Charlie!&quot;, &quot;¡Hola, David!&quot;, ...
2. 名前そのものが翻訳された形に変わってしまう心配もありません (たとえば &quot;¡Hola, Alicia!&quot;, &quot;¡Hola, Roberto!&quot;, ...) 。

<Callout type="info">
  **注:** `<Var>`、`<Currency>`、`<DateTime>`、`<Num>` コンポーネントは、`gt-next`、`gt-react`、`gt-react-native` で利用できます。
</Callout>

ご覧のとおり、`<Var>` コンポーネントは、ロケールに関係なくそのまま維持したい内容を包むために使用するべきです。
こうすることで、動的コンテンツの取りうるすべての値ごとに翻訳を作成する必要がなくなります。

非公開情報を `<Var>` コンポーネントで包むことで、その情報が General Translation API に送信されないようにできます。

<Callout>
  **例外**

  上記の説明には例外があり、(1) `<Var>` コンポーネント内でネストされた `<T>` コンポーネントを使用する場合 (つまり、ネストされた `<T>` コンポーネントの子要素は翻訳されます)
  または (2) `<Var>` コンポーネントの子要素内で、別の手段によって意図的にデータが API に渡される場合です (たとえば fetch 呼び出し) 。
  ただし、これは `<Var>` コンポーネントや General Translation API の本来の使い方ではなく、そのような使い方をすると読み込み時間やパフォーマンスに悪影響を及ぼす可能性があります。
</Callout>