こんにちわ、かねこです。
今回はconstantsで多言語対応に沿った値を定義していた際に言語切り替えした後にi18nextで対応した箇所が動的に言語切り替えされなかったので、それの対処方法について自分自身のメモがてら記事に残そうと思います〜
どういうこと！？
まずそもそもお前は何を言ってんねんって話だと思うので、起こっていた問題点について話せたらと思います。
私が参画する案件ではよく、テキストや定数だったりをconstantsで定義しています。
constantsとはざっくり言うと、コード内で使用される値を一つのファイルにまとめて書く方法で、
コード内で使用される値を一元管理できるので、変更が必要になった場合にも、一箇所で変更するだけで済むため、コードの保守性を高めることができるので、結構おすすめです✨
んで、今回はconstantsの中で多言語対応した値を定義していました。
src/constants/index.ts
import { t } from "i18next";
export const TOP_TITLE = t("top.title")
こんな感じで、多言語対応した値を定義していたのですが、i18nextのchangeLanguageを実行して日本語と英語を切り替えたところ、言語切り替えが即座に反映されませんでした、、、
理由としては単純にreactの関数ではないから言語を切り替えてもコンポーネントが自動的に再レンダリングされないというだけでした笑←そりゃそう
とはいえこれだと困っちゃうので、次に解決方法についてです
解決方法
これもそりゃそうだって話ではあるんですが、constantsの定義方法とconstantsの呼び出しをちょっと工夫してみました！
src/constants/index.ts
export const TOP_TITLE = "top.title"
src/pages/index.tsx
import { useTranslation } from 'react-i18next'
import { TOP_TITLE } from 'constants'
const TopPage = () => {
const { t } = useTranslation();
return (
<div>
<h2>{t(TOP_TITLE)}</h2>
</div>
)
}
export default TopPage
解説としては、単純にconstantsでは、文字列として定義して、reactのpage側の実装で辞書ファイルの値を参照するに定義するようにしました〜
最後に
今回は、constantsで多言語対応用の値を定義する方法について紹介させていただきました。
今回紹介した方法を使えば、constantsを使って辞書ファイルの値を定義できるので、よかったら参考にしてみてください！
今後もこういった自分の困りポイントだったり設定手順だったりを発信していけたらなと思います🐈
toraco株式会社では2024年11月1日にエンジニア向けのコミュニティを立ち上げました。
Discord のサーバーで運営しており、以下のリンクから無料で参加できます。コミュニティ内では以下のような投稿・活動がされます！
Discussion