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

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

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

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

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

国際化

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);

このブログ記事では、React/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);

ファイル
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;

ファイル
store.js

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;

ファイル
i18n.js

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();
};

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

• reducers.jsファイルは、Reduxストアのステートを管理するReducerを定義します。
• store.jsファイルは、Reduxストアを作成し、react-intlライブラリを初期化します。
• mapStateToProps関数を使用して、Reduxストアから現在のロケールを取得します。

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

// 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;

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>
  );
};

これらのライブラリはそれぞれ長所と短所があります。ニーズに合ったライブラリを選択することが重要です。

多言語アプリを構築する際には、以下の点も考慮する必要があります。

• 言語の切り替え
  ユーザーが言語をどのように切り替えることができますか？
• URLのルーティング
  異なるロケールに対してURLをどのようにルーティングしますか？
• ローカライズ
  アプリケーションをどのようにローカライズしますか？日付と時刻の書式設定、数字の形式設定、通貨の形式設定などをどのように処理しますか？

React/ReduxとReact-Intl以外にも、多言語アプリを構築する方法があります。ニーズに合った方法を選択することが重要です。