著者:
    作成: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.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 にファイルがどの言語を表しているかを伝えます。
    注意: どちらの場合も、コンテンツ宣言ファイルは Intlayer に認識されるために *.content.{ts,tsx,js,jsx,mjs,cjs,json} という命名パターンに従う必要があります。.[locale] のサフィックスは任意で、命名規則としてのみ使用されます。

    フォーマットの混在

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

    • 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 を使用して、お好みのサービスに基づいて不足している翻訳を自動的に補完します。

    ダイナミックレコードコンパイラー