React/ReduxとReact-Intl：パフォーマンスとスケーラビリティを兼ね備えた多言語アプリ開発

2024-06-15

React/Reduxと多言語（国際化）アプリ - アーキテクチャ

アプリケーションアーキテクチャ

このアーキテクチャは、以下のコンポーネントで構成されています。

Reactコンポーネント: アプリケーションのUIを構築します。
Reduxストア: アプリケーションの状態を管理します。
React-Intl: アプリケーションを多言語化するために使用されます。

国際化

React-Intlは、Reactアプリケーションを多言語化するためのライブラリです。メッセージの翻訳、言語のローカライズ、日付と時刻の書式設定など、さまざまな機能を提供します。

Reduxとの統合

Reduxを使用して、React-Intlの現在のロケールを管理できます。これにより、アプリケーション全体で一貫したロケールを維持することができます。

コード例

import React from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';

const MyComponent = ({ locale }) => (
  <div>
    <FormattedMessage id="app.title" />
    <p>Current locale: {locale}</p>
  </div>
);

const mapStateToProps = (state) => ({
  locale: state.intl.locale,
});

export default connect(mapStateToProps)(MyComponent);

この例では、MyComponentコンポーネントはFormattedMessageコンポーネントを使用して、app.titleメッセージを現在のロケールに翻訳します。mapStateToProps関数を使用して、Reduxストアから現在のロケールを取得します。

このブログ記事では、React/ReduxとReact-Intlライブラリを使用して多言語アプリを構築する方法について説明しました。このアーキテクチャにより、スケーラブルで保守しやすい多言語アプリを構築することができます。

ファイル: MyComponent.js

import React from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';

const MyComponent = ({ locale }) => (
  <div>
    <FormattedMessage id="app.title" />
    <p>Current locale: {locale}</p>
  </div>
);

const mapStateToProps = (state) => ({
  locale: state.intl.locale,
});

export default connect(mapStateToProps)(MyComponent);

ファイル: App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import MyComponent from './MyComponent';

const App = () => (
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

export default App;

import { createStore } from 'redux';
import rootReducer from './reducers';
import { loadTranslations } from './i18n';

const store = createStore(rootReducer);

loadTranslations().then(() => {
  store.dispatch({ type: '@@redux/INIT' });
});

export default store;

ファイル: reducers.js

import { combineReducers } from 'redux';
import { locale } from 'react-intl';

const rootReducer = combineReducers({
  locale,
});

export default rootReducer;

import { loadTranslations, configure } from 'react-intl';

const translations = {
  en: {
    'app.title': 'My App',
  },
  ja: {
    'app.title': '私のアプリ',
  },
};

configure({
  locale: 'en',
  messages: translations,
});

export const loadTranslations = () => {
  return Promise.resolve();
};

このコードは、以下の機能を提供します。

MyComponentコンポーネントは、FormattedMessageコンポーネントを使用して、app.titleメッセージを現在のロケールに翻訳します。
mapStateToProps関数を使用して、Reduxストアから現在のロケールを取得します。
store.jsファイルは、Reduxストアを作成し、react-intlライブラリを初期化します。
reducers.jsファイルは、Reduxストアのステートを管理するReducerを定義します。
i18n.jsファイルは、アプリケーションの翻訳を定義します。

このサンプルコードを参考に、独自の多言語アプリを構築することができます。

React/ReduxとReact-Intl以外の多言語アプリ構築方法

Next.jsとNext.js i18n: Next.jsは、Reactアプリケーションを構築するための人気のあるフレームワークです。Next.js i18nは、Next.jsアプリケーションを多言語化するための公式モジュールです。Next.js i18nは、ファイルベースの翻訳、自動ローカライズ、URLパラメータによるロケール切り替えなど、さまざまな機能を提供します。

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'ja'],
    defaultLocale: 'en',
  },
};

// Page.js
import { useTranslation } from 'next-i18n';

const Page = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('common:title')}</h1>
      <p>{t('common:description')}</p>
    </div>
  );
};

export default Page;

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-i18n',
      options: {
        locales: ['en', 'ja'],
        defaultLocale: 'en',
      },
    },
  ],
};

// page.js
import { useI18n } from 'gatsby-plugin-i18n';

const Page = () => {
  const { t } = useI18n();

  return (
    <div>
      <h1>{t('common.title')}</h1>
      <p>{t('common.description')}</p>
    </div>
  );
};

export default Page;

Lingui: Linguiは、React、Vue、Svelteなどのさまざまなフレームワークで使用できる汎用的な多言語ライブラリです。ファイルベースの翻訳、自動ローカライズ、コンポーネントベースの翻訳など、さまざまな機能を提供します。

import { useLingui } from '@lingui/react';

const MyComponent = () => {
  const { i18n } = useLingui();

  return (
    <div>
      <h1>{i18n._('app.title')}</h1>
      <p>{i18n._('common.description')}</p>
    </div>
  );
};

import i18n from 'i18next';
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('app.title')}</h1>
      <p>{t('common.description')}</p>
    </div>
  );
};