React-IntlとのReactの国際化

複数の異なる言語への翻訳が必要なWebアプリケーションを作成している場合、これを手動で実装するのは難しい場合があります。そのため、多くの場合、国際化（i18n）ライブラリが使用されます。これにより、別の文字列を追加するのと同じくらい簡単に翻訳を追加できます。

React-Intl は、 FormatJS ライブラリセットの一部であり、まさにそれを行うための優れたライブラリです。 Yahooの人々によって書かれ、文字列の翻訳、日付、数値のフォーマットなどを可能にするいくつかのReactコンポーネントを提供します。

インストール

まず、 Create React App を使用して新しいプロジェクトを作成し、react-intlパッケージを追加します。

$ yarn create react-app i18n
$ cd i18n
$ yarn add react-intl

翻訳の追加

まず、src/App.jsを開き、使用するフレーズとその翻訳を含むオブジェクトを追加します。

src / App.js

import React from "react";

const messages = {
  en: {
    greeting: "Hello {name}! How are you?",
    time: "The time is {t, time, short}.",
    date: "The date is {d, date}."
  },
  es: {
    greeting: "¡Hola {name}! ¿Cómo estás?",
    time: "La hora es {t, time, short}.",
    date: "La fecha es {d, date}."
  },
  fr: {
    greeting: "Bonjour {name}! Comment ça va?",
    time: "Il est {t, time, short}.",
    date: "La date est {d, date}."
  },
  de: {
    greeting: "Hallo {name}! Wie geht's?",
    time: "Es ist {t, time, short} Uhr.",
    date: "Das Datum ist {d, date}."
  }
};

中括弧（{および}）で囲まれた引数を使用すると、データを入力し、データのフォーマット方法を定義できます。詳細については、メッセージ構文のドキュメントを参照してください。

コンポーネントの作成

翻訳を作成したので、Appコンポーネントでそれらを使用する必要があります。

src / App.js

import React, { useState } from "react";
import { IntlProvider, FormattedMessage } from "react-intl";

const messages = {
  // -- snip --
};

function App() {
  const [name, setName] = useState("");

  const handleChange = e => {
    setName(e.target.value);
  };

  const locale = "en";

  return (
    <>
      <input placeholder="Enter name" onChange={handleChange} />

      <IntlProvider locale={locale} messages={messages[locale]}>
        <p>
          <FormattedMessage id="greeting" values={{ name }} />
          <br />
          <FormattedMessage id="time" values={{ t: Date.now() }} />
          <br />
          <FormattedMessage id="date" values={{ d: Date.now() }} />
        </p>
      </IntlProvider>
    </>
  );
}

export default App;

素晴らしい！ <IntlProvider>を追加し、使用するロケールとメッセージを渡し、<FormattedMessage>を使用してテキストをレンダリングしました。残念ながら、私たちが目にしているのは英語だけです！これは、ロケールを変更する方法が必要なためです。これは非常に簡単です。コンポーネントの状態にlocale値を追加し、<select>要素を追加して4つの言語から選択するだけです。

src / App.js

// -- snip --

function App() {
  const [name, setName] = useState("");

  const handleChange = e => {
    setName(e.target.value);
  };

  const [locale, setLocale] = useState("en");

  const handleSelect = e => {
    setLocale(e.target.value);
  };

  return (
    <>
      <input placeholder="Enter name" onChange={handleChange} />
      <select onChange={handleSelect} defaultValue={locale}>
        {["en", "es", "fr", "de"].map(l => (
          <option key={l}>{l}</option>
        ))}
      </select>

      <IntlProvider locale={locale} messages={messages[locale]}>
        <p>
          <FormattedMessage id="greeting" values={{ name }} />
          <br />
          <FormattedMessage id="time" values={{ t: Date.now() }} />
          <br />
          <FormattedMessage id="date" values={{ d: Date.now() }} />
        </p>
      </IntlProvider>
    </>
  );
}

export default App;

それでおしまい！

まとめ

これは、react-intlの使い方の簡単な例です。これは非常に強力なライブラリであり、それらのドキュメントを確認することを強くお勧めします。

この投稿の完全なコードは、CodeSandboxで確認できます。