react-i18next を型の恩恵を受けながら使う方法

はじめに

こんにちは。最近、初めて鰹節から出汁を取った kimizuy です。

今回は react-i18next を使う際に、言語データを持つ JSON のキーから型を生成する方法を紹介します。この記事を書くにあたって公式ドキュメントの TypeScript の章をかなり参考にしています。

react-i18next とは

react-i18next documentation

i18next という多言語化対応ライブラリをさらに React で使えるようにしたライブラリです。言語データは JSON で管理します。例えば日英対応する場合は次のようなファイルを作りそれぞれの言語データを管理します。

// src/locales/ja/home.json
{
  "home": {
    "title1": "すごいタイトル1",
    "title2": "すごいタイトル2"
  }
}

// src/locales/en/home.json
{
  "home": {
    "title1": "Awesome title1",
    "title2": "Awesome title2"
  }
}

今回は以下のように react-i18next の t() 関数から言語データを呼び出すときにキーの型が効くようになり、補完によってミスを防ぎつつ迅速に実装ができます。

const Home: React.VFC = () => {
  const { t } = useTranslation()

  return (
    <div>
      <h1>
        {t('home.title1')} // ← 'home.title1' の型が効く
      </h1>
    </div>
  )}

tldr

さっそくですが以下の内容の型定義ファイル（d.ts）を追加します（例: react-i18next.d.ts）。

import 'react-i18next'
import ns1 from './src/locales/ja/home.json'
import ns2 from './src/locales/ja/news.json'

declare module 'react-i18next' {
  interface CustomTypeOptions {
    defaultNS: 'ns1'
    resources: {
      ns1: typeof ns1
      ns2: typeof ns2
    }
  }
}

ns は「name space」の略です。上記の場合はデフォルトの言語、つまり日本語のデータファイルからキーを設定するようにしました。

useTranslation() の引数が空の場合はデフォルトの JSON ファイルを参照します。別のファイルに切り替えたい場合は useTranslation() の引数を以下のように変更します。

  const { t } = useTranslation('ns2') // news.json を参照する

おわりに

型定義ファイルを追加することで JSON ファイルのキーを型として利用する方法を紹介しました。型が効く、すなわち補完が効くようになることは非常に強力です。TypeScript の機能をフルに活用して DX 向上&保守性の高いプロダクトを作りましょう！

以上、お読みいただきありがとうございました。