# gt-react: General Translation React SDK: t
URL: https://generaltranslation.com/ja/docs/react/api/strings/t-function.mdx
---
title: t
description: t() の同期的な文字列翻訳関数の API リファレンス
---
## 概要
`t` 関数は、クライアント側の React アプリケーションで使う、モジュールレベルの同期的な文字列翻訳関数です。
```jsx
import { t } from 'gt-react/browser';
const greeting = t('Hello, world!');
```
`t` は、タグ付きテンプレートリテラルとしても使えます。
```jsx
import { t } from 'gt-react/browser';
const greeting = t`Hello, ${name}!`;
```
`useGT` (React コンテキストが必要) や `msg` (文字列をエンコードし、後で解決する) とは異なり、`t()` は翻訳された文字列を直接返します。ブラウザーコードであれば、モジュールスコープや React コンポーネントの外側を含め、どこからでも呼び出せます。
**実験的機能:** `t()` は実験的な機能です。クライアントサイド専用の React アプリケーション向けに設計されており、まだ React コンテキスト (例: ``、`useGT`) とは統合されていません。サーバーで呼び出すと、警告がログに出力され、元の文字列を返します。
***
## セットアップ
`t()` は、アプリがレンダリングされる前に翻訳を読み込むため、`bootstrap()` に依存しています。そのため、先に `bootstrap()` を実行するように、アプリのエントリーポイントを変更する必要があります。
通常、エントリーポイントは `main.tsx` です。新しいファイル (例: `bootstrap.tsx`) を作成し、代わりに `index.html` からそのファイルを参照するようにします。
### 1. ブートストラップ用のエントリーポイントを作成する
```tsx
// bootstrap.tsx
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';
async function loadTranslations(locale: string) {
return (await import(`./_gt/${locale}.json`)).default;
}
await bootstrap({
...gtConfig,
loadTranslations,
});
await import('./main.tsx');
```
デフォルトでは、`bootstrap()` は現在のロケールに合わせて `` 要素の `lang` 属性と `dir` 属性を自動的に更新します。
この挙動は `htmlTagOptions` で設定できます。
```tsx
await bootstrap({
...gtConfig,
loadTranslations,
htmlTagOptions: {
updateHtmlLangTag: true, // デフォルト: true
updateHtmlDirTag: false, // デフォルト: true
},
});
```
`gt-react/browser` の `updateHtmlTagLang` および `updateHtmlTagDir` ヘルパー関数を使うと、これらの属性をいつでも手動で更新できます。
### 2. `index.html` を更新する
`index.html` で、モジュールのエントリーポイントを `main.tsx` ではなく、新しいブートストラップファイルに向けるよう更新します。
```
src="/src/bootstrap.tsx"
```
### 3. `t()` をどこでも使う
```tsx
import { t } from 'gt-react/browser';
// モジュールレベル — インポート時に実行される
const navItems = [
{ label: t('Home'), path: '/' },
{ label: t('About'), path: '/about' },
{ label: t('Contact'), path: '/contact' },
];
export default function Nav() {
return (
);
}
```
**スタンドアロンのセットアップ:** `t()` は現在、`gt-react` システムの他の部分 (`` や `useGT` など) とは統合されていません。上で説明したブートストラップのセットアップを使用する必要があります。
***
## タグ付きテンプレートリテラル
`t` は、より自然な構文でタグ付きテンプレートリテラルとして使用できます。
```tsx
import { t } from 'gt-react/browser';
// これらは同じ意味です:
t('Hello, {name}!', { name: 'Alice' });
t`Hello, ${name}!`;
```
タグ付きテンプレートリテラル形式では、ICU スタイルのプレースホルダーやオプションオブジェクトが不要になり、変数はテンプレート式から直接補間されます.
### グローバル登録
`t`をファイルごとにインポートする代わりに、グローバルに登録することもできます。
```tsx
// アプリのエントリーポイントに記述
import "gt-react/macros";
```
これにより `globalThis.t` が設定され、明示的に import しなくても、どこからでもタグ付きテンプレートリテラルを利用できるようになります。
```tsx
// インポート不要
const labels = {
save: t`Save`,
cancel: t`Cancel`,
};
```
***
## リファレンス
### パラメータ
| 名前 | 型 | 説明 |
| ---------- | -------- | ------------------------- |
| `message` | `string` | 翻訳する文字列。 |
| `options?` | `object` | 省略可。補間に使用する変数の値を含むオブジェクト。 |
### 戻り値
`string` — 現在のロケールに対応する翻訳済みの文字列。翻訳が利用できない場合はソース文字列を返します。
***
## 変数
中かっこ構文を使って変数を渡せます。
```tsx
import { t } from 'gt-react/browser';
const message = t('Hello, {name}!', { name: 'Alice' });
// → "Hola, Alice!" (スペイン語の場合)
```
または、補間を自動で処理するタグ付きテンプレートリテラル形式を使用します。
```tsx
import { t } from 'gt-react/browser';
const message = t`Hello, ${name}!`;
// → "Hola, Alice!" (スペイン語、name = 'Alice' のとき)
```
変数の値自体は翻訳されず、翻訳されるのは周囲の文字列テンプレートだけです。
***
## 挙動
### 仕組み
`bootstrap()` は、アプリのモジュールがインポートされる前に、現在のロケールの翻訳をすべて非同期で読み込みます。読み込みが完了すると、`t()` は追加のオーバーヘッドなしで翻訳データを同期的に参照できます。
翻訳はモジュールの読み込み時に解決されるため、次の制約があります。
* **ロケールを切り替えるには、ページ全体の再読み込みが必要です。** 新しい翻訳を反映するには、ブラウザですべてのモジュールを再実行する必要があります。
* **これはクライアント側のアプリでのみ機能します。** モジュールレベルのコードはブラウザで読み込まれると再実行されるため、このパターンが成り立ちます。
### サーバーサイドでの動作
`t()` がサーバー環境 (`window` が未定義の環境) で呼び出されると、警告がログに出力され、元のソース文字列が返されます。サーバーサイドで翻訳するには、`useGT` などの React コンテキストベースのフックを使用してください。
***
## 例
### 定数ファイル
```tsx
// constants.ts
import { t } from 'gt-react/browser';
export const ERROR_MESSAGES = {
notFound: t('Page not found'),
unauthorized: t('You do not have permission to view this page'),
serverError: t('Something went wrong. Please try again later.'),
};
```
### ルーターの定義
```tsx
// routes.ts
import { t } from 'gt-react/browser';
export const routes = [
{ path: '/', label: t('Home') },
{ path: '/dashboard', label: t('Dashboard') },
{ path: '/settings', label: t('Settings') },
];
```
***
## 注意
* `t()` は `gt-react` から直接ではなく、`gt-react/browser` からインポートされます。
* `t()` を使用するモジュールが読み込まれる前に、`bootstrap()`` を呼び出しておく必要があります。
* **実験的機能です。** まだ `` やその他の `gt-react` のコンテキストベース機能とは統合されていません。
* ロケールを切り替えるには、ページ全体を再読み込みする必要があります。
## 開発ログ
* [gt-react@10.12.0](/devlog/gt-react_v10_12_0) — `t()` 関数の導入
* [gt-react@10.13.0](/devlog/gt-react_v10_13_0) — タグ付きテンプレートリテラル のサポート
## 次のステップ
* React コンポーネント内の文字列を翻訳するには、[`useGT`](/docs/react/api/strings/use-gt) を参照してください。
* 文字列を後で翻訳できるようにエンコードするには、[`msg`](/docs/react/api/strings/msg) を参照してください。