変数コンポーネント

概要

gt-next の変数コンポーネントを使用すると、翻訳に動的で翻訳不可能なコンテンツを挿入できます。これらのコンポーネントには以下が含まれます：

<Var>: 変数をレンダリングするためのもの。
<Num>: ローカライズされた形式で数値をフォーマットするためのもの。
<Currency>: ローカライズされた形式で通貨の値をフォーマットするためのもの。
<DateTime>: 日付と時刻をフォーマットするためのもの。

これらのコンポーネントは <T> コンポーネント内やテンプレート辞書エントリの一部として使用され、動的コンテンツが正確かつ一貫して表示されることを保証します。

このリファレンスでは、以下をカバーします：

変数コンポーネントとは何か、そしてそれがどのように機能するか。
アプリケーションで変数コンポーネントを使用するためのデザインパターン。
各変数コンポーネントの使用例。
変数コンポーネントを使用する際に避けるべき一般的な落とし穴。

変数コンポーネントとは何ですか？

変数コンポーネントは、動的コンテンツをラップするために使用されます。これには、ユーザー名、数値、日付、通貨が含まれます。これらのコンポーネントは、ユーザーのロケールに合わせて動的な値をフォーマットし表示することができるため、ローカライズされたコンテンツの整合性を維持するために不可欠です。

各変数コンポーネントには、特化した動作があります：

<Var>: ユーザー名や識別子などの一般的な変数を表示します。
<Num>: ロケール固有のルールに従って数値をフォーマットします。
<Currency>: 通貨の値をシンボルとローカライズルールでフォーマットします。
<DateTime>: ロケール固有の慣習を使用して日付と時刻をフォーマットします。

JSXコンテンツと文字列は一般的な翻訳APIを通じて翻訳されますが、変数コンポーネントは完全にローカルで処理されます。これは、これらのコンポーネント内のコンテンツが翻訳サービスに送信されることがないため、データのプライバシーとセキュリティが確保されることを意味します。

<Var>コンポーネントは一般的な変数のためのキャッチオールとして使用されますが、<Num>, <Currency>, <DateTime>コンポーネントはローカライズフォーマットが必要な特定のデータタイプに使用されます。これらのために、ユーザーのロケールに従ってコンテンツをフォーマットするためにJS i18n APIを使用します。

デザインパターン

`<T>` 内の変数コンポーネントのラッピング

変数コンポーネントは、しばしば <T> コンポーネント内または辞書エントリの一部としてラッピングされます。これにより、周囲のコンテンツが翻訳される一方で、変数コンテンツは動的にレンダリングされ、変更されません。

import { T, Var } from 'gt-next';
 
export default function UserGreeting({ user }) {
  return (
    <T id="greeting">
      Hello, <Var>{user.name}</Var>!
    </T>
  );
}
```## 例
 
### `<Var>` の例
 
`<Var>` コンポーネントはコンテンツを再フォーマットしないため、ほぼ常に `<T>` コンポーネントでラップされています。
 
この例では、変数を `value` フィールドに渡すか、`<Var>` コンポーネントの子として変数を渡すかは同じ効果があることがわかります。
他のコンポーネントと同様に、`<Var>` コンポーネントは任意のJSXコンテンツをラップするために使用できます。
 
```jsx
import { T, Var } from 'gt-next';
 
export default function UserGreeting({ user }) {
  return (
    <T id="greeting">
      Hello, <Var>{user.name}</Var>!
      Your address is <Var value={user.addr} />
    </T>
  );
}

`<Num>` の例

<Var> コンポーネントとは異なり、<Num> コンポーネントは数値をロケール固有のルールに従ってフォーマットするために使用されます。この例では、<Num> コンポーネントが <T> コンポーネントの子として、また独立したコンポーネントとしても使用できることがわかります。

import { T, Num } from 'gt-next';
import { Badge } from '@components/custom/cart/Badge';
 
export default function OrderSummary({ order }) {
  return (
    <>
      <T id="orderSummary">
        You have <Num value={order.quantity} /> items in your cart.
      </T>
      <Badge>
        <Num>{order.quantity}</Num>
      </Badge>
    </>
  );
}

`<Currency>` の例

<Currency> コンポーネントは数値を受け取り、提供された通貨文字列に従ってフォーマットします。この例では、<Currency> コンポーネントが <T> コンポーネントの子として、また独立したコンポーネントとしても使用できることがわかります。

import { T, Currency } from 'gt-next';
import { Badge } from '@components/custom/cart/Badge';
 
export default function OrderSummary({ order }) {
  return (
    <>
      <T id="orderSummary">
        Your total is <Currency currency={"USD"}>{order.total}</Currency>.
      </T>
      <Badge>
        <Currency value={order.total} currency={"USD"} />
      </Badge>
    </>
  );
}

`<DateTime`> の例

<DateTime> コンポーネントは日付と時刻の値をユーザーのロケールに従ってフォーマットします。ここでも、<DateTime> コンポーネントが <T> コンポーネントの子として、また独立したコンポーネントとしても使用できることがわかります。

import { T, DateTime } from 'gt-next';
 
export default function OrderSummary({ order }) {
  return (
    <T id="orderSummary">
      Your order was placed on <DateTime value={order.date} />
    </T>
    <DateTime>{order.date}</DateTime>
  );
}

例

`<Var>` の例

<Var> コンポーネントはコンテンツを再フォーマットしないため、ほとんどの場合 <T> コンポーネントでラップされます。

この例では、変数を value フィールドに渡すか、<Var> コンポーネントの子として変数を渡すかで同じ効果が得られることがわかります。他のコンポーネントと同様に、<Var> コンポーネントは任意のJSXコンテンツをラップするために使用できます。

import { T, Var } from 'gt-next';
 
export default function UserGreeting({ user }) {
  return (
    <T id="greeting">
      Hello, <Var>{user.name}</Var>!
      Your address is <Var value={user.addr} />
    </T>
  );
}

`<Num>` の例

<Var> コンポーネントとは異なり、<Num> コンポーネントは数値をロケール固有のルールに従ってフォーマットするために使用されます。この例では、<Num> コンポーネントが <T> コンポーネントの子としても、単独のコンポーネントとしても使用できることがわかります。

import { T, Num } from 'gt-next';
import { Badge } from '@components/custom/cart/Badge';
 
export default function OrderSummary({ order }) {
  return (
    <>
      <T id="orderSummary">
        You have <Num value={order.quantity} /> items in your cart.
      </T>
      <Badge>
        <Num>{order.quantity}</Num>
      </Badge>
    </>
  );
}

`<Currency>` の例

<Currency> コンポーネントは数値を受け取り、指定された通貨文字列に従ってフォーマットします。この例では、<Currency> コンポーネントが <T> コンポーネントの子としても、単独のコンポーネントとしても使用できることがわかります。

import { T, Currency } from 'gt-next';
import { Badge } from '@components/custom/cart/Badge';
 
export default function OrderSummary({ order }) {
  return (
    <>
      <T id="orderSummary">
        Your total is <Currency currency={curr}>{order.total}</Currency>.
      </T>
      <Badge>
        <Currency value={order.total} currency={curr} />
      </Badge>
    </>
  );
}

`<DateTime>` の例

<DateTime> コンポーネントは、ユーザーのロケールに従って日付と時刻の値をフォーマットします。再び、<DateTime> コンポーネントが <T> コンポーネントの子としても、単独のコンポーネントとしても使用できることがわかります。

import { T, DateTime } from 'gt-next';
 
export default function OrderSummary({ order }) {
  return (
    <T id="orderSummary">
      Your order was placed on <DateTime value={order.date} />
    </T>
    <DateTime>{order.date}</DateTime>
  );
}

変数コンポーネントは、翻訳で動的かつプライベートなコンテンツを表示するために不可欠です。
すべての再フォーマットはローカルで行われ、機密データが一般的な翻訳APIに送信されないようにしています。
<Num>、<Currency>、<DateTime> のようなコンポーネントは、正確なフォーマットを保証するためのローカリゼーション機能を提供しますが、<Var> コンポーネントは再フォーマットを必要としない一般的な変数に使用されます。

変数コンポーネント

概要

変数コンポーネントとは何ですか？

デザインパターン

`<T>` 内の変数コンポーネントのラッピング

`<Num>` の例

`<Currency>` の例

`<DateTime`> の例

例

`<Var>` の例

`<Num>` の例

`<Currency>` の例

`<DateTime>` の例

よくある落とし穴

ローカライズオプションを無視する

メモ

このページについて