変数コンポーネント

概要

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>
  );
}

変数コンポーネントとローカリゼーション

<Num>, <Currency>, <DateTime> などの特定の変数コンポーネントには、組み込みのローカリゼーションサポートが含まれています。これらのコンポーネントは、ユーザーのロケールやプロップスとして渡された追加のオプションに基づいて、自動的にコンテンツをフォーマットします。

例えば:

<Num> は、ローカライズされた小数点区切りで数値を表示できます。
<Currency> は、正しい通貨記号と位置で値をフォーマットできます。
<DateTime> は、ロケール固有のルールに従って日付と時刻をフォーマットできます。

これらのコンポーネントにプロップスを直接渡すことで、デフォルトのロケールとフォーマットオプションを上書きすることもできます。

データプライバシー

前述のように、変数コンポーネントはすべての再フォーマットをローカルで処理するため、翻訳のために一般翻訳APIに情報が送信されることはありません。これは、ユーザー名やアカウント番号などの機密データをプライベートかつ安全に保つのに最適です。

各変数コンポーネントは異なるフォーマットを処理し、特定の種類のプライベートコンテンツに使用されるべきです:

<Var>: ロケールに基づいてフォーマットが変わらないプライベート情報: 例、ユーザー名、アカウント番号。
<Num>: ロケールに従ってフォーマットされるべきプライベートな数値: 例、注文数量、年齢、距離。
<Currency>: ロケールに従ってフォーマットされるべきプライベートな通貨値: 例、取引額、口座残高。
<DateTime>: ロケールに従ってフォーマットされるべきプライベートな日付と時刻の値: 例、アカウント作成日、注文タイムスタンプ。

ブランチングコンポーネントや <T> コンポーネントは、翻訳のために一般翻訳APIにデータを送信するため、同じことは当てはまりません。

例

`<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> コンポーネントは再フォーマットを必要としない一般的な変数に使用されます。

次のステップ

Branching Componentsで条件付きロジックを探る。
API Referenceで特定のVariable Componentsのフォーマットオプションについて詳しく学ぶ。