intlayer: 多言語コンテンツ宣言を管理するためのNPMパッケージ (i18n)

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.{ts,tsx,js,jsx,mjs,cjs}のファイルをスキャンします。

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

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

コンテンツを宣言する

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

import { type DeclarationContent, t } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Less than minus one car", // 1台未満      "-1": "Minus one car", // 1台マイナス      "0": "No cars", // 車なし      "1": "One car", // 1台      ">5": "Some cars", // 何台かの車      ">19": "Many cars", // 多くの車    }),  },} satisfies DeclarationContent;export default clientComponentContent;

辞書を構築する

需要に応じたintlayer-cliを使用して、辞書を構築できます。

npx intlayer build

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

典型的な出力は次のようになります：

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

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": "Some cars"}

i18nextまたは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": "Hello World",  "zero_numberOfCar": "No cars",  "one_numberOfCar": "One car",  "two_numberOfCar": "Two cars",  "other_numberOfCar": "Some cars"}

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()
• getTranslationContent()
• getEnumerationContent()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()