intlayer: 多言語辞書（i18n）管理のためのNPMパッケージ

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

intlayerパッケージは、コードのどこでもコンテンツを宣言できるようにします。多言語コンテンツの宣言を構造化された辞書に変換し、アプリケーションにシームレスに統合します。TypeScriptを使うことで、Intlayerはより強力で効率的な開発ツールを提供し、開発を向上させます。

なぜIntlayerを統合するのか？

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

インストール

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

npm install intlayer

Intlayerの設定

Intlayerはプロジェクトを設定するための設定ファイルを提供します。このファイルをプロジェクトのルートに配置してください。

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

使用例

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

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

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

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

コンテンツの宣言

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

import { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "Minus one car",      "0": "No cars",      "1": "One car",      ">19": "多くの車",    }),  },} satisfies Dictionary;export default clientComponentContent;

辞書をビルドする

intlayer-cli を使用して辞書をビルドできます。

npx intlayer dictionaries build

このコマンドはすべての *.content.* ファイルをスキャンし、コンパイルして、intlayer.config.ts で指定されたディレクトリ（デフォルトは ./.intlayer）に結果を書き込みます。

典型的な出力例は以下のようになります：

.└── .intlayer    ├── dictionary  # コンテンツの辞書を含むディレクトリ    │   ├── client-component.json    │   └── server-component.json    ├── main  # アプリケーションで使用する辞書のエントリーポイントを含むディレクトリ    │   ├── dictionary.cjs    │   └── dictionary.mjs    └── types  # 辞書の自動生成された型定義を含むディレクトリ        ├── intlayer.d.ts  # Intlayerの自動生成型定義を含むファイル        ├── client-component.d.ts        └── server-component.d.ts

i18next リソースのビルド

Intlayerはi18next用の辞書を生成するように設定できます。そのためには、intlayer.config.tsファイルに以下の設定を追加する必要があります。

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Intlayerにi18next用のメッセージファイルを生成するよう指示します    dictionaryOutput: ["i18next"],    // IntlayerがメッセージJSONファイルを書き込むディレクトリ    i18nextResourcesDir: "./i18next/resources",  },};

利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

出力例:

.└── i18next    └── resources        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

例えば、en/client-component.json は以下のようになっているかもしれません:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "No cars",  "one_numberOfCar": "One car",  "two_numberOfCar": "Two cars",  "other_numberOfCar": "いくつかの車"}

next-intl 辞書のビルド

Intlayer は i18next または next-intl 用の辞書をビルドするように設定できます。そのためには、intlayer.config.ts ファイルに以下の設定を追加する必要があります。

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Intlayer に next-intl 用のメッセージファイルを生成させる設定    dictionaryOutput: ["next-intl"],    // Intlayer がメッセージ JSON ファイルを書き出すディレクトリ    nextIntlMessagesDir: "./i18next/messages",  },};

利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

出力例:

.└── intl    └── messages        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

例えば、en/client-component.json は次のようになります:

{  "myTranslatedContent": "こんにちは世界",  "zero_numberOfCar": "車はありません",  "one_numberOfCar": "車が1台",  "two_numberOfCar": "車が2台",  "other_numberOfCar": "いくつかの車"}

CLIツール

IntlayerはCLIツールを提供しています。これにより：

• コンテンツ宣言を監査し、欠落している翻訳を補完する
• コンテンツ宣言から辞書を構築する
• CMSからローカルプロジェクトへ遠隔辞書をプッシュおよびプルする

詳細はintlayer-cliを参照してください。

アプリケーションでIntlayerを使用する

コンテンツを宣言したら、アプリケーション内でIntlayerの辞書を利用できます。

Intlayerはアプリケーション用のパッケージとして利用可能です。

Reactアプリケーション

ReactアプリケーションでIntlayerを使用するには、react-intlayerを使用できます。

Next.jsアプリケーション

Next.jsアプリケーションでIntlayerを使用するには、next-intlayerを使用できます。

Expressアプリケーション

ExpressアプリケーションでIntlayerを使用するには、express-intlayerを使用できます。

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

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

• getConfiguration()
• getTranslation()
• getEnumeration()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()

ドキュメント履歴

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