Webサイトの高速化と開発効率を両立できるとして、注目されている新しい静的サイトジェネレーター（SSG）Astro。
React、Vue、Svelteなど、複数のフレームワークを混在できる柔軟性と、“ゼロJavaScript”を実現するパフォーマンスが魅力です。
この記事では、Astroの特徴から基本的な使い方、初期セットアップ方法までを丁寧に解説します。
🌟 Astroとは？
Astroは、高速な静的Webサイトを簡単に構築できるSSGでありながら、React・Vue・Svelte・Solidなどの多様なコンポーネントフレームワークと共存できるのが特長です。
さらに、**デフォルトでクライアントサイドJSを生成しない（＝ゼロJS）**ため、ページ読み込みが非常に高速になります。
🧩 Astroの主な特徴
- ✅ ゼロJavaScript by default：不要なJSを読み込まないから高速
- ✅ 複数フレームワーク共存：React・Vue・Svelteを同時に使える
- ✅ MDX・Markdownに対応：ブログなどのコンテンツ管理に最適
- ✅ 部分的にSPA化も可能：必要な場所だけインタラクティブに
- ✅ コンポーネントベース：レイアウトやUI部品の再利用がしやすい
🚀 開発環境を整えよう（セットアップ）
Astroを始めるには、Node.jsとnpm（またはpnpm/yarn）が必要です。
1. Node.jsのインストール（まだの人向け）
→ https://nodejs.org/ja から最新版をインストール
2. プロジェクトの作成
npm create astro@latest
プロンプトに従って、プロジェクト名・テンプレート（ブログ・基本構成など）を選択します。
3. プロジェクトの起動
cd プロジェクト名
npm install
npm run dev
ブラウザで http://localhost:4321 にアクセスすると、Astroが立ち上がります！
✍ 基本構成とファイル構造
my-astro-site/
├── public/ ← 静的ファイル（画像やフォント）
├── src/
│ ├── components/ ← コンポーネント（.astro / .jsxなど）
│ ├── layouts/ ← レイアウトテンプレート
│ ├── pages/ ← 各ページ（*.astro）
│ └── styles/ ← CSSやTailwindなど
├── astro.config.mjs
├── package.json
/pages/ 配下にあるファイルは、そのままURLに対応します。
例：
src/pages/index.astro→/src/pages/about.astro→/about
💡 .astroファイルの基本
.astro ファイルは、HTML + JS + Markdown + フレームワークのコンポーネントが混ざったような書き心地。
---
// これはフロントマター：JavaScriptが書ける領域
const siteTitle = "ようこそ Astro へ";
---
<html lang="ja">
<head>
<title>{siteTitle}</title>
</head>
<body>
<h1>{siteTitle}</h1>
<p>これはAstroで作られたページです。</p>
</body>
</html>
🔗 コンポーネントの読み込み（例：Reactコンポーネント）
---
// Reactコンポーネントの読み込み
import Counter from '../components/Counter.jsx'
---
<Counter client:load />
client:load：ページ読み込み時にJSを実行- 他にも
client:idle,client:visible,client:onlyなどの制御方法あり
🧪 Markdown対応（ブログにも最適）
/src/pages/blog/hello-world.md のようにMarkdownを書くだけでブログ記事が生成されます。
ヘッダーにはフロントマター（タイトルや日付など）を書きます。
---
title: "はじめてのブログ記事"
pubDate: "2025-07-01"
---
ようこそ！これはAstroで書かれた最初のブログ記事です。
✅ まとめ
Astroは…
- 静的サイトの高速化を追求した次世代SSG
- マルチフレームワーク対応で柔軟
- 最小限のJavaScriptで表示速度が爆速
- ブログやLP、ドキュメントサイトなどに最適
