<p>Astroでサイトを作っていると、少しずつ日付変換やデータ判定といった関数やコンポーネントが増えていきます。</p><p>そこで、<a href="https://docs.astro.build/ja/guides/testing/#vitest" target="_blank" rel="noopener noreferrer nofollow">Astro公式でも紹介されている「Vitest」</a>を導入してみました。</p><p>個人の開発ではそこまで凝ったコンポーネントを作っていないので、試しに純粋なロジック関数だけ書いてみました。</p><h2 id="hf7e8428efa">Vitestの導入・設定</h2><p>設定ファイルは<code>getViteConfig</code>を使えば、Astroの設定をそのまま引き継いでくれるので、ほぼ記述いらずです。</p><ol><li>パッケージのインストール<br><code>npm i -D vitest</code></li><li><code>package.json</code>の<code>script</code>に<code>&quot;test&quot;: &quot;vitest&quot;</code>を追加</li><li>configファイルを作成</li></ol>

// vitest.config.ts
import { getViteConfig } from "astro/config";

export default getViteConfig({});

<h2 id="h520dda84bb">ロジック関数を準備</h2><p>簡単な日本時間への変換処理関数を準備しました。</p>

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

// set up plugins
dayjs.extend(utc);
dayjs.extend(timezone);

/**
 * Format an ISO timestamp into Japan Standard Time date string (date only).
 *
 * Uses numeric-only format suitable for international audiences (YYYY-MM-DD).
 *
 * @param iso the ISO date/time string (UTC assumed)
 * @returns formatted string like "2026-02-28"
 */
export function formatJp(iso?: string) {
  if (!iso) return "";
  return dayjs
    .utc(iso)
    .tz("Asia/Tokyo")
    .format("YYYY-MM-DD");
}

<p>これに対するテストファイル<code>date.test.ts</code>を同階層に置きます。</p>

// src/lib/date-utils.test.ts
import { describe, it, expect } from 'vitest';
import { formatJp } from './date';

describe('formatJp', () => {
  it('引数がない（undefined）場合は空文字を返すこと', () => {
    expect(formatJp()).toBe("");
  });

  it('ISO文字列を渡すと、JST（日本時間）の YYYY-MM-DD 形式に変換されること', () => {
    // UTCで 3月11日の夜
    const iso = "2026-03-11T22:00:00Z";
    // 日本時間では 3月12日の朝 7:00 になるはず
    expect(formatJp(iso)).toBe("2026-03-12");
  });

  it('不正な文字列が渡された時の挙動（dayjsの仕様に依存）', () => {
    // 現場の判断によりますが、壊れないことを確認しておくのもあり
    expect(formatJp("invalid-date")).toBe("Invalid Date");
  });
});

<h2 id="hfb74add26e">テストを実行する</h2><p><code>npm run test</code>を実行すると結果が表示されます。</p>

<h3 id="haf5df04515">うっかりミスを減らす</h3><p>試しに、作成した関数から日本時間への変換処理を削除してしまったと想定して実行してみました。</p><p>この状態でファイルを保存するとVitestが再実行され、ターミナルに失敗したテストを表示してくれます。</p>

<h2 id="ha214098e44">まとめ</h2><p>AIのおかげでテストを書くハードルはぐっと下がりました。</p><p>ですが実際に運用してみると「書くこと自体」よりも、「どこまで書くべきか」という判断の方が重要になってくるなと感じました。</p><ul><li>何をテストし、何を捨てるか？</li><li>メンテナンスコストにどれだけ時間を割けるか？</li></ul><p>まずは小さなロジックから試し、自分の開発スタイルに合った「テストの境界線」を見つけていくのが良さそうです。</p>

無理のないテストをAstro + Vitestで始める

<p>テーマ<br>https://expressive-code.com/guides/themes/<br><br>https://expressive-code.com/reference/configuration/#getblocklocale<br>テーマ設定やstyelのオーバーライド</p>

<p>前回<a href="https://841-biboroku.info/entry/astro-v5-content-loader-post/" target="_blank" rel="noopener noreferrer">Astro v5 Content Loader APIで記事詳細を作成</a>したので、今回は詳細ページの本文にシンタックスハイライト適用した手順をまとめました。</p><h2 id="he18d734d0a">現在：Next.js×Prism</h2><p>現在、コードはmicroCMSにコード用のカスタムフィールドを用意し、以下の内容を登録できるようにしています。</p><ul><li>コード</li><li>ファイル名</li><li>言語</li></ul><p>登録したデータはNext.jsにPrismのスタイルとjsを読み込みコンポーネントで表示しています。</p><p>ファイル名の部分は、自作でコードの外に配置しています。</p>

<p><span class="txt-small">▲ 現在のシンタックスハイライトのキャプチャ</span></p><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/syntax-highlighting-prism/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Fsyntax-highlighting-prism%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/react-syntax-highlighter/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Freact-syntax-highlighter%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script>

<h2 id="h30edd085e4">💮採用：Expressive Code</h2><p><a href="https://expressive-code.com/" target="_blank" rel="noopener noreferrer nofollow">https://expressive-code.com/</a></p><p>AstroにはPrismの組み込みサポートもありますが、PrismとExpressive Codeのインテグレーションの両方を試してファイル名の表示やコピー機能も付いているExpressive Codeを採用することにしました。</p><p>ファイル名表示やコピーボタンが標準機能で揃うのが一番の決め手でした。自作していた手間がなくなり簡単に設定できて嬉しいポイントです！</p><h2 id="hfc8380c925">Expressive CodeとPrismの比較</h2><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>比較項目</strong></p></th><th colspan="1" rowspan="1"><p><strong>Expressive Code</strong></p></th><th colspan="1" rowspan="1"><p><strong>@astrojs/prism</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>主な特徴</p></td><td colspan="1" rowspan="1"><p>「全部入り」の高機能パッケージ</p></td><td colspan="1" rowspan="1"><p>「必要最小限」のシンプル構成</p></td></tr><tr><td colspan="1" rowspan="1"><p>ハイライト方式</p></td><td colspan="1" rowspan="1"><p>Shiki（VS Codeと同じエンジン）</p></td><td colspan="1" rowspan="1"><p>Prism.js（正規表現ベース）</p></td></tr><tr><td colspan="1" rowspan="1"><p>ファイル名表示</p></td><td colspan="1" rowspan="1"><p>標準機能（<code>title</code>属性で表示）</p></td><td colspan="1" rowspan="1"><p>不可<strong>・</strong>自作が必要</p></td></tr><tr><td colspan="1" rowspan="1"><p>コピーボタン</p></td><td colspan="1" rowspan="1"><p>標準機能（自動配置）</p></td><td colspan="1" rowspan="1"><p>不可<strong>・</strong>JSで自作が必要</p></td></tr><tr><td colspan="1" rowspan="1"><p>行ハイライト</p></td><td colspan="1" rowspan="1"><p>標準機能（差分表示も可能）</p></td><td colspan="1" rowspan="1"><p>不可<strong>・</strong>CSSで工夫が必要</p></td></tr><tr><td colspan="1" rowspan="1"><p>ビルド速度</p></td><td colspan="1" rowspan="1"><p>やや遅い</p><p></p></td><td colspan="1" rowspan="1"><p>高速<strong>・</strong>処理が軽量</p></td></tr><tr><td colspan="1" rowspan="1"><p>ランタイム速度</p></td><td colspan="1" rowspan="1"><p>差なし（ビルド時に静的処理）</p></td><td colspan="1" rowspan="1"><p>差なし（ビルド時に静的処理）</p></td></tr><tr><td colspan="1" rowspan="1"><p>カスタマイズ</p></td><td colspan="1" rowspan="1"><p>設定ファイルで一括変更</p><p>複雑な要件はプラグイン作成が必要</p></td><td colspan="1" rowspan="1"><p>CSSを直接書いて調整自由</p><p>シンプル・柔軟</p></td></tr></tbody></table>

<h2 id="h8ba9749960">Expressive Code導入の流れ</h2><p>インテグレーション設定とコンポーネントにフィールドの内容を適用するだけなのでとてもシンプルです。</p><h3 id="h7e002a42c1">1. パッケージのインストールとAstroインテグレーション設定</h3>

import astroExpressiveCode from "astro-expressive-code";

export default defineConfig({
  //...略
  integrations: [
    astroExpressiveCode(),
  ],
});

<h3 id="h636fe4e144">2. コンポーネントに組み込み</h3><p>microCMSのカスタムフィールドのデータをコンポーネントに組み込みます。</p>

---
import { Code } from 'astro-expressive-code/components'
---
<Code code={コードフィールド} lang={言語フィールド} title={ファイル名のフィールド} />

<h3 id="hbdf577ce36">3. テーマカラーの設定</h3><p><a href="https://expressive-code.com/guides/themes/" target="_blank" rel="noopener noreferrer nofollow">約60種くらいのテーマカラー</a>が用意されています。</p><p>dark / light それぞれ指定しておくと、自動でOS/ブラウザのモードに合わせて切り替えてくれます。</p><p>テーマの設定はインテグレーション設定にテーマ名を設定します。</p>

import astroExpressiveCode from "astro-expressive-code";

export default defineConfig({
  //...略
  integrations: [
    astroExpressiveCode({
      themes: ["slack-dark", "solarized-light"],  // テーマ名を指定・複数設定可
    }),
  ],
});

<h4 id="h735f6bf696">Expressive Codeのダークテーマとライトテーマ</h4>

<p>サイトにテーマスイッチャーを採用するときには、モードに合わせて切り替わるように実装しようと考えています。</p><h2 id="h932e30a48a">Astro Prism導入の流れ</h2><p><a href="https://docs.astro.build/ja/guides/syntax-highlighting/" target="_blank" rel="noopener noreferrer nofollow">https://docs.astro.build/ja/guides/syntax-highlighting/</a></p><p>ドキュメントに沿って設定します。</p><h3 id="hd2f296e68c">1. パッケージのインストール</h3>

<h3 id="h5c90a87f01">2. スタイルシートの読み込み</h3><p><a href="https://github.com/PrismJS/prism-themes">Prism Themes</a>から好きなスタイルシートをダウンロードしてpublicディレクトリに配置して<code>&lt;link&gt;</code>で読み込みます。</p>

<h3 id="h0c99cd0c38">3. コンポーネントに組み込み</h3><p>Prismにはコードの表示のみのため、ファイル名やコピー機能は自作する必要があります。</p><p>凝ったデザインにしたい・CSSをカスタマイズしたい場合には向いていますが、シンプルに機能を実装したい場合はExpressive Codeの方が圧倒的に手軽です。</p>

---
import { Prism } from '@astrojs/prism'
---
<Prism lang={言語フィールド} code={コードフィールド} />

<h3 id="h72429e59d8">PrismのVSCodeテーマカラー</h3>

<h2 id="ha214098e44">まとめ</h2><p>とにかく簡単！ファイル名・コピーボタン・テーマ切り替えがこれ一つで適用されるのが良い👍</p><p>Expressive Codeは設定がシンプルな割に機能が充実していて、導入してよかったです。</p><p></p><p>📝参考</p><ul><li>Expressive Code公式<ul><li><a href="https://expressive-code.com/guides/themes/" target="_blank" rel="noopener noreferrer nofollow">Themes | Expressive Code</a></li><li><a href="https://expressive-code.com/reference/configuration/#getblocklocale" target="_blank" rel="noopener noreferrer nofollow">Configuring Expressive Code | Expressive Code</a></li></ul></li><li>Astro公式<ul><li><a href="https://docs.astro.build/ja/guides/syntax-highlighting/" target="_blank" rel="noopener noreferrer nofollow">シンタックスハイライト | Docs</a></li></ul></li></ul>

Expressive Code導入・Astroでシンタックスハイライトを強化する

<p>この備忘録ブログを最初に作ったときは<strong>Next.js（Pages Router）</strong>を採用していましたが、このたび心機一転、<strong>Astro v5</strong> へリニューアル中です🎈</p><p>前回の「<a href="https://841-biboroku.info/entry/astro-v5-content-loader-zod/">ブログをAstro v5 Content Loader API・microCMSにリニューアル - Zodの型定義編 -</a>」に続き、今回は記事詳細ページの実装をまとめます。</p><p>Content Layer APIを使うことで、型安全かつ高速なページ生成が実現。</p><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/astro-v5-content-loader-zod/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Fastro-v5-content-loader-zod%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script>

<h2 id="h31f45652bc">動的に記事詳細ページを生成</h2><p>動的パラメータを定義するためファイル名を<code>[path].astro</code>で作成（ファイル名は任意。slugなどでもOK）。</p><h2 id="h423ed66dc2">型定義の準備</h2><p>前回作成した<code>content.config.ts</code>で作成したスキーマを詳細ページでも使い回せるように <code>export</code> しておきます。</p>

export const ArticleSchema = z
  .object({
      // 各フィールドの型
  })
  .merge(microCMSContentIdScheme)
  .merge(microCMSDateScheme);

<h2 id="h96a1a225f0">getCollectionで全記事の展開</h2><h3 id="h68c1283c92">1. 全データの取得</h3><p><code>content.config.ts</code>で設定したローカルキャッシュ（Content Layer）から、<code>getCollection</code>で全記事のデータを配列で取得します。</p><p>すでに取得済みのデータを使うため、再fetchする必要がありません。</p>

export async function getStaticPaths() {
  const articles = await getCollection("articles");
  return articles.map((article) => ({
    params: { path: article.data.フィールド },
    props: { article },
  }));
}

<h3 id="he3feee3415">2. URL（パス）の指定</h3><p><code>params</code>にmicroCMS側で設定した一意の値を登録しているフィールドを使ってURLに使うパラメータを指定します。</p><h3 id="h27caedb639">3. データの受け渡し</h3><p><code>props</code>にgetCollectionで取得した記事データをそのまま渡します。</p><h2 id="hf1631bb17f">Zodの型をそのまま使う</h2><p><code>CollectionEntry</code>を使うことでZodで定義したバリデーション済みの型がそのまま反映されるので、安全で便利です✨</p><p>👉 <a href="https://docs.astro.build/en/reference/modules/astro-content/#collectionentry" target="_blank" rel="noopener noreferrer nofollow">Astro公式のCollectionEntry</a></p>

import { getCollection, type CollectionEntry } from "astro:content";

interface Props {
  article: CollectionEntry<"articles">;
}

<h2 id="h78d3b33432">コンテンツの展開</h2><p>あとは<code>Astro.props</code>で受け取って、各フィールドを展開するだけです。</p><p>定義したフィールドが補完されるので実装がスムーズです。</p>

const { article } = Astro.props;
const { publishedAt, title, 他のフィールド} = article.data;

<h2 id="ha214098e44">まとめ</h2><p>今回は記事詳細ページを中心にまとめました。</p><p>型定義やコンテンツキャッシュを活用してデータを再利用することで、とてもシンプルに出力できました😇</p><p>次回は、記事一覧ページについて書きたいと思います。</p><p></p>

ブログをAstro v5 Content Loader API・microCMSにリニューアル - 記事詳細ページ編 -

<p>microCMSの公式ブログの「AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版）」を参考にAstro v5でこの備忘録ブログをりにゅアール中。<br><a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/astro5-microcms-introduction</a><br>ほぼ記事のまま自身のmicroCMSのAPI設定に置き換えるだけ。<br>今回の記事では型定義とcollectionで記事取得まで　何回かにわけて記事を書こうと思います。</p><h2 id="hc9a34d5296">型定義</h2><h3 id="h90b609610a">microCMSの日付・画像の型定義</h3><p>まだ試せてないですが下書き記事を取得するときのために.nullableI()をつけています。（検証したら内容を更新します）</p><pre><code>// 共通のフィールド
const microCMSDateFields = {
  createdAt: z.string().datetime(),
  updatedAt: z.string().datetime(),
  publishedAt: z.string().datetime().nullable(),
  revisedAt: z.string().datetime().nullable(),
};</code></pre><p>microCMSの画像データの形をZodで定義して、satisfies で条件を満たしているかチェック</p><pre><code>
// microCMS画像フィールドのスキーマ
const MicroCMSImageSchema = z.object({
  url: z.string().url(),
  width: z.number(),
  height: z.number(),
  alt: z.string().optional().default(""),
}) satisfies z.ZodType&lt;Partial&lt;MicroCMSImage&gt; &amp; { alt?: string }&gt;;</code></pre><h2 id="h3f6cd11dc1">よく使うzodの型指定</h2><p>途中ですがここでよく使うzodをおさらい<br><strong>データの内容</strong><br><strong>Zodの書き方 (z.)</strong><br><strong>TypeScriptでの型</strong><br><strong>数値</strong><br><code>z.number()</code><br><code>number</code><br><strong>整数（小数不可）</strong><br><code>z.number().int()</code><br><code>number</code><br><strong>文字列</strong><br><code>z.string()</code><br><code>string</code><br><strong>真偽値</strong><br><code>z.boolean()</code><br><code>boolean</code><br><strong>日付</strong><br><code>z.date()</code><br><code>Date</code><br><strong>配列</strong><br><code>z.array(z.string())</code><br><code>string[]</code><br><strong>どれか一つ（列挙型）</strong><br><code>z.enum(["red", "blue"])</code><br><code>"red" | "blue"</code><br><strong>未定義を許容</strong><br><code>.optional()</code><br><code>?</code> (optional)<br><strong>nullを許容</strong><br><code>.nullable()</code><br><code>| null</code><br></p><h2 id="hcb70fed5cb">カスタムフィールドの型を定義</h2><p>microCMSのフィールドの種類・戻り値に合わせて定義する</p><h3 id="h20d64b30e9">カスタムフィールドID（fieldId）</h3><p>stirng()でもエラーは出ませんが、literalで指定しました。</p><pre><code>const MetadataSchema = z.object({
  fieldId: z.literal("metadata"),
  title: z.string().optional(),
  description: z.string().optional(),
});</code></pre><h2 id="hbef1934a4f">種類：セレクトフィールド</h2><p>複数選択がONでもOFFでも戻り値が配列のためarray()とします。<br>enumで選択肢を指定します。</p><pre><code>const HighlightSchema = z.object({
  lang: z
    .array(
      z.enum([
        "javascript",
        "tsx",
        "typescript",
        "jsx",
      ]),
    )
    .optional(),
})</code></pre><h2 id="h3eae2c2e54">種類：複数画像</h2><p>miroCMS画像用の型定義をそのままarray()に入れます</p><pre><code>const GallerySchema = z.object({
&nbsp; images: z.array(MicroCMSImageSchema).optional(),
})</code></pre><h2 id="h27ff54e42f">コンテンツAPIのAPIスキーマの型定義</h2><p>すでに作成したカスタムフィールドの型と組みあわせてAPIスキーマの型定義をします。</p><h3 id="h91b5cd60c9">カテゴリー用</h3><p>共通の日付はmicroCMSDateFieldsをスプレっと構文で展開</p><pre><code>// 各コレクションのスキーマ定義
const CategorySchema = z.object({
  title: z.string(),
  slug: z.string(),
  ...microCMSDateFields,
});</code></pre><h3 id="hc678767a27">記事用</h3><p>種類：複数コンテンツ参照<br>先に定義したカテゴリー用のCategorySchemaを使います。<br>複数参照するのでarray()</p><h4 id="h461bf6ac09">種類：繰り返し</h4><p>どれか1つの形＝カスタムフィールドに当てはまればOKなのでunion()に使えるカスタムフィールドを配列で代入。<br>繰り返しなのでarray()でwrap.<br>必須にしているのでnonempty()を指定しています<br>種類：カスタム<br>単一のカスタムフィールドです。<br>任意のフィールドだけで構成されてますが、未登録の場合でもfieldIdのみ帰ってくるので.optional()をつけずMetadataSchemaのみを指定してます。</p><pre><code>const ArticlesSchema = z.object({
//略
  category: z.array(CategorySchema),
  section: z
    .array(
      z.union([
        HighlightSchema,
        GallerySchema,
       //他の選択肢（カスタムフィールド）
      ]),
    )
    .nonempty(),
  metadata: MetadataSchema,
  ...microCMSDateFields,
});</code></pre><h2 id="h6ab966b81a">AstroのContent Collectionを定義する</h2><p>microCMSLoaderの中でmicrocms-sdkのgetAllContents()を使って全件取得しているので１回で全部取得できる</p><pre><code>export const collections = {
  articles: defineCollection({
    loader: microCMSLoader("記事用のエンドポイント"),
    schema: articleSchema,
  }),
  categories: defineCollection({
    loader: microCMSLoader("カテゴリ用のエンドポイント"),
    schema: categorySchema,
  }),
};</code></pre><p>次回は記事の出力について書く予定です。</p>

<p>この備忘録ブログを最初に作ったときは<strong>Next.js（Pages Router）</strong>を採用していましたが、このたび心機一転、<strong>Astro v5</strong> へリニューアル中です🎈</p><p>今回は、microCMS公式ブログの「<a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版）</a>」を参考に進めています。</p><p>基本的には公式記事に沿って進めればOKですが、自身のmicroCMSのAPI設定に合わせてカスタマイズした部分（特にZodでの型定義）を中心に、備忘録としてまとめておきます。</p><p>今回は「型定義」と「Content Layerでの取得設定」までを進めました。</p><h2 id="h6bf967ea81">共通フィールドの型定義</h2><p>microCMSの全コンテンツに共通する日付フィールドやコンテンツIDなどの型を定義します。</p>


// microCMSIDフィールドのスキーマ
export const microCMSContentIdScheme = z.object({
  id: z.string(),
}) satisfies z.ZodType<MicroCMSContentId>;

// microCMS日付フィールドのスキーマ
const microCMSDateScheme = z.object({
  createdAt: z.string().datetime(),
  updatedAt: z.string().datetime(),
  publishedAt: z.string().datetime().optional(),
  revisedAt: z.string().datetime().optional(),
}) satisfies z.ZodType<MicroCMSDate>;

<h3 id="h370ce1d1b3">画像データの型定義</h3>

// microCMS画像フィールドのスキーマ
const MicroCMSImageSchema = z.object({
  url: z.string().url(),
  width: z.number(),
  height: z.number(),
  alt: z.string().optional().default(""),
}) satisfies z.ZodType<Partial<MicroCMSImage> & { alt?: string }>;

<h2 id="h2443cdda5b">【おさらい】よく使うZodの型指定</h2><p>設定中に「これなんだっけ🤔？」となりがちな、Zodの書き方とTypeScript型の対応表です。</p><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>データの内容</strong></p></th><th colspan="1" rowspan="1"><p><strong>Zodの書き方(z.)</strong></p></th><th colspan="1" rowspan="1"><p><strong>TypeScriptでの型</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>数値</p></td><td colspan="1" rowspan="1"><p><code>number()</code></p></td><td colspan="1" rowspan="1"><p><code>number</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>整数（小数不可）</p></td><td colspan="1" rowspan="1"><p><code>number().int()</code></p></td><td colspan="1" rowspan="1"><p><code>number</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>文字列</p></td><td colspan="1" rowspan="1"><p><code>string()</code></p></td><td colspan="1" rowspan="1"><p><code>string</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>真偽値</p></td><td colspan="1" rowspan="1"><p><code>boolean()</code></p></td><td colspan="1" rowspan="1"><p><code>boolean</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>日付</p></td><td colspan="1" rowspan="1"><p><code>date()</code></p></td><td colspan="1" rowspan="1"><p><code>Date</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>配列</p></td><td colspan="1" rowspan="1"><p><code>array(z.string())</code></p></td><td colspan="1" rowspan="1"><p><code>string[]</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>列挙型</p></td><td colspan="1" rowspan="1"><p><code>enum([&quot;a&quot;, &quot;b&quot;])</code></p></td><td colspan="1" rowspan="1"><p><code>&quot;a&quot; | &quot;b&quot;</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>未定義を許容</p></td><td colspan="1" rowspan="1"><p><code>.optional()</code></p></td><td colspan="1" rowspan="1"><p><code>?</code> (optional)</p></td></tr><tr><td colspan="1" rowspan="1"><p>nullを許容</p></td><td colspan="1" rowspan="1"><p><code>.nullable()</code></p></td><td colspan="1" rowspan="1"><p><code>| null</code></p></td></tr></tbody></table>

<h2 id="hc2318b1834">カスタムフィールドの型を定義する</h2><p>microCMSで作成したカスタムフィールドに合わせて、個別にスキーマを作成します。</p><h3 id="h118510576e">1. カスタムフィールドID（fieldId）</h3><p><code>string()</code> でも動作しますが、より厳密にするために<code>.literal</code>でフィールドIDを指定しています。</p>

const MetadataSchema = z.object({
  fieldId: z.literal("metadata"),
  title: z.string().optional(),
  description: z.string().optional(),
});

<h3 id="hbffea6cdd7">2. セレクトフィールド（複数選択）</h3><p>複数選択がONでもOFFでも、APIからの戻り値は配列（array）になります。</p>

const HighlightSchema = z.object({
  // 略
  lang: z.array(
    z.enum(["javascript", "tsx", "typescript", "jsx"])
  ).optional(),
});

<h3 id="he0a34218a9">3. 繰り返しフィールド</h3><p>「繰り返し」は、定義したカスタムフィールドのいずれかに当てはまれば良いため、<code>z.union</code>を使って定義し、全体を<code>z.array</code>で囲みます。</p>

const sectionSchema = z.array(
  z.union([
    HighlightSchema,
    GallerySchema,
    // 他のカスタムフィールドもここに追加
  ])
).nonempty(); // 必須項目の場合はnonempty()

<h2 id="h1dc61d89ea">コンテンツAPIのスキーマを定義</h2><p>これまでに作った部品を組み合わせて、最終的なコレクションのスキーマを完成させます。</p><h3 id="h91b5cd60c9">カテゴリー用</h3><p>作成したフィールドにmicroCMSの日付・コンテンツIDの型をマージします。</p>

const CategorySchema = z.object({
  title: z.string(),
  slug: z.string(),
})
.merge(microCMSContentIdScheme)
.merge(microCMSDateScheme);

<h3 id="h5655b62634">記事（Articles）用</h3><p>「複数コンテンツ参照」のカテゴリーや、先ほどの「繰り返しフィールド」を組み込みます。</p>

const ArticlesSchema = z.object({
  // 略
  title: z.string(),
  category: z.array(CategorySchema), // 複数参照なのでarray
  section: sectionSchema,
  metadata: MetadataSchema, // 未入力でもfieldIdは返るのでoptionalなし(※1)
})
.merge(microCMSContentIdScheme)
.merge(microCMSDateScheme);

<p>※1…エラーが出る場合は<code>.optional()</code>か<code>.nullable()</code>を追加<br>一部記事で戻り値がnullになっているデータがありました。途中でカスタムフィールドを追加したからなのか、戻り値の仕様が途中で変わったのか定かではありません。<br>一度該当フィールドにデータを入れて公開⇒削除して公開するとnullからオブジェクトに変わりました。</p>

<h2 id="h4c10cd8a06">AstroのContent Collectionを設定する</h2><p>最後に<code>src/content/config.ts</code>で、Astro v5の<code>loader</code>を使って定義します。</p>

export const collections = {
  articles: defineCollection({
    loader: microCMSLoader({
      endpoint: "articles", // 記事用のエンドポイント
    }),
    schema: ArticlesSchema,
  }),
  categories: defineCollection({
    loader: microCMSLoader({
      endpoint: "categories", // カテゴリ用のエンドポイント
    }),
    schema: CategorySchema,
  }),
};

<p>このローダー関数の中で <code>getAllContents()</code> を使って全件取得してくれているので、個別に取得ロジックを書く必要がなく、とても簡単です🎉</p><p><span class="txt-small">※この関数は、冒頭でも紹介した </span><a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">microCMSの参考ブログ記事</span></a><span class="txt-small"> から引用させていただきました。</span></p><h2 id="ha214098e44">まとめ</h2><p>今回は型定義を中心にまとめました。</p><p>Zodでしっかり型を固めておくと、コンポーネント側でデータを使う時に補完が効いて開発がとても楽になりそうです😇</p><p>次回は、これらのデータを使って実際に記事画面を出力する部分について書きたいと思います。</p><p></p><p><strong>📝参考サイト</strong></p><ul><li><a href="https://docs.astro.build/ja/reference/content-loader-reference/" target="_blank" rel="noopener noreferrer nofollow">Astro Content Loader API</a></li><li><a href="https://blog.microcms.io/astro5-microcms-introduction" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版）</a></li><li><a href="https://evoworx.dev/blog/microcms_astro-content-layer/" target="_blank" rel="noopener noreferrer nofollow">Content Layer APIで進化したAstro×microCMSのブログ構築</a></li></ul>

ブログをAstro v5 Content Loader API・microCMSにリニューアル - Zodの型定義編 -

<p>この記事は、microCMSのデータとAstroの<a href="https://docs.astro.build/ja/reference/routing-reference/#paginate" target="_blank" rel="noopener noreferrer nofollow">paginate関数</a>を使用して、ChatGPTでページネーションコンポーネントを作成した備忘録です。</p><p><span class="txt-small">※microCMSの詳しい記事取得方法は含みません。</span></p><h2 id="h115ee6803f">完成したページネーション</h2>

<h2 id="h9f510f3156">やりたいこと</h2><ul><li>最初・最後のページを表示するオプション</li><li>ページ数が多い場合に「...」を表示する機能</li><li>前後のページへ移動するボタン</li><li>現在のページを示すインジケーター</li><li>ページが1つしかない場合にページネーションを非表示にするオプション</li><li>全ページ表示ができる</li><li>1つのコンポーネントで管理できる</li><li>aria-current/aria-labelの設定</li></ul>

<h2 id="h9abf11e0fe">ページの作成</h2><p>getStaticPaths()でページを作成します。</p>

---
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
import Pagination from "@components/Pagination.astro";
import { getAllBlogList } from "@libs/microcms";
type Props = InferGetStaticPropsType<typeof getStaticPaths>;

export const getStaticPaths = (async ({ paginate }) => {
  const allPosts = await getAllBlogList();  // 全記事取得
  return paginate(allPosts, { pageSize: 1 });  // pageSize=1ページあたりの件数・わかりやすくするため1件にしてます
}) satisfies GetStaticPaths;

const { page } = Astro.props;
---
～略：記事一覧
<Pagination page={page} baseUrl="/blog" />

<h2 id="hb006a1f278">ページネーションの表示形式を独自オプションで柔軟にカスタマイズ</h2><p>オプションは主に表示に関するもののみを管理し、それ以外の部分はHTMLソースで柔軟にカスタマイズできるようにしています。</p><p>コンポーネントは、アイテムごとに分けることもできますが、他の部分で再利用されることが少ないため、1つのコンポーネントで管理する形にしました☺️</p>

---
const { page, baseUrl } = Astro.props;
const { lastPage, currentPage, url } = page;
const paginationOptions = {
  alwaysShowPagination: true, // ページネーションを常に表示するか
  showFirst: true,  // 「最初のページ」ボタンを表示するか
  showLast: true,  // 「最後のページ」ボタンを表示するか
  showItems: 5, // 表示するページ番号の最大数（0で全ページ表示、偶数指定時は自動で-1して奇数に調整）
  showIndicator: true,  // 現在のページを示すインジケーターを表示するか
  showDots: true, // ページ数が多い場合に「...」を表示するか
  dot: "...", // ドットの表記文字列
};
// 略
---

<h3 id="h4ca45d55d3">alwaysShowPagination: true</h3><p>ページネーションは、記事の総数が <code>pageSize</code> よりも少ない場合でも、常に表示するかどうかを設定するオプションです。もし記事の総数がページサイズより少ない場合でも、1ページのみが生成されます。それでもページネーションを常に表示するかどうか、このオプションで制御できます。</p>

<h3 id="h9504743803">showFirst: true</h3><p>最初のページへのリンクを表示するかどうかを設定するオプションです。true に設定すると、最初のページへのリンクが表示されます。</p><h3 id="h7ad4cee0cd">showLast: true</h3><p>最後のページへのリンクを表示するかどうかを設定するオプションです。true に設定すると、最後のページへのリンクが表示されます。</p>

<h3 id="hbcdc850fea">showItems: 5</h3><p>ページネーションで表示するページ番号の個数を設定するオプションです。</p><ul><li><code>0</code> に設定すると、ページ番号を省略せず、全てのページ番号を表示します。</li><li>偶数の値を設定した場合、自動的に1引かれて奇数の値に調整されます。これにより、左右のページリンクが均等に表示されるようになります。</li></ul>

<h3 id="h0c6dbce2cf">showIndicator: true</h3><p>現在のページ番号と総ページ数を表示するかどうかを設定するオプションです。true に設定すると、現在のページ番号と総ページ数（例: &quot;3 / 10&quot;）が表示されます。</p><h3 id="h43ffb9ebe2">showDots: true</h3><p>ページ番号の間にドット（...）を表示するオプションです。ページ数が多くなると、全てのページ番号を表示するのは煩雑になるため、ドットで省略する部分を表示します。</p><p>例えば、ページ数が10ページの場合、1ページ目、3ページ目、最終ページなどを表示し、それ以外はドットで省略されます。</p><h3 id="hf5bcff2424">dot: &quot;...&quot;</h3><p>ドットを表示する文字列を設定するオプションです。デフォルトでは &quot;...&quot; が使用されますが、カスタマイズが可能です。</p><h3 id="hc371195a66">dot機能の適用に関する処理</h3><ul><li>ページ数が <code>showItems</code> より多く、<code>showItems</code> が3ページ以上の場合、ドット（<code>...</code>）を表示します。</li><li><code>startPage</code> が1より大きい場合、最初のページ番号の後にドットを表示します。</li><li><code>endPage</code> が総ページ数の1つ前より小さい場合、最後のページ番号の前にドットを表示します。</li><li>最初のページは <code>1</code> に設定され、最後のページは <code>totalPages</code> に設定されます。</li></ul><p>例えば、ページ数が3ページの場合は、ドットが表示されることなく、すべてのページ番号が表示されます。</p>

---
const { page, baseUrl } = Astro.props;
const { lastPage, currentPage, url } = page;
const paginationOptions = {
  alwaysShowPagination: true,
  showFirst: true,
  showLast: true,
  showItems: 5,
  showIndicator: true,
  showDots: true,
  dot: "...",
};
let {
  alwaysShowPagination,
  showFirst,
  showLast,
  showDots,
  showItems,
  showIndicator,
  dot,
} = paginationOptions;

// showItemsが偶数なら-1して奇数にする
if (showItems % 2 === 0 && showItems !== 0) {
  showItems -= 1;
}

const totalPages = lastPage;

// 表示するページ番号を計算
let startPage, endPage;
if (showItems === 0 || totalPages <= showItems) {
  startPage = 1;
  endPage = totalPages;
} else if (currentPage <= Math.floor(showItems / 2) + 1) {
  startPage = 1;
  endPage = showItems;
} else if (currentPage > totalPages - Math.floor(showItems / 2)) {
  startPage = totalPages - showItems + 1;
  endPage = totalPages;
} else {
  startPage = currentPage - Math.floor(showItems / 2);
  endPage = currentPage + Math.floor(showItems / 2);
}

let pageNumbers = [...Array(endPage - startPage + 1)].map(
  (_, i) => startPage + i
);

// dot機能の適用
if (showDots && totalPages >= showItems + 1 && showItems > 3) {
  if (startPage > 1) pageNumbers[1] = 0;
  if (endPage <= totalPages - 1) pageNumbers[pageNumbers.length - 2] = 0;

  // 1番目を1、items番目を最後のページにする
  pageNumbers[0] = 1;
  pageNumbers[pageNumbers.length - 1] = totalPages;
}

const getAriaLabel = (pageNum: number) =>
  pageNum !== currentPage
    ? `ページ ${pageNum}`
    : `現在のページ（ページ ${pageNum}）`;
---

{
  alwaysShowPagination || totalPages > 1 ? (
    <nav aria-label="ページネーション" class="pagination">
      {showIndicator && (
        <p class="indicator" aria-live="polite">
          {currentPage} / {totalPages}
        </p>
      )}
      <ul class="list">
        {showFirst && url.first && (
          <li class="item first">
            <a
              href={url.first}
              class="link"
              aria-label={`最初のページ（ページ 1）`}
            >
              &#171;
            </a>
          </li>
        )}
        {url.prev && (
          <li class="item prev">
            <a
              href={url.prev}
              class="link"
              aria-label={`前のページ（ページ ${currentPage - 1})`}
            >
              &#139;
            </a>
          </li>
        )}
        {pageNumbers.map((pageNum) => (
          <li class="item">
            {pageNum === 0 ? (
              <span class="dot" aria-hidden="true">
                {dot}
              </span>
            ) : (
              <a
                href={`${baseUrl}${pageNum > 1 ? `/${pageNum}` : ""}`}
                class:list={["link", pageNum === currentPage ? "current" : ""]}
                aria-current={pageNum === currentPage ? "page" : undefined}
                aria-label={getAriaLabel(pageNum)}
              >
                {pageNum}
              </a>
            )}
          </li>
        ))}
        {url.next && (
          <li class="item next">
            <a
              href={url.next}
              class="link"
              aria-label={`次のページ（ページ ${currentPage + 1})`}
            >
              &#155;
            </a>
          </li>
        )}
        {showLast && url.last && (
          <li class="item last">
            <a
              href={url.last}
              class="link"
              aria-label={`最後のページ（ページ ${totalPages}）`}
            >
              &#187;
            </a>
          </li>
        )}
      </ul>
    </nav>
  ) : null
}

<h3 id="ha214098e44">まとめ</h3><p>最初と最後の「前へ」「次へ」ボタンはpaginate関数を使用して実装しました。</p><p>間のページリストやドット表示は、ChatGPTを活用して基本的な構成を作り、その後、細かな条件調整を自分で行いました。ChatGPTにまとめて条件を提示すると希望通りにならないことがあるため、各オプションについて具体的な条件を提示し、段階を経て最終的な仕様に仕上げました。</p><p></p><p>📝参考サイト</p><ul><li><a href="https://docs.astro.build/ja/guides/routing/#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" target="_blank" rel="noopener noreferrer nofollow">Astro公式 ページネーション</a></li><li><a href="https://code.vool.jp/blog/astro-pagination/" target="_blank" rel="noopener noreferrer nofollow">Astroのサイトにページ番号付きのページネーションを実装する方法</a></li><li><a href="https://zenn.dev/chabatake_i/articles/astro-microcms" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSで作ったサイトにページネーションを実装する</a></li></ul>