# General Translation React SDKs (gt-react, gt-next): ロケールの管理 URL: https://generaltranslation.com/ja/docs/react/guides/managing-locales.mdx --- title: ロケールの管理 description: React、Next.js、TanStack Start、React Native で、General Translation を使ってユーザーが言語を切り替え、アクティブなロケールを取得する方法。 related: links: - /docs/react/guides/translating-jsx - /docs/react/guides/translating-strings - /docs/react/guides/configuring - /docs/react/guides/storing-translations --- アプリでは、対応するロケールを宣言し、ユーザーがその中から選択できるようにし、アクティブなロケールを取得してそれに応じて表示します。このガイドでは、その各要素を説明します。 ## 対応ロケールを宣言する [#declare] `gt.config.json` にデフォルトのロケールと対象ロケールを記載します。これらは、アプリで切り替え可能なロケールです。 ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "fr", "de"] } ``` React、TanStack Start、React Native では、これらの値を初期化時の呼び出しに渡します。Next.js では、`withGTConfig` プラグインが `gt.config.json` を自動的に読み込むため、手動で初期化する必要はありません。各セットアップについては、[General Translation の設定](/docs/react/guides/configuring)を参照してください。 ## 言語切り替え機能を追加する [#switcher] 対応ロケールを選べる、すぐに使えるドロップダウンとして [``](/docs/react/reference/components/locale-selector) を追加できます。ユーザーが項目を選ぶと、アクティブなロケールが切り替わります。 ```tsx import { LocaleSelector } from 'gt-react'; ; ``` ```tsx import { LocaleSelector } from 'gt-next'; ; ``` ```tsx import { LocaleSelector } from 'gt-tanstack-start'; ; ``` *注: React Native にはビルド済みの `` コンポーネントは用意されていません。以下のように、[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (または [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) と [`useLocales`](/docs/react/reference/hooks/use-locales)) を使って独自に実装してください。* 独自の切り替え機能を実装する場合は、ロケールの変更に `useSetLocale` を使い、選択肢の一覧取得に `useLocales` を使います。これらのフックはすべてのフレームワークで利用できるため、お使いのフレームワークのパッケージから import してください。 ```tsx import { useLocale, useLocales, useSetLocale } from 'gt-react'; function Switcher() { const locale = useLocale(); const locales = useLocales(); const setLocale = useSetLocale(); return ( ); } ``` *注: ロケールを変更すると、その選択内容は保持されます。Web (React、Next.js、TanStack Start) では cookie に、React Native では native store に保存され、その後リロードされて新しい翻訳が反映されます。* ## アクティブなロケールを読み取る [#read] コンポーネント内でロケールの状態を読み取るには、フックを使用します。 * [`useLocale`](/docs/react/reference/hooks/use-locale) はアクティブなロケールコードを返します。 * [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) はソースロケールを返します。 * [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) は、ページのレイアウトに使用する `'ltr'` または `'rtl'` を返します。 * [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) は、名前などのロケールの表示用メタデータを返します。 *注: `gt-tanstack-start` は現在 `useLocaleDirection` と `useLocaleProperties` をエクスポートしていません。代わりに、`generaltranslation` の `getLocaleProperties` を使ってロケールのメタデータを取得してください。* これらのフックは、同期的な App Router サーバーコンポーネントで動作します。非同期の App Router コンポーネントでは、代わりに `gt-next/server` の [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) と [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) を使用してください。 ```tsx import { getLocale, getLocaleDirection } from 'gt-next/server'; async function Layout() { const locale = await getLocale(); const dir = await getLocaleDirection(); return ; } ``` *注: Next.js では、リクエスト時のロケール検出とその保持はミドルウェアで行われます。詳しくは、Next.js フレームワークのページを参照してください。* 完全な一覧については、[Hooks リファレンス](/docs/react/reference/hooks/use-locale)を参照してください。 ## Next steps - /docs/react/guides/translating-jsx - /docs/react/guides/translating-strings - /docs/react/guides/configuring - /docs/react/guides/storing-translations