言語切り替えと翻訳の遅延ロード
localeの切り替えを実装し、初期サイズを抑えるために翻訳bundleを必要に応じて読み込みます。
「言語切り替えと翻訳の遅延ロード」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
シンプルな言語スイッチャー
function LanguageSwitcher() {
const { i18n } = useTranslation();
return (
<div>
{['en', 'tr', 'fr'].map(lng => (
<button
key={lng}
onClick={() => i18n.changeLanguage(lng)}
style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }}
>
{lng.toUpperCase()}
</button>
))}
</div>
);
}言語選択の永続化
i18n.init({
detection: {
order: ['localStorage', 'navigator'],
caches: ['localStorage'],
},
});翻訳を遅延読み込みする理由
HTTPバックエンドの設定
import Backend from 'i18next-http-backend';
i18n.use(Backend).init({
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
ns: ['common', 'auth'],
defaultNS: 'common',
});翻訳ファイルの追加
public/locales/
en/common.json
en/auth.json
tr/common.json
tr/auth.json言語切り替え中の読み込み状態の表示
const [switching, setSwitching] = useState(false);
const change = async (lng) => {
setSwitching(true);
await i18n.changeLanguage(lng);
setSwitching(false);
};特定の名前空間の遅延読み込み
useEffect(() => {
i18n.loadNamespaces('dashboard');
}, []);翻訳用CDN
backend: {
loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
}URL内のロケール
確認
まとめ
コース完了
よくある質問
「言語切り替えと翻訳の遅延ロード」レッスンは無料ですか？
はい。「言語切り替えと翻訳の遅延ロード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「言語切り替えと翻訳の遅延ロード」で何を学びますか？
localeの切り替えを実装し、初期サイズを抑えるために翻訳bundleを必要に応じて読み込みます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「言語切り替えと翻訳の遅延ロード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- react-i18nextのセットアップ
- useTranslation Hookの使い方
- 複数形とInterpolation
- 言語切り替えと翻訳の遅延ロード