# gt-react: General Translation React SDK: 言語の切り替え
URL: https://generaltranslation.com/ja/docs/react/guides/languages.mdx
---
title: 言語の切り替え
description: React アプリで言語を設定して切り替える方法
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内の template を編集してください。 */}

言語切り替えを使用すると、ユーザーはアプリケーションのコンテンツに対する優先ロケールを変更できます。GT React では、シンプルなプログラムによる切り替えから、カスタム言語セレクター用のビルド済み UI コンポーネントまで、複数の方法を提供しています。


## 利用可能な方法

* **プログラムによる操作**: カスタムコントロール向けの [`useSetLocale`](/docs/react/api/helpers/use-set-locale) Hook
* **組み込み UI**: ドロップダウン付きの [`<LocaleSelector>`](/docs/react/api/components/locale-selector) コンポーネント
* **カスタム UI**: カスタムセレクターを作成するための [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) Hook

## `useSetLocale` Hook を使う

[`useSetLocale`](/docs/react/api/helpers/use-set-locale) Hook を使うと、アプリの言語を変更できます。

```tsx
import { useSetLocale } from 'gt-react';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>ロケールを設定</button>;
}
```

変更したいロケールを、Hook が返す関数の引数に渡すだけです。


## `<LocaleSelector>` コンポーネントを使う

[`<LocaleSelector>`](/docs/react/api/components/locale-selector) コンポーネントには、設定済みのロケールをすべて自動表示する、すぐに使えるドロップダウンが用意されています：

```tsx
import { LocaleSelector } from 'gt-react';

export default function MyComponent() {
  return <LocaleSelector />;
}
```

このコンポーネントは自動的に以下を行います。

* プロジェクトで設定されているすべてのロケールを表示
* 各ロケールをその言語のネイティブ名で表示
* 切り替えロジックを処理
* 現在の選択状態を維持


## `useLocaleSelector` Hookを使う

独自のロケールセレクターコンポーネントを作成する場合は、[`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector)を使用します。

```tsx
import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // 現在アクティブなロケール（例: 'en', 'es'）
    locales,             // プロジェクトがサポートするロケールの配列 ['en', 'es', 'fr']
    setLocale,           // ロケールを変更する関数: setLocale('es')
    getLocaleProperties  // ロケールの表示情報を取得する関数
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* 例: "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## 重要な注意点

### GTProvider が必要です

言語切り替えコンポーネントは、[`<GTProvider>`](/docs/react/api/components/gtprovider) 内で使用する必要があります。

```tsx
// ✅ 正しい
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ 誤り - プロバイダーの外側
<LanguageSwitcher />
```


## 次のステップ

* [動的コンテンツガイド](/docs/key-concepts/dynamic-content) - runtime でのコンテンツ翻訳
* API リファレンス:
  * [`useSetLocale` Hook](/docs/react/api/helpers/use-set-locale)
  * [`<LocaleSelector>` コンポーネント](/docs/react/api/components/locale-selector)
  * [`useLocaleSelector` Hook](/docs/react/api/helpers/use-locale-selector)