著者:

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

バージョン履歴

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

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

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

このドキュメントを編集

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

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

作成:2024-08-11最終更新:2026-10-08

コピー

ドキュメントの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 コンポーネントで列挙型を使用するには、react-intlayer パッケージの useIntlayer フックを利用します。このフックは指定されたキーに基づいて対応するコンテンツを取得します。以下は使用例です：

**/*.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>
  );
};

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

**/*.tsx

コードをコピー

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

"use client";

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

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

  return (
    <div>
      <p>{numberOfCar(6)}</p>
    </div>
  );
};

export default CarComponent;

Vue コンポーネントで列挙型を使用するには、useIntlayer フック経由で取得します。以下は使用例です：

**/*.vue

コードをコピー

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

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

const { numberOfCar } = useIntlayer("car_count");
</script>

<template>
  <div>
    <p>{{ numberOfCar(6) }}</p>
  </div>
</template>

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

**/*.svelte

コードをコピー

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

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

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

<div>
  <p>{$content.numberOfCar(6)}</p>
</div>

Preact コンポーネントで列挙型を使用するには、useIntlayer フック経由で取得します。以下は使用例です：

**/*.tsx

コードをコピー

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

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

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

  return (
    <div>
      <p>{numberOfCar(6)}</p>
    </div>
  );
};

export default CarComponent;

SolidJS コンポーネントで列挙型を使用するには、useIntlayer フック経由で取得します。以下は使用例です：

**/*.tsx

コードをコピー

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

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{numberOfCar(6)}</p>
    </div>
  );
};

export default CarComponent;

Angular コンポーネントで列挙型を使用するには、useIntlayer フック経由で取得します。以下は使用例です：

app.component.ts

コードをコピー

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

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-car",
  template: `
    <div>
      <p>{{ content().numberOfCar(6) }}</p>
    </div>
  `,
})
export class CarComponent {
  content = useIntlayer("car_count");
}

vanilla-intlayer で列挙型を使用するには、useIntlayer を経由して取得します。以下は使用例です：

**/*.ts

コードをコピー

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

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("car_count").onChange((newContent) => {
  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
});

// Initial render
document.getElementById("cars")!.textContent = content.numberOfCar(6);

追加リソース

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

Intlayer CLI ドキュメント多言語サイトを管理するためのIntlayer CLIの使用方法をご紹介します。このオンラインドキュメントに従って、数分でプロジェクトをセットアップしてください。

Intlayer CLI ドキュメント

React Intlayer ドキュメントCreate React App プロジェクトに Intlayer を導入：コンポーネント隣の型付きコンテンツ、言語切り替え、ロケールごとに読み込まれる翻訳。

React Intlayer ドキュメント

Next Intlayer ドキュメントNext.js 15 App Router に Intlayer を導入：ルーティングミドルウェア、非同期 params、Server/Client Components、ローカライズされたメタデータとサイトマップ。

Next Intlayer ドキュメント

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

序数（Ordinal）列挙型の使用

React コンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.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>
  );
};

Next.js クライアントコンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.tsx

コードをコピー

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

"use client";

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
  const { ordinal } = useIntlayer("ranking_component");
  const lastDigit = Math.abs(count) % 10;

  return (
    <div>
      <p>{ordinal(lastDigit)({ count })}</p>
    </div>
  );
};

export default RankingComponent;

Vue コンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.vue

コードをコピー

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

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

defineProps<{ count: number }>();

const { ordinal } = useIntlayer("ranking_component");
</script>

<template>
  <div>
    <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p>
  </div>
</template>

Svelte コンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.svelte

コードをコピー

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

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

export let count: number;

const content = useIntlayer("ranking_component");
$: lastDigit = Math.abs(count) % 10;
</script>

<div>
  <p>{$content.ordinal(lastDigit)({ count })}</p>
</div>

Preact コンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.tsx

コードをコピー

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

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
  const { ordinal } = useIntlayer("ranking_component");
  const lastDigit = Math.abs(count) % 10;

  return (
    <div>
      <p>{ordinal(lastDigit)({ count })}</p>
    </div>
  );
};

export default RankingComponent;

SolidJS コンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.tsx

コードをコピー

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

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
    </div>
  );
};

export default RankingComponent;

Angular コンポーネントで使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

app.component.ts

コードをコピー

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

import { Component, Input } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-ranking",
  template: `
    <div>
      <p>{{ content().ordinal(lastDigit())({ count }) }}</p>
    </div>
  `,
})
export class RankingComponent {
  @Input() count!: number;

  content = useIntlayer("ranking_component");

  lastDigit() {
    return Math.abs(this.count) % 10;
  }
}

vanilla-intlayer で使用する場合、数値の末尾の桁を列挙型関数に渡して接尾辞を取得し、カウント全体を挿入値として渡します：

**/*.ts

コードをコピー

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

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("ranking_component");
const lastDigit = Math.abs(5) % 10;

document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
  count: 5,
});

列挙型 / 複数形処理

列挙型の仕組み

列挙型の設定

コンポーネントでの列挙型の使用

追加リソース

序数（Ordinal）列挙型の使用

関連リソース