著者:
    Aymeric PINEAU
    作成:2025-04-18最終更新:2025-06-29

    Intlayerにおける「ロケール別」コンテンツ宣言

    Intlayerは多言語コンテンツを宣言するために2つの方法をサポートしています：

    • すべての翻訳を含む単一ファイル
    • ロケールごとに1ファイル（ロケール別フォーマット）

    この柔軟性により、

    • 他のi18nツールからの容易な移行
    • 自動翻訳ワークフローのサポート
    • 翻訳をロケール別のファイルに明確に整理

    複数翻訳を含む単一ファイル

    このフォーマットは以下に最適です：

    • コード内での迅速な反復作業
    • CMSとのシームレスな統合

    これはほとんどのユースケースで推奨されるアプローチです。翻訳を一元化することで、反復作業やCMSとの統合が容易になります。

    hello-world.content.ts
    import { t, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  content: {
    multilingualContent: t({
      en: "Title of my component",
      es: "Título de mi componente",
    }),
  },
} satisfies Dictionary;

export default helloWorldContent;
    推奨: このフォーマットは、Intlayerのビジュアルエディターを使用する場合や、コード内で直接翻訳を管理する場合に最適です。
    注: どちらの場合でも、コンテンツ宣言ファイルは Intlayer に認識されるために *.content.{ts,tsx,js,jsx,mjs,cjs,json} の命名パターンに従う必要があります。.[locale] サフィックスはオプションで、命名規則としてのみ使用されます。

    ロケールごとのファイルのグローバル設定

    intlayer.config.ts ファイルに以下を追加することで、ロケールごとのファイルのグローバル設定を構成できます。

    ts
    import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  dictionary: {
    locale: Locales.ENGLISH,
  },
};

export default config;

    この設定を使用すると、すべてのロケールごとのファイルがデフォルトロケールを英語として生成されます。これには、extract コマンドを使用した .content ファイルの生成や、コンパイラも含まれます。（詳細については、Compiler または Extract を参照してください。）

    ロケール別フォーマット

    このフォーマットは以下の場合に便利です：

    • 翻訳を独立してバージョン管理または上書きしたい場合。
    • 機械翻訳や人力翻訳のワークフローを統合している場合。

    また、localeフィールドを指定することで翻訳を個別のロケールファイルに分割することもできます：

    hello-world.es.content.ts
    import { t, Locales, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.SPANISH, // 重要
  content: { multilingualContent: "Título de mi componente" },
} satisfies Dictionary;

export default helloWorldContent;
    重要: locale フィールドが定義されていることを確認してください。これは Intlayer にファイルがどの言語を表しているかを伝えます。

    フォーマットの混在

    同じコンテンツキーに対して、両方の宣言方法を組み合わせることができます。例えば：

    • index.content.ts のようなファイルでベースコンテンツを静的に宣言する。
    • index.fr.content.ts や index.content.json のような別ファイルで特定の翻訳を追加または上書きする。

    このセットアップは特に以下の場合に便利です：

    • 初期のコンテンツ構造をコード内で定義したい場合。
    • 後からCMSや自動化ツールを使って翻訳を充実させたり完成させたりする予定がある場合。
    bash
    .
└── Components
    └── MyComponent
        ├── index.content.ts
        ├── index.content.json
        └── index.ts

    例

    多言語コンテンツ宣言ファイルの例：

    Components/MyComponent/index.content.ts
    import { t, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.ENGLISH,
  content: {
    multilingualContent: "私のコンポーネントのタイトル",
    projectName: "私のプロジェクト",
  },
} satisfies Dictionary;

export default helloWorldContent;
    Components/MyComponent/index.content.json
    {
  "$schema": "https://intlayer.org/schema.json",
  "key": "hello-world",
  "content": {
    "multilingualContent": {
      "nodeType": "translation",
      "translation": {
        "fr": "Titre de mon composant",
        "es": "Título de mi componente"
      }
    }
  }
}

    Intlayerは多言語ファイルとロケール別ファイルを自動的にマージします。

    Components/MyComponent/index.ts
    import { getIntlayer, Locales } from "intlayer";

const intlayer = getIntlayer("hello-world"); // デフォルトのロケールはENGLISHなので、ENGLISHのコンテンツが返されます

console.log(JSON.stringify(intlayer, null, 2));
// 結果:
// {
//  "multilingualContent": "Title of my component",
//  "projectName": "My project"
// }

const intlayer = getIntlayer("hello-world", Locales.SPANISH);

console.log(JSON.stringify(intlayer, null, 2));
// 結果:
// {
//  "multilingualContent": "Título de mi componente",
//  "projectName": "My project"
// }

const intlayer = getIntlayer("hello-world", Locales.FRENCH);

console.log(JSON.stringify(intlayer, null, 2));
// 結果:
// {
//  "multilingualContent": "Titre de mon composant",
//  "projectName": "My project"
// }

    自動翻訳生成

    intlayer CLI を使用して、お好みのサービスに基づいて不足している翻訳を自動的に補完します。

    バリアントコンパイラー