言語の切り替え
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リファレンス:
このガイドはどうでしたか？