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
を開き、使用するフレーズとその翻訳を含むオブジェクトを追加します。
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
コンポーネントでそれらを使用する必要があります。
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つの言語から選択するだけです。
// -- 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で確認できます。