はじめに
2026年1月、Astro の開発元は Cloudflare に買収された。
このニュースを聞いて、
- もう Cloudflare Pages 専用になるのか
- 今までの Astro と別物になるのでは
- 今から触る意味はあるのか
と感じた人も少なくないはずだ。
実際のところ、Astro がやっていること自体はこれまでと大きく変わっていない。
一方で、デプロイ先としての Cloudflare との距離がはっきり縮まったのは事実だ。
このタイミングは、Astro を初めて触る人にとっても、
名前だけ知っていて後回しにしていた人にとっても、
一度きちんと全体像を掴むにはちょうどいい区切りになっている。
Astro は何をするフレームワークか
Astro は、静的サイト生成（SSG）を主用途とした Web フレームワークだ。
目的は明確で、静的 HTML を成果物として生成することにある。
2026年時点で確認できる Astro の特徴は次の通り。
- ビルド結果は静的 HTML が基本
- JavaScript は明示的に指定しない限り配信されない
.astroという専用フォーマットでページを記述する- React / Vue / Svelte などのコンポーネントを利用できる
- MIT ライセンスのオープンソース
Astro は SPA を作るためのフレームワークではない。
ブラウザ側で状態を持つアプリケーションを前提にした設計でもない。
HTML を生成し、それをそのまま配信する。
Astro はこの前提にかなり忠実に作られている。
Astro が扱う「静的サイト」
Astro が前提としている静的サイトは、
HTML ファイルをそのまま並べるだけの運用とは異なる。
- ページ構造を分割する
- 共通レイアウトを定義する
- データはビルド時に組み立てる
その結果として、最終的に静的 HTML が生成される。
成果物は静的だが、生成までの過程は構造化されている。
Astro はこの点をはっきり意識して設計されている。
プロジェクトの作成
必要な環境
- Node.js 20 以上（Node.js 22 LTS 推奨）
作成手順
npm create astro@latest初期設定は以下で問題ない。
- TypeScript：Yes
- Framework：None
- Install dependencies：Yes
最初は Astro 単体の構造を見ることに集中した方が分かりやすい。
開発サーバの起動
npm run devhttp://localhost:4321 にアクセスすると、サンプルページが表示される。
この段階で、生成されている HTML と読み込まれている JavaScript を
ブラウザの開発者ツールで一度確認しておくと、
Astro の性格が掴みやすい。
ディレクトリ構造
src/
├─ pages/
│ ├─ index.astro
│ └─ about.astro
├─ layouts/
│ └─ Layout.astro
├─ components/
└─ styles/pagesは URL に対応するlayoutsは共通レイアウトcomponentsは再利用部品stylesは CSS
ディレクトリ構造とページ構成がそのまま対応しており、
初見でも把握しやすい。
.astro ファイルの基本
---
const title = "Hello Astro";
---
<h1>{title}</h1>--- 内の JavaScript はビルド時に実行され、ブラウザでは動かない。
HTML 部分は静的に出力される。
.astro は、HTML を生成するためのテンプレートと考えると理解しやすい。
レイアウトの共通化
---
// src/layouts/Layout.astro
---
<html>
<body>
<slot />
</body>
</html>---
import Layout from "../layouts/Layout.astro";
---
<Layout>
<h1>トップページ</h1>
</Layout>ここで行っているのは HTML 構造の整理だけだ。
状態管理やロジックは持たない。
CSS の扱い
import "../styles/global.css";<style>
h1 {
color: red;
}
</style>特別なビルド設定や独自構文を覚える必要はない。
この点は Astro の分かりやすさの一つだ。
JavaScript を使う場合
<MyComponent client:load />この指定がある場合のみ、JavaScript が配信されブラウザで実行される。
指定しなければ、静的 HTML として出力された結果だけが残る。
ビルド成果物
npm run builddist/ ディレクトリに、
静的 HTML / CSS / 必要最小限の JavaScript が生成される。
Cloudflare との関係
Astro は Cloudflare に買収されたが、
Astro の利用に Cloudflare のサービスは必須ではない。
一方で、以下は事実として整理されている。
- Cloudflare Pages 向けの公式アダプタが提供されている
- Cloudflare Pages は主要なデプロイ先の一つとして扱われている
- Astro のビルド成果物は Pages の標準的な使い方と一致している
Cloudflare Pages での基本設定
- ビルドコマンド：
npm run build - 出力ディレクトリ：
dist
2026年現在の注目ポイント（補足）
- Content Collections
Markdown / MDX コンテンツを型安全に管理できる。
ブログやドキュメントサイトではほぼ標準的な構成になっており、
記事一覧やタグ検索なども型安全に扱える。 - Astro Actions（サーバーアクション）
フォーム処理や簡易的なサーバーサイド処理を比較的簡単に書ける仕組み
（2026年現在、正式サポートが拡大中）。 - View Transitions
ページ遷移時のアニメーションを比較的簡単に組み込める。
SPA を使わずに体験を向上させたいケースで利用されている。
Astro が向いている用途
Astro は次のような用途と相性が良い。
- 企業・個人ブログ（複数記事＋共通レイアウト）
- ポートフォリオサイト
- ドキュメントサイト / ナレッジベース
- ランディングページの複数枚構成
- コンテンツ重視の中規模〜大規模静的サイト（100〜数千ページ規模）
まとめ
Astro は「静的サイトを、でもちゃんとした構造で作りたい」というニーズに対して、
2026年時点でもかなり合理的な選択肢の一つだ。
Cloudflare 傘下になったことでデプロイ体験は整理されたが、
Astro を使うかどうかは Cloudflare を使うかどうかとは独立して決められる。
まずは npm create astro@latest を叩いてみて、dist/ の中身を覗いてみるだけでも十分価値がある。
「あ、こういう仕組みだったのか」と腑に落ちる瞬間が待っているはずだ。
コメント