列挙 / 複数形化

列挙の仕組み

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

列挙の設定

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

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に基づいて正しいコンテンツを取得します。以下はその使用例です：

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のセットアップと使用に関するさらなる洞察を提供します。