Streamlining Astro Development with Claude Code: Content Site Guide

Astro開発をClaude Codeで加速する

Astroは「アイランドアーキテクチャ」によるパフォーマンスの高さと、コンテンツファーストな設計で注目を集めるフレームワークです。Claude Codeを使えば、Astroの独自記法やコンテンツコレクションの設計もスムーズに進められます。

プロジェクトセットアップ

> Astroプロジェクトを作成して。
> 要件：
> - TypeScript strict
> - Tailwind CSS
> - MDXサポート
> - サイトマップ自動生成

Claude Codeは astro.config.mjs の設定とともに、必要なインテグレーションの追加コマンドも提示してくれます。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [tailwind(), mdx(), sitemap()],
  markdown: {
    shikiConfig: {
      theme: 'github-dark',
    },
  },
});

コンテンツコレクションの設計

スキーマ定義

> ブログ記事用のContent Collectionスキーマを作成して。
> title, description, pubDate, tags, draft, coverImageを含めて。

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string().max(100),
    description: z.string().max(200),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
    coverImage: z.string().optional(),
  }),
});

export const collections = { blog };

アイランドアーキテクチャの活用

Astroの最大の特徴であるアイランドアーキテクチャでは、インタラクティブなコンポーネントだけにJavaScriptを読み込みます。

---
// 静的部分はサーバーでレンダリング
import Header from '../components/Header.astro';
import SearchBar from '../components/SearchBar.tsx';
import Footer from '../components/Footer.astro';
---

<Header />
<!-- client:visible でビューポートに入った時だけハイドレーション -->
<SearchBar client:visible />
<Footer />

Claude Codeに「このコンポーネントはclient:loadとclient:visibleどちらが適切？」と聞くと、ユースケースに応じた最適なディレクティブを提案してくれます。

動的ルーティングとページ生成

> タグ別の記事一覧ページを動的に生成して。
> ページネーション付きで。

---
// src/pages/tag/[tag]/[...page].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths({ paginate }) {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  const tags = [...new Set(posts.flatMap(post => post.data.tags))];

  return tags.flatMap(tag => {
    const filtered = posts.filter(post => post.data.tags.includes(tag));
    return paginate(filtered, { params: { tag }, pageSize: 10 });
  });
}
const { page } = Astro.props;
---

パフォーマンス最適化

Astroはデフォルトで高速ですが、画像最適化やプリフェッチの設定でさらに改善できます。Claude Codeに「Lighthouseスコアを100にしたい」と伝えると、具体的な最適化ポイントを提案してくれます。

Summary

Claude Codeを活用すれば、Astroの独自記法やコンテンツコレクションの設計を素早く習得し、高パフォーマンスなサイトを構築できます。SSR/SSG比較ガイドやSEO最適化も合わせて参考にしてください。

Astroの詳細はAstro公式ドキュメントを参照してください。