ホームサンドボックスショーケースアプリ文書ブログ
    • English英語
      EN
    • русскийロシア語
      RU
    • 日本語日本語
      JA
    • françaisフランス語
      FR
    • 한국어韓国語
      KO
    • 中文中国語
      ZH
    • españolスペイン語
      ES
    • Deutschドイツ語
      DE
    • العربيةアラビア語
      AR
    • italianoイタリア語
      IT
    • British Englishイギリス英語
      EN-GB
    • portuguêsポルトガル語
      PT
    • हिन्दीヒンディー語
      HI
    • Türkçeトルコ語
      TR
    • polskiポーランド語
      PL
    • Indonesiaインドネシア語
      ID
    • Tiếng Việtベトナム語
      VI
    • українськаウクライナ語
      UK
    /
    フレームワークでドキュメントをフィルター
    Alt+←
    なぜIntlayer?
    始める
    コンセプト
    • Intlayerの仕組み
    • 設定
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • ビジュアルエディター
    • CMS
    • CI/CD統合
    • 翻訳複数形列挙条件性別挿入ファイルネスティングMarkdownHTML関数取得
    • ロケールごとのファイル
    • コンパイラー
    • 自動入力
    • テスト
    • バンドル最適化
    環境
    • Next.js 14とApp Router
      Next.js 15
      Next.js ロケールなし URL
      Next.jsとページルーター
      コンパイラ
    • Tanstack Start Solid
    • AstroおよびReact
      AstroおよびSvelte
      AstroおよびVue
      AstroおよびSolid
      AstroおよびPreact
      AstroおよびLit
      AstroおよびVanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • NuxtおよびVue
    • ViteおよびSolid
    • SvelteKit
    • ViteおよびPreact
    • ViteおよびVanilla JS
    • ViteおよびLit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React NativeとExpo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • LynxおよびReact
    Plugins
    • JSON
    • gettext (.po)
    VS Code拡張機能
    エージェント
    • MCPサーバー
    • エージェントのスキル
    リリース
    • v8
    • v7
    • v6
    ベンチマーク
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    ブログ
    質問をする
    1. Documentation
    2. コンセプト
    3. コンテンツ宣言
    作成:2025-02-07最終更新:2026-05-12
    このドキュメントをあなたの好きなAIアシスタントに参照してください
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

    バージョン履歴

    1. "YAMLおよびMarkdownファイルフォーマットのサポートを追加"
      v8.10.02026/5/19
    2. "コンテンツノードタイプ `plural` を追加"
      v8.9.02026/5/12
    3. "`html` コンテンツノードタイプを追加"
      v8.0.02026/1/28
    4. "Rename `live` import mode to `fetch` to better describe the underlying mechanism."
      v8.0.02026/1/24
    5. "辞書オプション `location` と `schema` を追加"
      v8.0.02026/1/18
    6. "ICUおよびi18next形式のサポートを追加"
      v7.5.02025/12/13
    7. "フィールドのドキュメントを追加"
      v6.0.02025/9/20
    8. "履歴を初期化"
      v5.5.102025/6/29

    このページのコンテンツはAIを使用して翻訳されました。

    英語の元のコンテンツの最新バージョンを見る
    このドキュメントを編集

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ドキュメントへのGitHubリンク
    コピー

    ドキュメントのMarkdownをクリップボードにコピー

    コンテンツファイル

    www.youtube.com

    コンテンツファイルとは何ですか?

    Intlayerにおけるコンテンツファイルとは、辞書定義を含むファイルのことです。
    これらのファイルは、アプリケーションのテキストコンテンツ、翻訳、およびリソースを宣言します。
    コンテンツファイルはIntlayerによって処理され、辞書が生成されます。

    辞書は、useIntlayerフックを使用してアプリケーションがインポートする最終的な結果となります。

    主要な概念

    辞書

    辞書とは、キーによって整理された構造化されたコンテンツの集合です。各辞書には以下が含まれます:

    • キー:辞書の一意の識別子
    • コンテンツ:実際のコンテンツ値(テキスト、数値、オブジェクトなど)
    • メタデータ:タイトル、説明、タグなどの追加情報

    コンテンツファイル

    コンテンツファイルの例:

    src/example.content.tsx
    コードをコピー

    コードをクリップボードにコピー

    import { type ReactNode } from "react";
    import {
      t,
      enu,
      plural,
      cond,
      nest,
      md,
      insert,
      file,
      type Dictionary,
    } from "intlayer";
    
    interface Content {
      imbricatedContent: {
        imbricatedContent2: {
          stringContent: string;
          numberContent: number;
          booleanContent: boolean;
          javaScriptContent: string;
        };
      };
      multilingualContent: string;
      quantityContent: string;
      pluralContent: string;
      conditionalContent: string;
      markdownContent: never;
      htmlContent: never;
      externalContent: string;
      insertionContent: string;
      nestedContent: string;
      fileContent: string;
      jsxContent: ReactNode;
    }
    
    export default {
      key: "page",
      content: {
        imbricatedContent: {
          imbricatedContent2: {
            stringContent: "こんにちは世界", // "Hello World"の日本語訳
            numberContent: 123,
            booleanContent: true,
            javaScriptContent: `${process.env.NODE_ENV}`, // 環境変数NODE_ENVの値
          },
        },
        multilingualContent: t({
          ja: "日本語のコンテンツ",
          en: "English content",
          "en-GB": "English content (UK)",
          fr: "French content",
          es: "Spanish content",
        }),
        quantityContent: enu({
          "<-1": "マイナス1台未満の車",
          "-1": "マイナス1台の車",
          "0": "車はありません",
          "1": "1台の車",
          ">5": "いくつかの車",
          ">19": "多くの車",
        }),
        pluralContent: plural({
          one: "One car",
          other: "{{count}} cars",
        }),
        conditionalContent: cond({
          true: "検証が有効です",
          false: "検証が無効です",
        }),
        insertionContent: insert("こんにちは {{name}}!"),
        nestedContent: nest(
          "navbar", // ネストする辞書のキー
          "login.button" // [オプション] ネストするコンテンツのパス
        ),
        fileContent: file("./path/to/file.txt"),
        externalContent: fetch("https://example.com").then((res) => res.json()),
        markdownContent: md("# マークダウンの例"),
        htmlContent: html("<p>Hello <strong>World</strong></p>"),
    
        /*
         * `react-intlayer` または `next-intlayer` を使用する場合のみ利用可能
         */
        jsxContent: <h1>私のタイトル</h1>,
      },
    } satisfies Dictionary<Content>; // [オプション] Dictionary はジェネリックで、辞書のフォーマットを強化できます

    コンテンツノード

    コンテンツノードは辞書コンテンツの構成要素です。以下のようなものがあります:

    • プリミティブ値:文字列、数値、真偽値、null、undefined
    • 型付きノード:翻訳、条件、マークダウンなどの特殊なコンテンツタイプ
    • 関数:実行時に評価可能な動的コンテンツ 関数フェッチについてはこちら
    • 複数形コンテンツ: 詳細については、 複数形コンテンツ 詳細については、 複数形コンテンツ
    • ネストされたコンテンツ:他の辞書への参照

    コンテンツタイプ

    Intlayerは型付きノードを通じて様々なコンテンツタイプをサポートしています:

    • 翻訳コンテンツ: ロケール固有の値を持つ多言語テキスト 翻訳コンテンツを参照
    • 条件コンテンツ: ブール式に基づく条件付きコンテンツ 条件コンテンツを参照
    • 列挙コンテンツ: 列挙値に基づいて変化するコンテンツ 列挙コンテンツを参照
    • 挿入コンテンツ: 他のコンテンツに挿入可能なコンテンツ 挿入コンテンツを参照
    • Markdown Content: Markdown形式のリッチテキストコンテンツ Markdown Contentを参照
    • HTML Content: オプションのカスタムコンポーネントを使用したリッチHTMLコンテンツ HTML Contentを参照
    • Nested Content: 他の辞書への参照 Nested Contentを参照
    • Gender Content: 性別に応じて変わるコンテンツ Gender Contentを参照
    • File Content: 外部ファイルへの参照 File Contentを参照

    辞書の構造

    Intlayerの辞書はDictionary型で定義され、その動作を制御するいくつかのプロパティを含みます。

    必須プロパティ

    key (string)

    辞書の識別子です。同じキーを持つ複数の辞書がある場合、Intlayerは自動的にそれらをマージします。

    ケバブケースの命名規則を使用してください(例: "about-page-meta")。

    Content (string | number | boolean | object | array | function)

    contentプロパティは実際の辞書データを含み、以下をサポートします:

    • プリミティブ値:文字列、数値、ブール値、null、undefined
    • 型付きノード:Intlayerのヘルパー関数を使った特殊なコンテンツタイプ
    • ネストされたオブジェクト:複雑なデータ構造
    • 配列:コンテンツのコレクション
    • 関数:動的なコンテンツ評価

    任意プロパティ

    title (string)

    辞書を識別するための人間に読みやすいタイトルで、エディターやCMSシステムでの識別に役立ちます。特に大量の辞書を管理する場合やコンテンツ管理インターフェースで作業する際に有用です。

    例:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    {  key: "about-page-meta",  title: "About Page Metadata",  content: { /* ... */ }}

    description (string)

    辞書の目的、使用ガイドライン、および特別な注意事項を説明する詳細な説明です。この説明はAIによる翻訳生成のコンテキストとしても使用され、翻訳の品質と一貫性を維持するために重要です。

    例:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    {  key: "about-page-meta",  description: [    "This dictionary manages the metadata of the About Page",    "SEOのベストプラクティスを考慮してください:",    "- タイトルは50〜60文字の間であるべきです",    "- 説明は150〜160文字の間であるべきです",  ].join('\n'),  content: { /* ... */ }}

    tags (string[])

    辞書を分類および整理するための文字列配列です。タグは追加のコンテキストを提供し、エディターやCMSシステムでのフィルタリング、検索、整理に使用できます。

    例:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}

    format ('intlayer' | 'icu' | 'i18next')

    辞書コンテンツに使用するフォーマッターを指定します。これにより、異なるメッセージフォーマット構文を使用できます。

    • 'intlayer': デフォルトのIntlayerフォーマッター。
    • 'icu': ICUメッセージフォーマットを使用します。
    • 'i18next': i18nextメッセージフォーマットを使用します。

    例:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}

    locale (LocalesValues)

    辞書をロケールごとの辞書に変換し、content内で宣言された各フィールドが自動的に翻訳ノードに変換されます。このプロパティが設定されている場合:

    • 辞書は単一ロケールの辞書として扱われます
    • 各フィールドは特定のロケールの翻訳ノードになります
    • このプロパティを使用する場合、コンテンツ内で翻訳ノード(t())を使用してはいけません
    • 指定がない場合、辞書は多言語辞書として扱われます
    詳細は Intlayerにおけるロケール別コンテンツ宣言 を参照してください。

    例:

    json
    コードをコピー

    コードをクリップボードにコピー

    // ロケール別辞書{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // これは 'en' の翻訳ノードになります    "description": "Learn more about our company"  }}

    schema (SchemaKeys)

    辞書コンテンツのスキーマ。設定されている場合、コンテンツはこのスキーマに対して検証されます。これにより、Intlayer設定で定義されたカスタム検証スキーマを使用して、辞書コンテンツに特定の構造を強制できます。

    例:

    intlayer.config.ts
    コードをコピー

    コードをクリップボードにコピー

    import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
    src/example.content.ts
    コードをコピー

    コードをクリップボードにコピー

    import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;

    location ('local' | 'remote' | 'hybrid' | string)

    辞書の場所を示し、CMS との同期方法を制御します:

    • 'local': 辞書はローカルのみで管理されます。リモート CMS にプッシュされません。コードベースに残すべきコンテンツに使用します。
    • 'remote': 辞書はリモートでのみ管理されます。CMS にプッシュされると、ローカルファイルから切り離されます。コンテンツの読み込み時に、リモート辞書が CMS から取得されます。remote ロケーションを持つ .content ファイルは、初期プッシュ後に無視されます。
    • 'hybrid': 辞書はローカルとリモートの両方で管理されます。CMS にプッシュされると、同期が維持されます, ローカルファイルの変更が CMS にプッシュされ、リモートの変更をローカルファイルにプルバックできます。
    • string(例:'plugin'):辞書はプラグインまたはカスタムソースによって管理されます。プッシュしようとすると、システムが実行する操作を尋ねます。

    例:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    {  key: "about-page",  location: "local", // コンテンツはコードベースにのみ残ります  content: {    title: "About Us"  }}

    autoFill (AutoFill)

    外部ソースから辞書の内容を自動的に埋めるための指示です。これは intlayer.config.ts でグローバルに、または辞書ごとに設定できます。複数のフォーマットをサポートしています:

    • true:すべてのロケールで自動埋めを有効にする
    • string:単一ファイルへのパス、または変数を含むテンプレート
    • object:ロケールごとのファイルパス

    例:

    json
    コードをコピー

    コードをクリップボードにコピー

    // すべてのロケールで有効化{  "autoFill": true}// 単一ファイル{  "autoFill": "./translations/aboutPage.content.json"}// 変数を含むテンプレート{  "autoFill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// ロケールごとの詳細設定{  "autoFill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",    "es": "./translations/es/aboutPage.content.json"  }}

    利用可能な変数:

    • {{locale}} – ロケールコード(例: fr, es)
    • {{fileName}} – ファイル名(例: example)
    • {{key}} – 辞書キー(例: example)
    詳細はAuto-Fill Configuration in Intlayerを参照してください。
    priority (number)

    辞書の優先順位を示します。複数の辞書が同じキーを持つ場合、最も高い優先順位の辞書が他を上書きします。これはコンテンツの階層管理や上書きに役立ちます。

    例:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    // ベース辞書{  key: "welcome-message",  priority: 1,  content: { message: "Welcome!" }}// 上書き辞書{  key: "welcome-message",  priority: 10,  content: { message: "プレミアムサービスへようこそ!" }}// これはベースの辞書を上書きします

    CMSプロパティ

    version (string)

    リモート辞書のバージョン識別子。どのバージョンの辞書が現在使用されているかを追跡するのに役立ちます。特にリモートコンテンツ管理システムを使用する場合に有用です。

    importMode ('static' | 'dynamic' | 'fetch')

    インポートモードは、アプリケーションで辞書がどのようにインポートされるかを決定します。

    • 'static': 辞書はビルド時に静的にインポートされます。これがデフォルトモードです。
    • 'dynamic': 辞書はサスペンスAPIを使用して実行時に動的にインポートされます。
    • 'fetch': 辞書はライブ同期APIを使用して動的にインポートされます。

    設定すると、このプロパティはintlayer.config.tsで定義されたグローバルなimportModeを上書きします。

    システムプロパティ(自動生成)

    これらのプロパティはIntlayerによって自動的に生成され、手動での変更は推奨されません。

    $schema (string)

    辞書構造の検証に使用されるJSONスキーマ。辞書の整合性を保証するためにIntlayerによって自動的に追加されます。

    id (string)

    リモート辞書の場合、リモートサーバー上の辞書の一意識別子です。リモートコンテンツの取得および管理に使用されます。

    localId (LocalDictionaryId)

    ローカル辞書の一意識別子。辞書がローカルかリモートか、その場所を判別するためにIntlayerによって自動生成されます。

    localIds (LocalDictionaryId[])

    マージされた辞書の場合、この配列にはマージされたすべての辞書のIDが含まれます。マージされたコンテンツの出所を追跡するのに役立ちます。

    filePath (string)

    ローカル辞書のファイルパスで、どの .content ファイルから辞書が生成されたかを示します。デバッグやソースの追跡に役立ちます。

    versions (string[])

    リモート辞書の場合、この配列には辞書の利用可能なすべてのバージョンが含まれます。どのバージョンが使用可能かを追跡するのに役立ちます。

    autoFilled (true)

    辞書が外部ソースから自動的に補完されたかどうかを示します。競合が発生した場合、ベース辞書が自動補完された辞書より優先されます。

    location ('distant' | 'locale')

    辞書の場所を示します:

    • 'locale': ローカル辞書(コンテンツファイルから)
    • 'distant': リモート辞書(外部ソースから)

    コンテンツノードタイプ

    Intlayerは、基本的なプリミティブ値を拡張するいくつかの専門的なコンテンツノードタイプを提供します。

    翻訳コンテンツ (t)

    ロケールごとに異なる多言語コンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
    詳細については、 翻訳コンテンツ (t) ドキュメント を参照してください。

    条件コンテンツ (cond)

    ブール条件に基づいて変化するコンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { cond } from "intlayer";conditionalContent: cond({  true: "User is logged in",  false: "Please log in to continue",});
    詳細については、 条件コンテンツ (cond) ドキュメント を参照してください。

    列挙コンテンツ (enu)

    列挙された値に基づいて変化するコンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { enu } from "intlayer";statusContent: enu({  pending: "Your request is pending", // あなたのリクエストは保留中です  approved: "Your request has been approved", // あなたのリクエストは承認されました  rejected: "Your request has been rejected", // あなたのリクエストは拒否されました});
    詳細については、 列挙コンテンツ (enu) ドキュメント を参照してください。

    Plural Content (plural)

    Content that varies based on plural rules:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
    詳細については、 Plural Content ドキュメント を参照してください。### 挿入コンテンツ (insert)

    他のコンテンツに挿入できるコンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { insert } from "intlayer";insertionContent: insert("This text can be inserted anywhere"); // このテキストはどこにでも挿入できます
    詳細については、 挿入コンテンツ (insert) ドキュメント を参照してください。

    ネストコンテンツ (nest)

    他の辞書への参照:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { nest } from "intlayer";nestedContent: nest("about-page"); // "about-page" への参照
    詳細については、 ネストコンテンツ (nest) ドキュメント を参照してください。

    マークダウンコンテンツ (md)

    Markdown形式のリッチテキストコンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { md } from "intlayer";markdownContent: md(  "# Welcome\n\nこれは**太字**のテキストで、[リンク](https://example.com)が含まれています");
    詳細については、 マークダウンコンテンツ (md) ドキュメント を参照してください。

    HTMLコンテンツ (html)

    標準タグまたはカスタムコンポーネントを使用できるリッチHTMLコンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { html, file, t } from "intlayer";// インラインHTMLhtmlContent: html("<p>Hello <strong>World</strong></p>");// 外部ファイルからのロケール別HTMLlocalizedHtmlContent: t({  en: html(file("./content.en.html")),  ja: html(file("./content.ja.html")),});
    詳細については、 HTMLコンテンツ (html) ドキュメント を参照してください。

    ジェンダーコンテンツ (gender)

    ジェンダーに基づいて変化するコンテンツ:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { gender } from "intlayer";genderContent: gender({  male: "彼は開発者です",  female: "彼女は開発者です",  other: "彼らは開発者です",});
    詳細については、 ジェンダーコンテンツ (gender) ドキュメント を参照してください。

    ファイルコンテンツ (file)

    外部ファイルへの参照:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    import { file } from "intlayer";fileContent: file("./path/to/content.txt");
    詳細については、 ファイルコンテンツ (file) ドキュメント を参照してください。

    コンテンツファイルの作成

    基本的なコンテンツファイル構造

    コンテンツファイルは Dictionary 型を満たすデフォルトオブジェクトをエクスポートします:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Welcome Page Content",  description:    "ヒーローセクションと機能を含むメインのウェルカムページのコンテンツ",  tags: ["ページ", "ウェルカム", "ホームページ"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          ja: "使いやすい",          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          ja: "すべてのスキルレベルに対応した直感的なインターフェース",          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;

    JSON コンテンツファイル

    JSON形式でコンテンツファイルを作成することもできます:

    json
    コードをコピー

    コードをクリップボードにコピー

    {  "key": "welcome-page",  "title": "ウェルカムページのコンテンツ",  "description": "メインのウェルカムページのコンテンツ",  "tags": ["page", "welcome"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}

    Markdown コンテンツファイル

    markdown
    コードをコピー

    コードをクリップボードにコピー

    ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease

    YAML コンテンツファイル

    yaml
    コードをコピー

    コードをクリップボードにコピー

    key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease

    ロケール別コンテンツファイル

    ロケール別の辞書を作成する場合は、locale プロパティを指定します:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    // welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Welcome to Our Platform",      subtitle: "Build amazing applications with ease",    },  },} satisfies Dictionary;
    typescript
    コードをコピー

    コードをクリップボードにコピー

    // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;

    コンテンツファイルの拡張子

    Intlayerでは、コンテンツ宣言ファイルの拡張子をカスタマイズすることができます。このカスタマイズにより、大規模プロジェクトの管理が柔軟になり、他のモジュールとの競合を回避するのに役立ちます。

    デフォルトの拡張子

    デフォルトでは、Intlayerは以下の拡張子を持つすべてのファイルをコンテンツ宣言用に監視します:

    • .content.json
    • .content.json5
    • .content.jsonc
    • .content.ts
    • .content.tsx
    • .content.js
    • .content.jsx
    • .content.mjs
    • .content.mjx
    • .content.cjs
    • .content.cjx
    • .content.md
    • .content.mdx
    • .content.yaml
    • .content.yml

    これらのデフォルト拡張子はほとんどのアプリケーションに適しています。しかし、特定のニーズがある場合は、カスタム拡張子を定義してビルドプロセスを効率化し、他のコンポーネントとの競合リスクを減らすことができます。

    Intlayerがコンテンツ宣言ファイルを識別するために使用するファイル拡張子をカスタマイズするには、Intlayerの設定ファイルで指定できます。この方法は、ウォッチプロセスの範囲を制限してビルドパフォーマンスを向上させる大規模プロジェクトに特に有効です。

    高度な概念

    辞書のマージ

    複数の辞書が同じキーを持つ場合、Intlayerは自動的にそれらをマージします。マージの挙動は以下のいくつかの要因に依存します:

    • 優先度: priority の値が高い辞書が低い辞書を上書きする
    • 自動入力 vs ベース: ベース辞書は自動入力された辞書を上書きします
    • 場所: ローカル辞書はリモート辞書を上書きします(優先度が同じ場合)

    型安全性

    Intlayerはコンテンツファイルに対して完全なTypeScriptサポートを提供します:

    typescript
    コードをコピー

    コードをクリップボードにコピー

    // コンテンツの型を定義interface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// 辞書で使用するexport default {  key: "welcome-page",  content: {    // TypeScriptがオートコンプリートと型チェックを提供します    hero: {      title: "Welcome",      subtitle: "Build amazing apps",      cta: "Get Started",    },  },} satisfies Dictionary<WelcomePageContent>;

    ノードの入れ子構造

    問題なく関数を他の関数に入れ子にすることができます。

    例:

    src/example.content.tsx
    コードをコピー

    コードをクリップボードにコピー

    import { t, enu, cond, nest, md, type Dictionary } from "intlayer";
    
    const getName = async () => "John Doe";
    
    export default {
      key: "page",
      content: {
        // `getIntlayer('page','en').hiMessage` は `['Hi', ' ', 'John Doe']` を返します
        hiMessage: [
          t({
            en: "Hi",
            fr: "Salut",
            es: "Hola",
          }),
          " ",
          getName(),
        ],
        // 条件、列挙、多言語コンテンツを組み合わせた複合コンテンツ
        // `getIntlayer('page','en').advancedContent(true)(10)` は 'Multiple items found' を返します
        advancedContent: cond({
          true: enu({
            "0": t({
              en: "No items found",
              fr: "Aucun article trouvé",
              es: "No se encontraron artículos",
            }),
            "1": t({
              en: "One item found",
              fr: "Un article trouvé",
              es: "Se encontró un artículo",
            }),
            ">1": t({
              en: "Multiple items found",
              fr: "Plusieurs articles trouvés",
              es: "Se encontraron múltiples artículos",
            }),
          }),
          false: t({
            en: "No valid data available",
            fr: "Aucune donnée valide disponible",
            es: "No hay datos válidos disponibles",
          }),
        }),
      },
    } satisfies Dictionary;

    ベストプラクティス

    1. 命名規則:

      • 辞書のキーにはケバブケース("about-page-meta")を使用する
      • 関連するコンテンツは同じキーのプレフィックスの下にグループ化する
    2. コンテンツの整理:

      • 関連するコンテンツは同じ辞書内にまとめておく
      • 複雑なコンテンツ構造はネストされたオブジェクトで整理する
      • カテゴリ分けにはタグを活用する
      • autoFill を使って不足している翻訳を自動的に補完する
    3. パフォーマンス:

      • 監視対象ファイルの範囲を制限するためにコンテンツ設定を調整する
      • リアルタイムの更新が必要な場合(例:A/Bテストなど)にのみライブ辞書を使用する
      • ビルド時に辞書を最適化するために、ビルド変換プラグイン(@intlayer/swc または @intlayer/babel)が有効になっていることを確認する
    CI/CD統合
    翻訳
    Alt+→

    このページについて

      ディスカッションは匿名で、よくある問題に対処するために定期的に確認されます。機能のアイデア、ドキュメントへのフィードバック、Intlayerに関することなど、お気軽にお聞かせください, このフィードバックをロードマップの作成と製品の改善に活用しています。

      {  key: "about-page-meta",  title: "About Page Metadata",  content: { /* ... */ }}
      {  key: "about-page-meta",  description: [    "This dictionary manages the metadata of the About Page",    "SEOのベストプラクティスを考慮してください:",    "- タイトルは50〜60文字の間であるべきです",    "- 説明は150〜160文字の間であるべきです",  ].join('\n'),  content: { /* ... */ }}
      {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}
      {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}
      // ロケール別辞書{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // これは 'en' の翻訳ノードになります    "description": "Learn more about our company"  }}
      import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
      import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;
      {  key: "about-page",  location: "local", // コンテンツはコードベースにのみ残ります  content: {    title: "About Us"  }}
      // すべてのロケールで有効化{  "autoFill": true}// 単一ファイル{  "autoFill": "./translations/aboutPage.content.json"}// 変数を含むテンプレート{  "autoFill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// ロケールごとの詳細設定{  "autoFill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",    "es": "./translations/es/aboutPage.content.json"  }}
      // ベース辞書{  key: "welcome-message",  priority: 1,  content: { message: "Welcome!" }}// 上書き辞書{  key: "welcome-message",  priority: 10,  content: { message: "プレミアムサービスへようこそ!" }}// これはベースの辞書を上書きします
      import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
      import { cond } from "intlayer";conditionalContent: cond({  true: "User is logged in",  false: "Please log in to continue",});
      import { enu } from "intlayer";statusContent: enu({  pending: "Your request is pending", // あなたのリクエストは保留中です  approved: "Your request has been approved", // あなたのリクエストは承認されました  rejected: "Your request has been rejected", // あなたのリクエストは拒否されました});
      import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
      import { insert } from "intlayer";insertionContent: insert("This text can be inserted anywhere"); // このテキストはどこにでも挿入できます
      import { nest } from "intlayer";nestedContent: nest("about-page"); // "about-page" への参照
      import { md } from "intlayer";markdownContent: md(  "# Welcome\n\nこれは**太字**のテキストで、[リンク](https://example.com)が含まれています");
      import { html, file, t } from "intlayer";// インラインHTMLhtmlContent: html("<p>Hello <strong>World</strong></p>");// 外部ファイルからのロケール別HTMLlocalizedHtmlContent: t({  en: html(file("./content.en.html")),  ja: html(file("./content.ja.html")),});
      import { gender } from "intlayer";genderContent: gender({  male: "彼は開発者です",  female: "彼女は開発者です",  other: "彼らは開発者です",});
      import { file } from "intlayer";fileContent: file("./path/to/content.txt");
      // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Welcome Page Content",  description:    "ヒーローセクションと機能を含むメインのウェルカムページのコンテンツ",  tags: ["ページ", "ウェルカム", "ホームページ"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          ja: "使いやすい",          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          ja: "すべてのスキルレベルに対応した直感的なインターフェース",          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;
      {  "key": "welcome-page",  "title": "ウェルカムページのコンテンツ",  "description": "メインのウェルカムページのコンテンツ",  "tags": ["page", "welcome"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}
      ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease
      key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease
      // welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Welcome to Our Platform",      subtitle: "Build amazing applications with ease",    },  },} satisfies Dictionary;
      // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;
      // コンテンツの型を定義interface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// 辞書で使用するexport default {  key: "welcome-page",  content: {    // TypeScriptがオートコンプリートと型チェックを提供します    hero: {      title: "Welcome",      subtitle: "Build amazing apps",      cta: "Get Started",    },  },} satisfies Dictionary<WelcomePageContent>;