Reactに多言語対応を自力で実装するよ！

React Advent Calendar 2022 9日目の記事です。

早速ですがみなさん、Reactに多言語対応ってどうやって実装してますか？いろいろな方の記事を拝見すると、どうやら巷ではi18nextを使うのが一般的のようです。しかし本記事ではあえての車輪の再開発！hookを使った自力での実装について書いていきます。

仕様を決める

Reactに多言語対応を実装するにあたり、どのような機能にするか仕様を決めていきます。まず初めに対応言語ですが、日本語と英語に対応することにします。選択した言語の情報はhookに持たせるとして、ユーザーが再訪問した時に備えてCookieにも保存することにします。またサイト内の遷移を考慮して、言語切替ボタンはコンポーネント化したヘッダーに作ります。

パッケージのインストール

今回は自作ということで、多言語系のパッケージは使いません。Cookie管理用にreact-cookieと、その他ルーティング用のreact-router-domおよびデザインライブラリとしてmui関連のパッケージをインストールします。コマンドはこんな感じです。

yarn create react-app my_react_app_20221208_language --template typescript

cd .\my_react_app_20221208_language

yarn add react-router-dom
yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material
yarn add react-cookie

フォルダ構成とソースコード

次にReactのフォルダ構成です。このあたりは作り手の好みになってくると思いますが、ここではsrc直下にconponents、context、pagesというフォルダを作り、conponentsフォルダにヘッダー部品、contextにhook（と関連する型定義）、pagesに画面をそれぞれ配置します。

下記に/src/pages/Index.tsxファイルの一部を記載します。useGlobalSettingから言語フラグ（isEnglish）を取り出して言語を判定しています。

 const Index: React.FC = () => {

  const {isEnglish} = useGlobalSetting();

  return (
    <GlobalHeader>
      <Grid container>
        <Grid item xs={12}>
          <StyledHeaderContent>
            <StyledHeaderSpan>
              {isEnglish && "Hello"}
              {!isEnglish && "こんにちは"}
            </StyledHeaderSpan>
          </StyledHeaderContent>
        </Grid>
      </Grid>
      <Grid container>
        <Grid item xs={12}>
          <span>index</span>
        </Grid>
        <Grid item xs={12}>
          <a href="/home">to home</a>
        </Grid>
      </Grid>
    </GlobalHeader>
  );
}

export default Index;

hook（/src/contexy/GlobalContext.tsx）の中身はこのようになっていて、useCookiesを使って言語切り替えの都度Cookieに設定を書き込んでいます。

export const GlobalContextProvider = (props: IGlobalContextProviderParams) => {

  const [cookies, setCookie] = useCookies(["language"]);
  const [isEnglish, setIsEnglish] = React.useState<boolean>((cookies.language == "en"));

  const setLanguage = (): void => {
    setIsEnglish(!isEnglish);
    var expDate = new Date();
    expDate.setDate(expDate.getDate() + 365);
    setCookie("language", (!isEnglish ? "en" : "ja"), {expires: expDate, path: '/'});
  }

  return (
    <GlobalContext.Provider value={{
      isEnglish,
      setLanguage,
    }}>{props.children}
    </GlobalContext.Provider>
  );
};

export default GlobalContextProvider;

デモ

それでは作成したプロジェクトを実際に動かしてみましょう。

言語切り替えおよび、ページ遷移後も言語設定が引き継がれている様子が確認できると思います。

まとめ

今回はReactに多言語対応を自力で実装する方法を紹介しました。ソースコードはGitに置いておきますので、よければ開発の参考にしてください。
github.com

というわけで、React Advent Calendar 2022 9日目の記事は以上です。
ここまで閲覧いただきありがとうございました。それでは！