🙌

constantsで多言語対応用の値を定義したい

かねこ

2024/04/03に公開

こんにちわ、かねこです。

今回は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株式会社ではエンジニアを積極採用中です！
フロントエンドエンジニア、バックエンドエンジニア、クラウドインフラエンジニアなど職種問わず、様々な技術領域にチャレンジできます。また、PM（プロジェクトマネージャー）や EM（エンジニアリングマネージャー）のキャリアパスも用意しています。
興味のある方は Wantedlyの募集をぜひ読んでください。

また協力会社として、エンジニア未経験の方や将来フリーランスを見据えている方向けのSES企業が立ちあがりました。
未経験だけど、エンジニアやフリーランスに興味がある！という方は是非下記の募集を読んでみてください！

toraco株式会社のテックブログPublication

Webアプリケーションの受託開発を専門とするtoraco株式会社のテックブログです。

どういうこと！？

解決方法

最後に

Discussion