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

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

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


## 利用可能な方法

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

## `useSetLocale` フックを使う

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

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

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

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

フックが返す関数の引数に、切り替え先のロケールを指定するだけです。


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

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

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

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

このコンポーネントは自動的に次を行います:

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


## `useLocaleSelector` フックを使う

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

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

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-native/api/components/gtprovider) 内で使用する必要があります。

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

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


## 次のステップ

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