概要

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() 関数内の動的コンテンツを示し、ハッシュ計算の対象から除外するとともに、runtime では変数として扱えるようにします。 これは、動的コンテンツを ICU 互換の select 文でラップし、補間時に元の動的コンテンツへ展開されるようにすることで実現しています。

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

decodeVars()

declareVar() はソーステキストに ICU 互換のマーカーを追加するため、これだけを追加すると既存の文字列処理ロジックで問題が生じることがあります。 元の値を取り出すには、ソース文字列を 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 文を優先してください。