react-intlayer: Reactアプリケーションを国際化（i18n）するためのNPMパッケージ

Intlayerは、JavaScript開発者向けに特別に設計されたパッケージ群です。ReactやExpress.jsなどのフレームワークと互換性があります。

react-intlayerパッケージは、Reactアプリケーションを国際化することを可能にします。Reactの国際化のためのコンテキストプロバイダーやフックを提供します。

なぜReactアプリケーションを国際化するのか？

Reactアプリケーションを国際化することは、グローバルなユーザーに効果的に対応するために不可欠です。これにより、各ユーザーの好みの言語でコンテンツやメッセージを提供できるようになります。この機能はユーザー体験を向上させ、異なる言語背景を持つ人々にとってよりアクセスしやすく、関連性の高いアプリケーションにすることで、アプリケーションのリーチを広げます。

なぜIntlayerを統合するのか？

• JavaScriptによるコンテンツ管理：JavaScriptの柔軟性を活かして、効率的にコンテンツを定義・管理できます。
• 型安全な環境：TypeScriptを活用して、すべてのコンテンツ定義が正確でエラーのないものになるようにします。
• 統合されたコンテンツファイル：翻訳をそれぞれのコンポーネントの近くに保持し、保守性と明確さを向上させます。

インストール

お好みのパッケージマネージャーを使って必要なパッケージをインストールしてください：

npm install react-intlayer

使用例

Intlayerを使うと、コードベースのどこでも構造化された方法でコンテンツを宣言できます。

デフォルトでは、Intlayerは拡張子が .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} のファイルをスキャンします。

デフォルトの拡張子は、設定ファイルの contentDir プロパティを設定することで変更できます。

.├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

コンテンツの宣言

react-intlayer は intlayer パッケージ と連携して動作するように作られています。intlayer はコードのどこにでもコンテンツを宣言できるパッケージで、多言語コンテンツの宣言を構造化された辞書に変換し、アプリケーションにシームレスに統合します。

以下はコンテンツ宣言の例です：

import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "マイナス1台未満の車",      "-1": "マイナス1台の車",      "0": "車はありません",      "1": "1台の車",      ">5": "いくつかの車",      ">19": "多くの車",    }),  },} satisfies Dictionary;export default component1Content;

コード内でコンテンツを利用する

コンテンツを宣言したら、コード内で使用できます。以下はReactコンポーネントでコンテンツを使用する例です：

"use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // 関連するコンテンツ宣言を作成  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Reactアプリケーションの国際化を極める

Intlayerは、Reactアプリケーションの国際化を支援する多くの機能を提供します。

これらの機能の詳細については、ViteとReactアプリケーション向けのReact Internationalization (i18n) with Intlayer and Vite and Reactガイド、またはReact Create App向けのReact Internationalization (i18n) with Intlayer and React (CRA)ガイドを参照してください。

react-intlayerパッケージが提供する関数

react-intlayerパッケージは、アプリケーションの国際化を支援するいくつかの関数も提供しています。

• t() これらの機能の詳細については、Vite と React アプリケーション向けの React Internationalization (i18n) with Intlayer and Vite and React ガイド、または React Create App 向けの React Internationalization (i18n) with Intlayer and React (CRA) ガイドを参照してください。

react-intlayer パッケージで提供される関数

react-intlayer パッケージは、アプリケーションの国際化を支援するいくつかの関数も提供しています。

• t()
• useIntlayer()
• useDictionary()
• useLocale()

ドキュメント履歴

• 5.5.10 - 2025-06-29: 初期履歴