ホームサンドボックスショーケースアプリ文書ブログ
    • 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. コンテンツ宣言
    4. 列挙
    作成:2024-08-11最終更新:2025-06-29
    このドキュメントをあなたの好きなAIアシスタントに参照してください
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

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

    このドキュメントは古く、ベース版は次の日付に更新されました: 2025年8月23日.

    英語のドキュメントへ

    バージョン履歴

    1. "履歴の初期化"
      v5.5.102025/6/29

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

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

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

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

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

    列挙型 / 複数形処理

    列挙型の仕組み

    Intlayerでは、enu関数を使用して列挙型を実現します。この関数は特定のキーを対応するコンテンツにマッピングします。これらのキーは数値、範囲、またはカスタム識別子を表すことができます。React IntlayerやNext Intlayerと組み合わせて使用すると、アプリケーションのロケールと定義されたルールに基づいて適切なコンテンツが自動的に選択されます。

    列挙型の設定

    Intlayerプロジェクトで列挙型を設定するには、列挙型の定義を含むコンテンツモジュールを作成する必要があります。以下は、車の数に関する簡単な列挙型の例です。

    **/*.content.ts
    コードをコピー

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

    import { enu, type Dictionary } from "intlayer";
    
    const carEnumeration = {
      key: "car_count",
      content: {
        numberOfCar: enu({
          "<-1": "マイナス1台未満の車",
          "-1": "マイナス1台の車",
          "0": "車なし",
          "1": "1台の車",
          ">5": "数台の車",
          ">19": "多くの車",
          "fallback": "フォールバック値", // オプション
        }),
      },
    } satisfies Dictionary;
    
    export default carEnumeration;

    この例では、enu はさまざまな条件を特定のコンテンツにマッピングしています。Reactコンポーネントで使用すると、Intlayerは与えられた変数に基づいて適切なコンテンツを自動的に選択できます。

    Intlayerの列挙型では宣言の順序が重要です。最初に有効な宣言が選択されます。複数の条件が該当する場合は、予期しない動作を避けるために正しい順序で並べてください。
    フォールバックが宣言されていない場合、キーが一致しなければ関数はundefinedを返します。

    React Intlayerでの列挙型の使用

    Reactコンポーネントで列挙型を使用するには、react-intlayerパッケージのuseIntlayerフックを活用できます。このフックは指定されたIDに基づいて正しいコンテンツを取得します。以下はその使用例です:

    **/*.tsx
    コードをコピー

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

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    const CarComponent: FC = () => {
      const { numberOfCar } = useIntlayer("car_count");
    
      return (
        <div>
          <p>
            {
              numberOfCar(0) // 出力: 車はありません
            }
          </p>
          <p>
            {
              numberOfCar(6) // 出力: いくつかの車
            }
          </p>
          <p>
            {
              numberOfCar(20) // 出力: 多くの車
            }
          </p>
          <p>
            {
              numberOfCar(0.01) // 出力: フォールバック値
            }
          </p>
        </div>
      );
    };

    この例では、コンポーネントが車の数に基づいて動的に出力を調整します。指定された範囲に応じて、正しい内容が自動的に選択されます。

    追加リソース

    設定および使用法の詳細については、以下のリソースを参照してください:

    • Intlayer CLI ドキュメント
    • React Intlayer ドキュメント
    • Next Intlayer ドキュメント

    これらのリソースは、さまざまな環境やフレームワークでの Intlayer のセットアップおよび使用方法について、さらに詳しい情報を提供します。

    複数形
    条件
    Alt+→

    このページについて

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