言語の切り替え
React アプリで言語を設定・切り替える方法
言語の切り替えにより、ユーザーはアプリケーションのコンテンツ表示に使う希望の locale を変更できます。GT React では、シンプルなプログラムによる切り替えから、カスタム言語セレクター向けのプリビルトの UI コンポーネントまで、複数の方法を提供しています。
利用可能な方法
- プログラム制御: カスタムコントロール向けの
useSetLocaleフック - プリセットUI: ドロップダウン付きの
<LocaleSelector>コンポーネント - カスタムUI: カスタムセレクターを作成するための
useLocaleSelectorフック
useSetLocale フックの使用
useSetLocale フックを使うと、アプリの言語を切り替えられます。
import { useSetLocale } from 'gt-react';
export default function MyComponent() {
const setLocale = useSetLocale();
return <button onClick={() => setLocale('en')}>ロケールを設定</button>;
}フックが返す関数に、変更したい locale を引数として渡すだけです。
<LocaleSelector> コンポーネントを使用する
<LocaleSelector> コンポーネントは、設定済みの対応ロケールを自動的にすべて表示する、すぐに使えるドロップダウンを提供します。
import { LocaleSelector } from 'gt-react';
export default function MyComponent() {
return <LocaleSelector />;
}このコンポーネントは自動的に以下を行います:
- プロジェクトで設定されたすべての対応ロケールを表示
- 各ロケールの言語での固有名称で表示
- 切り替え処理を実行
- 現在の選択状態を保持
useLocaleSelector フックの使用
カスタムのロケールセレクターコンポーネントを自作する場合は、useLocaleSelector を使用してください。
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> の内側で使用する必要があります。
// ✅ 正しい例
<GTProvider>
<LanguageSwitcher />
</GTProvider>
// ❌ 誤った例 - プロバイダーの外側
<LanguageSwitcher />次のステップ
- Dynamic Content Guide - 実行時のコンテンツ翻訳
- APIリファレンス:
このガイドはいかがですか?