著者:
    作成:2024-08-11最終更新:2025-06-29

    列挙型 / 複数形処理

    列挙型の仕組み

    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での列挙型の使用

    To use enumeration in a React component, you can leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>
      {
        numberOfCar(0) // Output: No cars
      }
    </p>
    <p>
      {
        numberOfCar(6) // Output: Some cars
      }
    </p>
    <p>
      {
        numberOfCar(20) // Output: Many cars
      }
    </p>
    <p>
      {
        numberOfCar(0.01) // Output: Fallback value
      }
    </p>
  </div>
);
};

    追加リソース

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

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

    Using Ordinal Enumeration

    To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");

// Get the last digit to determine the correct suffix
const lastDigit = Math.abs(count) % 10;

return (
  <div>
    <p>
      {
        ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
      }
    </p>
  </div>
);
};

    Additional Resources

    For more detailed information on configuration and usage, refer to the following resources:

    These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.

    複数形
    条件