# General Translation React SDKs (gt-react, gt-next): TanStack Start クイックスタート URL: https://generaltranslation.com/ja/docs/react/tanstack-start-quickstart.mdx --- title: TanStack Start クイックスタート description: "`gt-tanstack-start` を使って TanStack Start アプリに General Translation を追加し、最初のコンテンツを翻訳します。" related: links: - /docs/react/guides/translating-jsx - /docs/react/guides/translating-strings - /docs/react/guides/managing-locales - /docs/react/guides/formatting-variables --- `gt-tanstack-start` は、TanStack Start アプリを自動で国際化対応にします。`root route` で General Translation を初期化し、リクエストのロケールを判定して、ルートの loader から `GTProvider` をハイドレートします。このクイックスタートは TanStack Start アプリ向けです。通常の React SPA には、[React クイックスタート](/docs/react/react-quickstart) を使用してください。 `gt-tanstack-start` は実験的機能であり、破壊的変更が入る可能性があります。現時点では本番環境での使用は推奨されていません。 ## クイックスタート [#quickstart] パッケージをインストールし、設定ファイルと翻訳ローダーを作成して、root routeを設定し、コンテンツを翻訳対象として指定して、翻訳を生成します。 ### 1. `gt-tanstack-start` をインストール依存関係として `gt-tanstack-start` と `gt-react` を、開発依存関係として [`gt` CLI](/docs/cli/quickstart) をインストールします。[``](/docs/react/reference/components/t) コンポーネントをソース内で CLI が検出できるようにするため、`gt-react` を直接追加する必要があります。 ```bash npm install gt-tanstack-start gt-react && npm install gt --save-dev ``` ```bash yarn add gt-tanstack-start gt-react && yarn add --dev gt ``` ```bash bun add gt-tanstack-start gt-react && bun add --dev gt ``` ```bash pnpm add gt-tanstack-start gt-react && pnpm add --save-dev gt ``` ### 2. `gt.config.json` を作成するプロジェクトルートに `gt.config.json` ファイルを作成します。このファイルでは、ソース言語、対象ロケール、および翻訳ファイルの出力先を定義します。 ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "ja"], "files": { "gt": { "output": "src/_gt/[locale].json" } } } ``` * `defaultLocale` — アプリを記述している言語。 * `locales` — 翻訳先の言語です。[対応ロケール](/docs/platform/dashboard/reference/supported-locales)から選択してください。 * `files.gt.output` — CLI が翻訳ファイルを書き出す場所です。Vite でインポートできるよう、`src/` 配下に置いてください。`public/` 内のファイルは解決できません。 ### 3. 翻訳ローダーを作成する実行時にロケールの翻訳ファイルをインポートする `loadTranslations.ts` ファイルを作成します。 ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` ### 4. root route をセットアップする `src/routes/__root.tsx` で、モジュールレベルで [`initializeGT`](/docs/node/reference/functions/initialize-gt) を呼び出し、`parseLocale` でロケールを判定し、ルートの loader で翻訳スナップショットを読み込みます。`locale` と `translations` を `GTProvider` に渡します。 ```tsx title="src/routes/__root.tsx" import { HeadContent, Scripts, createRootRoute, } from '@tanstack/react-router'; import { initializeGT, GTProvider, parseLocale, getTranslationsSnapshot, LocaleSelector, } from 'gt-tanstack-start'; import gtConfig from '../../gt.config.json'; import loadTranslations from '../../loadTranslations'; // General Translation をモジュールレベルで一度だけ初期化する initializeGT({ ...gtConfig, loadTranslations }); export const Route = createRootRoute({ loader: async () => { const locale = parseLocale(); return { locale, translations: await getTranslationsSnapshot(locale), }; }, shellComponent: RootDocument, }); function RootDocument({ children }: { children: React.ReactNode }) { const { locale, translations } = Route.useLoaderData(); return ( {children} ); } ``` `parseLocale` は、サーバーではリクエストの cookie と header からロケールを読み取り、ブラウザーでは cookie から読み取ります。`GTProvider` には `locale` と `translations` の両方が必要です。 ### 5. コンテンツを翻訳対象としてマークするインプレースで翻訳するには、JSX を `` コンポーネントで囲みます。CLI がソースコードをスキャンする際に検出できるよう、`gt-react` から `` と [`useGT`](/docs/react/reference/hooks/use-gt) をインポートしてください。 ```tsx title="src/routes/index.tsx" import { createFileRoute } from '@tanstack/react-router'; import { T, useGT } from 'gt-react'; export const Route = createFileRoute('/')({ component: Home }); function Home() { const gt = useGT(); return (

Welcome to my app

This content is translated automatically.

); } ``` `useGT()` は翻訳関数を直接返すため、`const gt = useGT();` のように呼び出します。 ### 6. 翻訳を生成する CLI を実行して、General Translation API 経由でプロジェクトの翻訳を生成します。 ```bash npx gt translate ``` 本番ビルドで常に最新の翻訳が使われるよう、このコマンドをビルドスクリプトに追加してください。 ```json title="package.json" { "scripts": { "build": "npx gt translate && vite build" } } ``` *注: `npx gt translate` の実行には、環境変数 `GT_PROJECT_ID` と `GT_API_KEY` に設定した Project ID と本番用の API キーが必要です。これらを取得するには、`npx gt auth` を実行するか、[ダッシュボード](/docs/platform/dashboard/get-started) にアクセスしてください。* ## Next steps - /docs/react/guides/translating-jsx - /docs/react/guides/translating-strings - /docs/react/guides/managing-locales - /docs/react/guides/formatting-variables