Intlayerでは、条件付きコンテンツはcond関数を使用して実現されます。この関数は特定の条件（通常はブール値）を対応するコンテンツにマッピングします。このアプローチにより、指定された条件に基づいて動的にコンテンツを選択することが可能になります。React IntlayerやNext Intlayerと統合することで、実行時に提供された条件に応じて適切なコンテンツが自動的に選択されます。

条件付きコンテンツの設定

Intlayerプロジェクトで条件付きコンテンツを設定するには、条件定義を含むコンテンツモジュールを作成します。以下に、さまざまな形式での例を示します。

**/*.content.ts

コードをコピー

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

import { cond, type Dictionary } from "intlayer";

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "条件がtrueの場合のコンテンツ",
      false: "条件がfalseの場合のコンテンツ",
      fallback: "条件が失敗した場合のコンテンツ", // オプション
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

フォールバックが宣言されていない場合、条件が検証されない場合は最後に宣言されたキーがフォールバックとして使用されます。

React Intlayerでの条件付きコンテンツの使用

Reactコンポーネント内で条件付きコンテンツを利用するには、react-intlayerパッケージからuseIntlayerフックをインポートして使用します。このフックは指定されたキーのコンテンツを取得し、条件を渡して適切な出力を選択できるようにします。

**/*.tsx

コードをコピー

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

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 出力: 条件がtrueの場合のコンテンツ */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* 出力: 条件がfalseの場合のコンテンツ */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* 出力: 条件が失敗した場合のコンテンツ */
          myCondition("")
        }
      </p>
      <p>
        {
          /* 出力: 条件が失敗した場合のコンテンツ */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

追加リソース

設定と使用に関する詳細情報については、以下のリソースを参照してください：

これらのリソースは、さまざまな環境やフレームワークでのIntlayerの設定と使用に関するさらなる洞察を提供します。

列挙

性別

作成:2025-02-07最終更新:2025-06-29

このドキュメントをあなたの好きなAIアシスタントに参照してください

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

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

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

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

ドキュメントへのGitHubリンク

コピー

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

条件付きコンテンツ / Intlayerの条件

条件の仕組み

条件付きコンテンツの設定

**/*.content.ts

コードをコピー

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

import { cond, type Dictionary } from "intlayer";

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "条件がtrueの場合のコンテンツ",
      false: "条件がfalseの場合のコンテンツ",
      fallback: "条件が失敗した場合のコンテンツ", // オプション
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

フォールバックが宣言されていない場合、条件が検証されない場合は最後に宣言されたキーがフォールバックとして使用されます。

React Intlayerでの条件付きコンテンツの使用

**/*.tsx

コードをコピー

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

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 出力: 条件がtrueの場合のコンテンツ */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* 出力: 条件がfalseの場合のコンテンツ */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* 出力: 条件が失敗した場合のコンテンツ */
          myCondition("")
        }
      </p>
      <p>
        {
          /* 出力: 条件が失敗した場合のコンテンツ */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

追加リソース

設定と使用に関する詳細情報については、以下のリソースを参照してください：

これらのリソースは、さまざまな環境やフレームワークでのIntlayerの設定と使用に関するさらなる洞察を提供します。

列挙

性別