戻る

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形式のプレースホルダーを記述して options オブジェクトを渡す代わりに、通常の JavaScript テンプレートリテラルを書くだけで、変数の補間は自動的に処理されます.

変更前と変更後

// 変更前 — ICUプレースホルダー + オプションオブジェクト
t("Hello, {name}! You have {count} items.", { name, count })

// 変更後 — タグ付きテンプレートリテラル
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 を毎回各ファイルでインポートしたくない場合は、グローバルに登録できます。

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

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

例

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`,
};

リンク