技術ブログに「Astro + Cloudflare」を選ぶ3つの技術的理由

技術ブログのための最適解

技術ブログを自作しようとした時、選択肢は無限にあります。Next.js, Nuxt, Gatsby, Hugo… その中で、私が自信を持って「これが現代のベストプラクティスだ」と推せるのが、Astro と Cloudflare Pages の組み合わせです。

なぜこのスタックが優れているのか、3つのポイントで解説します。

1. コンテンツ主体のサイトに特化した「Zero-JS」

技術ブログの本質は「テキストを読むこと」です。複雑なアプリケーションのような状態管理は必要ありません。

Astroは「デフォルトでJavaScriptを排除する」という設計思想で作られています。 ReactやVueで書かれたコンポーネントであっても、ビルド時に純粋なHTML/CSSに変換（レンダリング）され、ユーザーのブラウザにはJSが含まれない状態で届きます。

メリット: ブラウザでのJS実行待ち（ハイドレーション）が発生しないため、低スペックなデバイスでも一瞬で表示されます。
結果: GoogleのCore Web Vitalsにおいても、特別なチューニングなしで満点近いスコアを叩き出せます。

2. 記事データを「型」で守る (Type Safety)

ブログ運用で意外と困るのが、メタデータの管理ミスです。「日付フォーマットがバラバラ」「必須画像の指定忘れ」などが起きがちです。

Astroには Content Collections という強力な機能があり、MarkdownのFrontmatterに対してTypeScriptでスキーマ定義ができます。

// src/content/config.ts
const blog = defineCollection({
    schema: z.object({
        title: z.string(),
        pubDate: z.date(),
        tags: z.array(z.string()), // 配列であることを強制！
        isDraft: z.boolean().default(false),
    }),
});

この機能のおかげで、記述ミスがあればビルドが失敗するようになります。「壊れた記事が公開される」という事故を、システムレベルで防ぐことができるのです。

3. 必要な機能だけを「Component」で作る

Astroは、React, Vue, Svelteなど、好きなUIフレームワークのコンポーネントを混在させて使うことができます。基本は静的なHTMLですが、もし「ここだけインタラクティブなグラフを表示したい」と思ったら、その部分だけ Reactとして動かすことができます（Islands Architecture）。

<!-- 通常の静的コンテンツ -->
<Header />

<!-- ここだけJSとして動く（Reactなど） -->
<InteractiveGraph client:visible />

<Footer />

「基本は軽く、必要な時だけリッチに」。このメリハリの効いた設計が、ブログというメディアに完全にフィットします。

まとめ

Zero-JS: 不要なJSを削ぎ落とし、読む体験を阻害しない。
Type Safe: 記事データの整合性をビルドプロセスで保証する。
Islands: 必要な部分だけを動的にするという合理的な設計。

オーバーエンジニアリングにならず、かつモダンな開発体験を享受できる。それがAstroを選ぶ理由です。