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 { t, type Dictionary } 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": "Minus one car",      "0": "No cars",      "1": "One car",      ">5": "Some cars",      ">19": "Many cars",    }),  },} satisfies Dictionary;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  # 辞書の自動生成された型定義を含む        ├── 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": "Some cars"}

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