zfb

Type to search...

to open search from anywhere

データ

作成2026年6月1日Takeshi Takatsudo

zfb で構造化データを取り込む 3 つの選択肢 — コンテンツコレクション、データコレクション、プレーンな TS モジュール。

zfb は構造化データをページに取り込むための 3 つの異なる経路を用意しています。どれが正しい 選択かは、データの形と、その周りにどれだけの手続きを求めるかによって決まります。

1. コンテンツコレクション

データが 文章 のとき（ブログ記事、ドキュメント記事、レシピなど）はコンテンツコレクションを 使います。各エントリはフロントマター付きの Markdown ファイルで、フロントマターはスキーマに 対して検証され、本文はあなたのために HTML へレンダリングされます。詳しくは Content Collections を参照してください。

各エントリの本文が読まれることを意図している場合は、常にこれが正しい選択です。

2. データコレクション

データが 構造化されている とき（製品のリスト、チームメンバーのディレクトリ、料金ティアの 集合など）はデータコレクションを使います。zfb.config.ts で宣言する JSON / YAML / TOML ファイルのディレクトリです。コンテンツコレクションが使うのと同じ [{ name, path }] の形 （Content Collections を参照）が、手続きなしでデータ ディレクトリを受け付けます。

export default {
  collections: [
    {
      name: "products",
      path: "data/products",
    },
  ],
};

各ファイルが 1 つのエントリになります。フィールドごとのバリデータを持つオプションの schema フィールドを指定できます（完全な形は <code>defineConfig</code> を参照）。データ エントリはコンテンツエントリと同じ方法でロードします。

import { getCollection } from "zfb/content";

const products = getCollection("products");

データコレクションが真価を発揮するのは、エントリ単位のバリデーション、slug の導出、そして 文章コンテンツと同じロード API が欲しいけれど、Markdown のレンダリングステップは不要、 というときです。

3. data/ 配下のプレーンな TS モジュール

それ以外すべて（小さなルックアップ、ヘルパー関数、導出された定数など）には、通常の TypeScript モジュールが最も軽量な経路です。

// data/site.ts
export const siteName = "My Site";

export function formatDate(date: Date) {
  return date.toISOString().slice(0, 10);
}

任意のページやコンポーネントからインポートします。

import { siteName, formatDate } from "../data/site";

スキーマも slug もエントリ単位のオーバーヘッドもありません。「コレクション」というフレーミングが、 そのデータに見合う以上の手続きになってしまう場合に使います。

正しいツールを選ぶ

役に立つ目安:

  • データが 読まれることを意図したコンテンツ → コンテンツコレクション。
  • データが 同じ形を共有する構造化レコード → データコレクション。
  • データが ひと握りの定数やヘルパー → data/ 配下の TS モジュール。

3 つすべてを同じプロジェクトの中で衝突なく混在させられます。

Revision History