AIを使ってWebサイトを作り、HTMLコードを出力することも増えてきました。そのままサーバーにアップしてもいいのですが、ヘッダーなど複数ページで繰り返す部分がそのままだと後で修正が大変なことに。
そんなときはAstroを使うことで繰り返し部分をコンポーネント(部品)化して再利用したり、Markdownで記事を書いてHTMLテンプレートで表示できて便利です。
ここではAstroを使うのが初めての人やAstroで何ができるか知りたい方向けに基本的な情報を分かりやすく解説します！
1.Astroとは？
一言でいうと、Astroは高速なWebサイトを作るためのフレームワークです。主な特徴は以下の通りです。
Astroは速い！
デフォルトで、ページの表示に不要なJavaScriptを極力読み込まない仕組み（アイランドアーキテクチャ）を採用しているため、非常に高速なWebサイトを構築できます。ブログやポートフォリオ、企業の紹介サイトなど、表示速度が重要なサイトに特に向いています。
静的サイトが得意、でも動的サイトもいける
基本的には静的なHTMLファイルを生成しますが、必要に応じてサーバーで動的にページを生成する機能（SSR）も使えます。
HTMLをそのまま使える
ReactやWordpressではHTMLをそのまま使うことはできませんが、AstroならHTMLコードをコピペしてもちゃんと動きます。
HTMLによく似た独自のファイル形式 (.astro) を使ってページやコンポーネントを作成します。ファイルの先頭部分 (--- で囲まれた部分) に書いたJavaScriptはサーバー側で動き、テンプレート部分はHTMLを生成します。
HTMLを分割して効率よく管理
AIなどのツールで出力したHTMLファイルは複数ページで同じものを繰り返しており、どこか修正しようと思うと複数ページで修正が必要になります。
HTMLを分割して管理しておくことで一度の修正が全てのページに反映されるため効率よくWebサイトを運用できます。
2.Astroでできることをまとめてみた
Astroを使うと、以下のようなことができます。
- 高速なWebサイト/ブログ/ポートフォリオなどの構築 (静的サイト生成 or サーバーサイドレンダリング)
- HTMLのように書ける
.astroファイルでページや再利用可能なUIコンポーネント（ヘッダー、ボタンなど）を作成 - 特別な設定なしで Markdown や MDX を使ってブログ記事やドキュメントを作成
- 好きなUIフレームワーク（React, Vue, Svelteなど）を部分的に組み込める (必要な箇所だけインタラクティブにする「アイランド」)
- 画像の自動最適化（WebP変換やサイズ変更など）
- ブログ記事などのコンテンツを効率的に管理 する機能 (コンテンツコレクション)
- お問い合わせフォームの処理など、簡単なサーバー側の処理 を記述
- データベースとの連携 (Astro DB)
- 多言語サイト の構築サポート
- ページ遷移を滑らかにするアニメーション (View Transitions)
- 様々なホスティングサービスへ簡単にデプロイ するための仕組み (アダプター)
3.Astroと他のフレームワークとの比較
React (Next.js) や Vue (Nuxt.js)、Svelte (SvelteKit) といった他の人気フレームワークと比べて、Astroには以下のような違いがあります。
JavaScriptの扱い
Astroは「デフォルトでJavaScriptを読み込まない」ことを目指し、表示速度を最優先します。他の多くのフレームワークは、ページ全体をJavaScriptで制御することが基本です。
UIフレームワーク
Astroは、React、Vue、Svelteなどを「部品」として必要な箇所だけで使えます。複数のフレームワークを混在させることも可能です。他のフレームワークは通常、そのフレームワークの書き方で全体を構築します。
アーキテクチャ
Astroの「アイランドアーキテクチャ」は、静的なHTMLをベースに、インタラクティブな部分だけを分離して読み込む考え方です。これにより、初期表示の速さを実現しています。
簡単に言うと、Astroは 「コンテンツ中心の高速なサイト」 を作るのが得意で、必要に応じてReactなどのリッチなUI部品をトッピングできる、というイメージです。
4.Astroを使うメリット・デメリット
Astroのメリット
- 速い！: 作成されるサイトがデフォルトで非常に高速
- 柔軟: 好きなUIフレームワークを選んで使える
- 書きやすい: HTML/CSS/JSの基本知識があれば学習しやすい
- 機能豊富: 画像最適化やコンテンツ管理などの機能がある
- シンプル: 構造がシンプルなのでサイト開発がシンプルに進む
Astroのデメリット
ここまでメリットを中心に書いてきましたが、次のようなデメリットもあります。
高度なWebアプリ
非常に複雑なユーザーインタラクション（例: SNSのタイムライン、高機能な管理画面）がページの大部分を占めるようなWebアプリケーションには、React (Next.js) などの方が適している場合があります。
状態管理
Astro自体には複雑な状態管理（ユーザーログイン情報など）の仕組みはあまりなく、UIフレームワークや外部ライブラリと組み合わせるのが一般的です。
Astroでホームページ作成チュートリアル
ここからは実際にAstroでページを作成しながらAstroの基本的な使い方を解説していきます。
Astroで必要なページを作成
- Astro.js インストールガイド
- Astroに最初のページを追加＆リンク設定！
- AstroでMarkdownブログ記事を作成する方法
- AstroをCMS化してブログ記事を効率よく管理する方法
- Astro タグ別記事一覧ページの作り方
- Astro 新着記事一覧を最大5件で表示する
- Astro.js 記事一覧でページネーションを導入する
- Astro.js ブログ記事にアイキャッチ画像を追加する
- Astro.js ファビコンの変更方法
- AstroサイトをGitHubPagesで公開する方法
Astroのサイトをデザイン
- Astro.js サイトにTailwindCSS(v4)を導入する
- Astroでヘッダーコンポーネントを作成する
- Astroでトップページを作成する
- Astro.js 記事一覧ページをTailwindでスタイリングする
- Astro.js ブログ記事詳細ページをTailwindでスタイリングする
- Astro.js HTMLで作成したLPを移植する
AstroのサイトでSEO対策
- Astroサイトに動的なOGP/Twitterカードメタタグを追加する方法
- Astroのサイトに構造化マークアップ(JSON-LD)を導入する
- Astro.js サイトマップを追加する方法
- AstroサイトにGA4、GTMを導入する