# tanstack-start: TanStack Start Quickstart URL: https://generaltranslation.com/ja/docs/tanstack-start.mdx --- title: TanStack Start Quickstart description: gt-tanstack-start を使って TanStack Start アプリを国際化します --- **前提条件:** React 16.8 以降を使用する TanStack Start プロジェクト **実験的:** `gt-tanstack-start` は現在も開発中のため、まだ本番環境での使用は推奨されていません。 ## インストール `gt-tanstack-start`、`gt-react`、および `gt` CLI をインストールします。 ```bash npm i gt-tanstack-start gt-react npm i -D gt ``` ```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 ``` `gt` CLI がソースコード内の `` コンポーネントを検出できるようにするには、`gt-react` を直接依存関係として追加する必要があります。 ## 設定 ### `gt.config.json` プロジェクトルートに `gt.config.json` を作成します。 ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "ja"], "files": { "gt": { "output": "src/_gt/[locale].json" } } } ``` 翻訳ファイルは、Vite の動的インポートを機能させるため、**必ず** `src/` 内に配置する必要があります。`public/` では動作しません。 ### 翻訳ローダープロジェクトルートに `loadTranslations.ts` ファイルを作成します。 ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` ### root ルートのセットアップ GT を初期化し、翻訳を利用できるようにするため、`src/routes/__root.tsx` を更新します: ```tsx title="src/routes/__root.tsx" import { HeadContent, Scripts, createRootRoute, } from '@tanstack/react-router' import { initializeGT, GTProvider, getTranslations, getLocale, LocaleSelector, } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' // モジュールレベルで GT を初期化する initializeGT({ ...gtConfig, loadTranslations, }) export const Route = createRootRoute({ head: () => ({ meta: [ { charSet: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, ], }), loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, shellComponent: RootDocument, }) function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## 使い方コンテンツを翻訳するには、`` で囲みます。`gt-react` から `` をインポートします。 ```tsx title="src/routes/index.tsx" import { createFileRoute } from '@tanstack/react-router' import { T } from 'gt-react' export const Route = createFileRoute('/')({ component: Home }) function Home() { return (

Welcome to our app!

This content is automatically translated.

) } ``` `` は `gt-react` からインポートしてください (`gt-tanstack-start` ではありません) 。`gt` CLI は、翻訳対象のコンテンツを見つけるために `gt-react` のインポートをスキャンします。 ## 訳文を生成 ### General Translation を使う (推奨) 翻訳を生成するには、`gt translate` コマンドを実行します。 ```bash npx gt translate ``` これにより、コンテンツが General Translation API に送信され、翻訳済みの JSON ファイルが `src/_gt/` にダウンロードされます。 API の利用には環境変数が必要です。 ```bash title=".env" GT_API_KEY="your-api-key" GT_PROJECT_ID="your-project-id" ``` 無料のAPI キーは [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) で取得するか、次を実行してください。 ```bash npx gt auth ``` ### 手動翻訳訳文を自分で管理する場合: 1. 原文の言語ファイルを生成します: ```bash npx gt generate ``` 2. 生成された JSON ファイルを手動で翻訳します 3. それらを `src/_gt/{locale}.json` に配置します ## テスト開発サーバーを起動します。 ```bash npm run dev ``` ```bash yarn dev ``` ```bash bun run dev ``` ```bash pnpm dev ``` [localhost:3000](http://localhost:3000) にアクセスし、ロケールセレクターを使って言語を切り替えます。訳文はローカルの JSON ファイルから読み込まれるため、言語の切り替えはすぐに反映されます。 ## デプロイ build スクリプトに翻訳ステップを追加します: ```json title="package.json" { "scripts": { "build": "npx gt translate && vite build" } } ``` ## サンプルアプリ完全に動作するサンプルは、こちらをご覧ください: [tanstack-start-basic](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) *** ## 次のステップ * API をより詳しく知るには、[概要](/docs/tanstack-start/introduction)をご覧ください * ``、``、`` などの[変数コンポーネント](/docs/react/guides/variables)について学びましょう * [`` コンポーネント](/docs/react/api/components/t)の API リファレンスを確認してください