概要

gt-next@6.8.0 では、JSX コンテンツにおける文の断片化とコード再利用の課題に対処するために <Static> コンポーネントを導入しました。 このコンポーネントにより、言語ごとの語形の一致や活用、語順の変化を保ったまま、翻訳の内部で静的な関数呼び出しを直接行うことができます。 しかし一方で、gt() や msg() を使った文字列ベースの翻訳には、この仕組みが適用できていませんでした。 JSX と同様に、多くのアプリケーションはユーティリティ関数による文字列構築に大きく依存しており、特に翻訳対象コンテンツがサービス層やユーティリティ、ビジネスロジック全体に散在しているような成熟したコードベースでは、その傾向が顕著です。

gt-next 6.12.0 では、このギャップを埋めるために <Static> コンポーネントに相当する文字列版として declareStatic() を導入し、あわせて declareVar() と decodeVars() という補助関数を提供します。

基本機能

declareStatic()

<Static> と同様に動作しますが、文字列を返す関数向けです。CLI（コマンドラインインターフェイス）が考えうるすべての戻り経路を解析し、それぞれの結果ごとに個別の翻訳エントリを作成します。

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Someone';
};

gt(`${declareStatic(getDisplayName(name))} says hello.`);

declareVar()

<Var> に相当する文字列版です。declareStatic() 関数内の動的コンテンツをマークし、ハッシュ計算から除外して、実行時に変数として扱えるようにするために使用します。 これは、動的コンテンツを ICU 互換の select 文でラップし、補間時に元の動的コンテンツへ解決されるようにすることで実現されています。

const greeting = "Hello, " + declareVar(name);
// "Hello, {_gt_, select, other {name}}"

decodeVars()

declareVar() はソーステキストに ICU 互換のマーカーを挿入するため、declareVar() だけを追加すると既存の文字列処理ロジックに問題を引き起こす可能性があります。 元の値を抽出するには、ソース文字列を decodeVars() でラップするだけで構いません。

const greeting = "Hello, " + declareVar("Brian");
// "Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// "Hello, Brian"

その他の改善

強化された文字列関数

gt() と msg() で、静的な文字列に限り、文字列の連結がサポートされるようになりました。

gt("Hello " + "world");
msg("Welcome, " + "Brian");

拡張された <Static> サポート

これまでは、<Static> コンポーネントは子要素として関数呼び出しのみをサポートしていました。 現在では、ネストされた JSX テキスト、三項演算子、条件式、関数呼び出しなど、ビルド時に解決可能な任意の JSX 式をサポートできます。

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Someone';
};
...
<T>
  <Static>
    Hello {getDisplayName("Brian")}!
    {
      isFriend ? " How are you?" : " What's up?"
    }
  </Static>
</T>

パフォーマンスに関する考慮事項

<Static> と同様に、declareStatic() は翻訳エントリーを増加させます。 複数の結果を持つ各関数呼び出しは、それぞれ別個の翻訳エントリーを生成し、同じ文字列内で複数の declareStatic() を呼び出すと、合計エントリー数は指数関数的に増加します。 この機能は慎重に使用し、増加の度合いが過度になる場合は ICU の select 文を優先して使用してください。