Astro入門：モダンな静的サイト構築

Astro Web開発 チュートリアル

Astroとは

Astro は「Content-Driven」な Web サイトを構築するためのフレームワークです。デフォルトで JavaScript をゼロにする「アイランドアーキテクチャ」が特徴です。

なぜ Astro を選んだか

  1. パフォーマンスが圧倒的に良い - デフォルトでゼロ JS
  2. 好きなUIフレームワークを使える - React, Preact, Vue, Svelte など
  3. Content Collections - 型安全なコンテンツ管理
  4. MDX サポート - マークダウンの中でコンポーネントが使える

Content Collections の設定

Astro v5 では、コンテンツコレクションの設定が src/content.config.ts に変わりました。

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog };

アイランドアーキテクチャ

Astro のアイランドアーキテクチャは、ページの大部分を静的 HTML として配信し、インタラクティブな部分だけを「アイランド」として JavaScript を読み込みます。

---
// 静的な部分
import Header from '../components/Header.astro';
// インタラクティブな部分
import Counter from '../components/Counter.tsx';
---

<Header />
<Counter client:visible />

client:visible のようなディレクティブで、コンポーネントの読み込みタイミングを制御できます。

まとめ

Astro はブログやドキュメントサイトに最適なフレームワークです。Content Collections による型安全なコンテンツ管理と、アイランドアーキテクチャによる高パフォーマンスが魅力です。