■ はじめに i18nの定義と目的 ローカリゼーションとの違い i18n(Internationalization: 国際化) l10n(Localization: 地域化) i18nとl10nの関係 react-i18nextとは ■ React-i18nextの基礎 ライブラリのインストール方法 基本的な設定と利用 (TypeScript版) 基本的な設定 補足:ReactのXSS対策 コンポーネントでの使用例 ■ 言語リソースの構築 業務ドメイン領域の言葉の定義について 例: 測量図の英訳候補 公的な定義を基にした言葉の選定 ● 日本国憲法や条例を参照する ● 外務省など省庁の公式英語版…
i18next を使って国際化対応をしていてユーザーの設定した言語を永続化するのに i18next-browser-languagedetector を使うとめちゃくちゃ簡単だったって話 環境 i18next 23.4.1 react-i18next 13.0.3 react 18.2.0 typescript 5.0.2 i18next-browser-languagedetector の導入 $ npm i i18next-browser-languagedetector i18next-browser-languagedetector の設定 .use でライブラリを読み込ませて、ini…
React で i18next を使った国際化対応したアプリを開発していて、言語切り替えボタンを押しても言語が切り替わらない問題にハマったのでメモ 環境 i18next 23.4.1 react-i18next 13.0.3 react 18.2.0 typescript 5.0.2 setup i18next $ npm install i18next $ npm install react-i18next ユーザーの環境からいい感じに言語設定を取得する i18next-browser-languagedetector というパッケージもあるが今回の例では使用しない i18next conf…
www.i18next.com { "key": "{{what}} is {{how}}" } i18next.t('key', { what: 'i18next', how: 'great' }); // -> "i18next is great" こんなかんじでいける