戻る

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

概要

React コンテキストから離れるための継続的な試みの一環として、gt-react では t をタグ付きテンプレートリテラルとして使えるようになりました。

import { t } from "gt-react/browser";

const greeting = t`Hello, ${name}!`;

これは、既存の t() 関数呼び出しに代わる構文です。ICU スタイルのプレースホルダーを記述してオプションオブジェクトを渡す代わりに、標準的な JavaScript のテンプレートリテラルを書くだけで、変数の補間は自動的に処理されます。

変更前と変更後

// 変更前 — ICU placeholders + options object
t("Hello, {name}! You have {count} items.", { name, count })

// 変更後 — tagged template literal
t`Hello, ${name}! You have ${count} items.`

タグ付きテンプレートリテラル形式を使うと、プレースホルダーに名前を付けたり、変数参照を重複して書いたりする必要がなくなります。文字列は、通常の JavaScript のテンプレートリテラルを書くときと同じように記述できます。

Reactコンテキストは不要

gt-react@10.12.0で導入されたt()関数と同様に、タグ付きテンプレート形式はReactコンテキストに依存しません。ブラウザーコードであればどこでも使用できます。

  • イベントハンドラー: onClick={() => alert(t`Saved!`)}
  • ユーティリティ関数: function formatError(code) { return t`Error: ${code}` }
  • 定数や設定: const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • Reactコンポーネントの外でも使用可能

グローバル登録

すべてのファイルで t をインポートしたくない場合は、t をグローバルに登録できます:

// アプリのエントリーポイント（例：layout.tsx）
import "gt-react/macros";

これにより globalThis.t が設定され、明示的にインポートしなくても、どこからでもタグ付きテンプレートを利用できます。

例

import { t } from "gt-react/browser";

export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

export function SaveButton() {
  return (
    <button onClick={() => alert(t`Changes saved!`)}>
      {t`Save`}
    </button>
  );
}

または、グローバル登録を使う場合:

// インポート不要 — t は globalThis に登録済み
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};

リンク