Astro 5.0が来た！Content Layerを即座に試してみた

今朝 5 時（日本時間）に Astro 5.0 がリリースされました！X（旧 Twitter）のタイムラインが騒がしくなっているので、早速試してみました。

結論：Content Layer は革命的。でも移行は慎重に。

何が変わったのか

Astro 5.0 の主な変更点：

• Content Layer: コンテンツ管理の新しい抽象化レイヤー
• Server Islands: 部分的なサーバーレンダリング
• astro:env: 環境変数の型安全な管理
• Vite 6対応: ビルドパフォーマンスの向上

今回は特に話題の Content Layer を深掘りします。

Content Layerでビルド時間が激減

このブログ（記事数 100 以上）での計測結果：

• Astro 4.x: 45.2 秒
• Astro 5.0: 12.8秒 🚀

約 3.5 倍高速化！これは開発体験が劇的に変わるレベルです。

Content Layerの実装方法

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
  // Content Layerの設定
  loader: {
    name: 'blog-loader',
    async load({ store, parse, render }) {
      // カスタムローダーロジック
      const posts = await fetchFromCMS();
      for (const post of posts) {
        store.set(post.id, {
          ...post,
          rendered: await render(post.content),
        });
      }
    },
  },
});

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
  // Content Layerの設定
  loader: {
    name: 'blog-loader',
    async load({ store, parse, render }) {
      // カスタムローダーロジック
      const posts = await fetchFromCMS();
      for (const post of posts) {
        store.set(post.id, {
          ...post,
          rendered: await render(post.content),
        });
      }
    },
  },
});

移行時の注意点

1. 破壊的変更

# アップグレード前に必ずバックアップ
git add . && git commit -m "Before Astro 5 upgrade"

# アップグレード
npm install astro@5

2. 型定義の更新

Astro 5 では型定義が変更されています：

// 旧
import type { CollectionEntry } from 'astro:content';

// 新
import type { ContentEntry } from 'astro:content';

3. プラグインの互換性

まだ対応していないプラグインがあります。私が遭遇したもの：

• astro-compress: エラー発生（Issue 提出済み）
• @astrojs/sitemap: 警告は出るが動作する
• astro-icon: 問題なし

Content Layerの実用例

外部 CMS からのデータ取得を劇的に簡単にできます：

const products = defineCollection({
  type: 'data',
  loader: {
    name: 'shopify-products',
    async load({ store }) {
      const products = await fetch('https://api.shopify.com/products')
        .then(res => res.json());
      
      products.forEach(product => {
        store.set(product.id, {
          title: product.title,
          price: product.price,
          updatedAt: new Date(product.updated_at),
        });
      });
    },
    // 5分ごとに再取得
    watch: ['*/5 * * * *'],
  },
});

Server Islandsも試してみた

部分的なサーバーレンダリングが可能に：

---
// components/StockPrice.astro
export const server:island = true;
export const server:cache = 60; // 60秒キャッシュ
---

<div class="stock-price">
  現在の株価: {await fetchStockPrice()}円
</div>

静的サイトの中に動的なコンテンツを埋め込めるのは画期的です。

パフォーマンス分析

Astro 5 では特に「パース」と「変換」のステップが高速化されています。

まとめ

Astro 5.0 は期待以上のアップデートでした。特に：

✅ Content Layer: 外部データソースとの連携が簡単に ✅ ビルド高速化: 3 倍以上の速度向上（プロジェクトによる） ✅ Server Islands: 静的サイトに動的要素を追加

ただし、プロダクション環境への導入は慎重に。まだリリース直後なので、バグがある可能性があります。

個人的には、このブログも Astro 5 に移行済みです。今のところ大きな問題はありません！

参考リンク

• Astro 5.0 リリースノート
• Content Layer ドキュメント
• 移行ガイド