【2026年版】Astroの始め方 — ゼロJSで爆速Webサイトを作る完全ガイド
- Astroプロジェクトの作成と起動
- .astroコンポーネントとレイアウトの書き方
- Markdownでのコンテンツ管理
- 静的サイトのビルドとデプロイ
セットアップ手順
# Astroプロジェクト作成
npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev.astroコンポーネントの基本構造
---
// フロントマター（サーバーサイドで実行されるJavaScript/TypeScript）
const title = "はじめてのAstroページ";
const items = ["りんご", "みかん", "バナナ"];
---
<!-- テンプレート（HTMLとJSXの中間のような構文） -->
<html lang="ja">
<head><title>{title}</title></head>
<body>
<h1>{title}</h1>
<ul>
{items.map(item => <li>{item}</li>)}
</ul>
</body>
</html>
<style>
h1 { color: purple; }
</style>よくある詰まりポイント
Q: ReactやVueのコンポーネントをAstroで使いたい
→ Astroのインテグレーション（npx astro add react など）を追加すれば使えます。ただし client:load や client:visible などのディレクティブで「いつクライアント側でハイドレートするか」を指定する必要があります。
Q: .astro ファイルと .md ファイルの使い分けは？
→ ページレイアウトや再利用コンポーネントは .astro、ブログ記事などのコンテンツは .md または .mdx が向いています。Content Collections機能を使うとMarkdownファイルの型安全な管理ができます。
Q: ビルドが遅い
→ npm run build で本番ビルドしてください。npm run preview でビルド結果をローカルで確認できます。
ペンギン先生 AstroはWebサイトを作るためのフレームワークで、最大の特徴は「デフォルトでJavaScriptをゼロにする」ことなんだ。普通のフレームワークはページ全体をJavaScriptで動かすけど、Astroは静的なHTMLを出力して、必要な部分だけJavaScriptを読み込む。だから表示速度がめちゃくちゃ速いんだよ。
ひよこ JavaScriptゼロなのにちゃんとしたサイトが作れるの？
ペンギン先生 もちろん！ブログやドキュメントサイト、ポートフォリオみたいなコンテンツ中心のサイトならJavaScriptがなくても十分なんだ。ボタンのクリックやフォームみたいなインタラクティブな部分だけ、あとで説明する「Islands Architecture」で部分的にJSを足せるよ。
ひよこ プロジェクトを始めるにはどうすればいいの？
ペンギン先生 ペンギン先生 ひよこ ページやレイアウトはどうやって作るの？
ペンギン先生 ひよこ ブログ記事みたいなコンテンツをたくさん管理するにはどうするのかな？
ペンギン先生 そこで活躍するのが「Content Collections」だよ。src/contentフォルダにMarkdownファイルをまとめて置いて、スキーマで型を定義できるんだ。たとえばblogコレクションを作れば、タイトルや日付のバリデーションを自動でやってくれる。型安全にコンテンツを扱えるから、記事が増えても管理しやすいんだよ。
ひよこ 「Islands Architecture」って何なの？名前がかっこいいけど難しそう…
ペンギン先生 ペンギン先生 ひよこ 静的サイトだけじゃなくてサーバーサイドレンダリングもできるの？
ペンギン先生 ひよこ 作ったサイトをデプロイするにはどうしたらいいの？
ペンギン先生 ひよこ Astroってどんなサイトに向いているのかな？
ペンギン先生 ひよこ なるほど、まずはブログから試してみるね！