著者:
    Aymeric PINEAU
    作成:2025-02-07最終更新:2026-10-08

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

    条件の仕組み

    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>
        {
          /* Output: my content when it's true */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Output: my content when it's false */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Output: my content when the condition fails */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Output: my content when the condition fails */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

    Next.js のクライアントコンポーネントで条件付きコンテンツを使用するには、useIntlayer フック経由で取得します。以下は使用例です：

    **/*.tsx
    "use client";

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

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

    Vue コンポーネントで条件付きコンテンツを使用するには、useIntlayer フック経由で取得します。以下は使用例です：

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { myCondition } = useIntlayer("my_key");
</script>

<template>
  <div>
    <p>{{ myCondition(true) }}</p>
    <p>{{ myCondition(false) }}</p>
  </div>
</template>

    Svelte コンポーネントで条件付きコンテンツを使用するには、useIntlayer フック経由で取得します。ストアは $ で参照します。以下は使用例です：

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <p>{$content.myCondition(true)}</p>
  <p>{$content.myCondition(false)}</p>
</div>

    Preact コンポーネントで条件付きコンテンツを使用するには、useIntlayer フック経由で取得します。以下は使用例です：

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

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

    SolidJS コンポーネントで条件付きコンテンツを使用するには、useIntlayer フック経由で取得します。以下は使用例です：

    **/*.tsx
    import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{myCondition(true)}</p>
      <p>{myCondition(false)}</p>
    </div>
  );
};

export default ConditionalComponent;

    Angular コンポーネントで条件付きコンテンツを使用するには、useIntlayer フック経由で取得します。以下は使用例です：

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-conditional",
  template: `
    <div>
      <p>{{ content().myCondition(true) }}</p>
      <p>{{ content().myCondition(false) }}</p>
    </div>
  `,
})
export class ConditionalComponent {
  content = useIntlayer("my_key");
}

    vanilla-intlayer で条件付きコンテンツを使用するには、useIntlayer を経由して取得します。以下は使用例です：

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("true-content")!.textContent =
    newContent.myCondition(true);
  document.getElementById("false-content")!.textContent =
    newContent.myCondition(false);
});

// Initial render
document.getElementById("true-content")!.textContent =
  content.myCondition(true);
document.getElementById("false-content")!.textContent =
  content.myCondition(false);

    追加リソース

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

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

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

    列挙性別