React Intl は、React アプリケーションを国際化するコンポーネントとユーティリティのセットを提供する人気のライブラリです。国際化は i18n とも呼ばれ、アプリケーションをさまざまな言語や文化に適応させるプロセスです。
ReactIntl を使用すると、React アプリケーションで複数の言語とロケールを簡単にサポートできます。
React Intl のインストール
React Intl ライブラリを使用するには、まずインストールする必要があります。これは、npm、yarn、pnpm という複数のパッケージ マネージャーを使用して行うことができます。
npm を使用してインストールするには、ターミナルでこのコマンドを実行します。
npm install react-intl
yarn を使用してインストールするには、このコマンドを実行します。
yarn add react-intl
React Intl ライブラリを使用する方法
React Intl ライブラリをインストールしたら、そのコンポーネントと機能をアプリケーションで使用できます。React Intl は、JavaScript Intl API と同様の機能を備えています。
React Intl ライブラリによって提供される貴重なコンポーネントには、FormattedMessageとIntlProviderコンポーネントがあります。
たとえば、次のようになります。
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
IntlProvider の使用例を次に示します。
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
<App />
</IntlProvider>
</React.StrictMode>
);
たとえば、次のようになります。
import React from "react";
import { FormattedMessage } from "react-intl";
function App() {
return (
<div>
<p>
<FormattedMessage
id="greeting"
defaultMessage="Good morning {name}"
values={{ name: 'John'}}
/>
</p>
</div>
);
}
export default App;
このコード ブロックでは、FormattedMessageコンポーネントのidプロパティがmessagesInFrenchオブジェクトのgreetingキーを使用し、valuesプロパティが{name}プレースホルダーを値「John」に置き換えます。
FormattedNumber コンポーネントを使用した数値の書式設定
React Intl は、FormattedNumberコンポーネントも提供しており、これを使用して現在のロケールに基づいて数値の書式を設定できます。コンポーネントは、スタイル、通貨、最小桁数と最大桁数など、書式設定をカスタマイズするためのさまざまなプロパティを受け取ります。
次に例をいくつか示します。
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
Decimal: <FormattedNumber value={123.456} />
</p>
<p>
Percent: <FormattedNumber value={123.456} />
</p>
</div>
);
}
export default App;
この例では、書式設定する数値を指定するvalueプロパティを受け取るFormattedNumberコンポーネントを使用しています。
styleプロパティを使用すると、書式設定された数値の外観をカスタマイズできます。styleプロパティは、decimal、percent、またはcurrencyに設定できます。
styleプロパティを currency に設定すると、FormattedNumberコンポーネントはcurrencyプロパティで指定されたコードを使用して数値を通貨値として書式設定します:
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
Price: <FormattedNumber value={123.456} currency="USD" />
</p>
</div>
);
}
export default App;
コード ブロックの上記のFormattedNumberコンポーネントは、currencyスタイルとUSD通貨コードを使用して数値を書式設定しています。
minimumFractionDigitsとmaximumFractionDigitsプロパティを使用すると、特定の小数点以下の桁数で数値を書式設定することもできます。
minimumFractionDigitsプロパティは、表示する小数点以下の桁数の最小数を指定します。対照的に、maximumFractionDigitsプロパティは、小数点以下の桁数の最大数を指定します。
数値の小数点以下の桁数が指定されたminimumFractionDigitsよりも少ない場合、React Intl はそれをゼロで埋めます。数値の小数点以下の桁数が指定されたmaximumFractionDigitsよりも多い場合、ライブラリはその数値を四捨五入します。
これらのプロパティを使用する方法を次に示す例を紹介します。
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
<FormattedNumber
value={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
export default App;
FormattedDate コンポーネントを使用した日付の書式設定
React Intl を使用すると、一貫性があり、読みやすい方法で日付を書式設定できます。FormattedDateコンポーネントは、日付をフォーマットするためのシンプルで効果的な方法を提供します。これは、Moment.js のような日付をフォーマットする日付時刻ライブラリと同様に機能します。
FormattedDate コンポーネントは、value、day、month、year などの多くのプロパティを受け取ります。value プロパティは、書式設定する日付を受け取り、他のプロパティはその書式設定を構成します。
たとえば、次のようになります。
import React from "react";
import { FormattedDate } from "react-intl";
function App() {
const today = new Date();
return (
<div>
<p>
Today's date is
<FormattedDate
value={today}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}
export default App;
この例では、valueプロパティは現在の日付を使用しています。また、day、month,およびyearプロパティを使用して、年、月、および日が長い形式で表示されるように指定します。
day、month、year と並んで、他のプロパティも日付の外観をフォーマットします。次に、プロパティとそれらが受け入れる値を示します。
- year: "numeric", "2-digit"
- month: "numeric", "2-digit", "narrow", "short", "long"
- day: "numeric", "2-digit"
- hour: "numeric", "2-digit"
- minute: "numeric", "2-digit"
- second: "numeric", "2-digit"
- timeZoneName: "short", "long"
FormattedDateコンポーネントを使用して時刻をフォーマットして表示することもできます:
import React from "react";
import { FormattedDate } from "react-intl";
function App() {
const today = new Date();
return (
<div>
<p>
The time is
<FormattedDate
value={today}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}
export default App;
より広いオーディエンスに向けて React アプリケーションを国際化する
React アプリケーションに React-Intl ライブラリをインストールして設定する方法を学習しました。React-intl を使用すると、React アプリケーションの数字、日付、通貨を簡単にフォーマットできます。FormattedMessage、FormattedNumber、FormattedDate コンポーネントを使用して、ユーザーのロケールに基づいてデータをフォーマットできます。
React デベロッパーは、深刻な結果を招きかねない間違いを犯すことがよくあります。たとえば、状態を適切に更新できない場合などです。これらの一般的な間違いを認識し、早期に修正して、コストのかかる問題を回避することが重要です。
コメントする