著者:
    Aymeric PINEAU
    作成:2026-06-12最終更新:2026-06-12

    コレクション

    コレクション（Collection）は、同じディクショナリキー（key）を共有するものの、それぞれ異なる item インデックスを宣言するコンテンツファイルの集合です。Intlayerはビルド時にこれらを1つの順序付きリストにマージします。

    コレクションアイテムの宣言

    各ファイルは1つのアイテムを表します。item フィールドは、リスト内での位置を表します（1から開始）。

    faq.1.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

export default dictionary;
    faq.2.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

export default dictionary;

    コレクションの利用

    すべてのアイテム

    FAQ.tsx
    import { useIntlayer } from "react-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};
    FAQ.tsx
    import { useIntlayer } from "next-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};
    FAQ.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const items = useIntlayer("faq");
</script>

<template>
<ul>
  <li v-for="(item, index) in items" :key="index">
    <strong>{{ item.question }}</strong>
    <p>{{ item.answer }}</p>
  </li>
</ul>
</template>
    FAQ.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const items = useIntlayer("faq");
</script>

<ul>
{#each $items as item}
  <li>
    <strong>{item.question}</strong>
    <p>{item.answer}</p>
  </li>
{/each}
</ul>
    FAQ.tsx
    import { useIntlayer } from "preact-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};
    FAQ.tsx
    import { useIntlayer } from "solid-intlayer";
import { For } from "solid-js";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    <For each={items()}>
      {(item) => (
        <li>
          <strong>{item.question}</strong>
          <p>{item.answer}</p>
        </li>
      )}
    </For>
  </ul>
);
};
    faq.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-faq",
template: `
  <ul>
    @for (item of items(); track $index) {
      <li>
        <strong>{{ item.question }}</strong>
        <p>{{ item.answer }}</p>
      </li>
    }
  </ul>
`,
})
export class FAQComponent {
items = useIntlayer("faq");
}
    faq.js
    import { useIntlayer } from "vanilla-intlayer";

const faq = useIntlayer("faq");

faq.forEach((item) => {
console.log(item.question);
console.log(item.answer);
});

    インデックスによる単一アイテムの取得

    tsx
    const faq2 = useIntlayer("faq", { item: 2 });
// → { question: string; answer: string }

    ロケールを明示した単一アイテムの取得

    tsx
    const faq2Ja = useIntlayer("faq", { item: 2, locale: "ja" });

    一般的なユースケース

    • FAQ（よくある質問）リスト
    • 料金プラン
    • カルーセル / スライダーの画像・コンテンツ
    • ステップ形式のチュートリアル・説明
    ロケールごとのファイルバリアント