はじめに

#Astroとは

Astro は、コンテンツ重視のWebサイトを構築するために設計されたモダンな静的サイトジェネレーター（SSG）兼Webフレームワークです。ブログ、ドキュメントサイト、ポートフォリオなど、コンテンツを中心に据えたサイト制作に特に強みを発揮します。

Astroの最大の特徴は、「Islands Architecture（アイランドアーキテクチャ）」 と呼ばれる設計思想です。デフォルトではJavaScriptをクライアントに一切送らず、必要な部分だけをインタラクティブな「アイランド（島）」として動的に読み込みます。これにより、表示速度が速く、パフォーマンスに優れたサイトを簡単に作れます。

また、Astroは フレームワーク非依存 という点も大きな魅力です。React、Vue、Svelte、SolidJSなど、好きなUIフレームワークのコンポーネントを同じプロジェクト内で混在させて使えます。すでに別フレームワークの知識がある方も、そのまま活かせます。

#Astroの主な特徴

• ゼロJS、デフォルト — 必要な箇所だけJSを送るため高速
• コンポーネントベース — .astroファイルで直感的にHTMLとロジックを記述
• マルチフレームワーク対応 — React・Vue・Svelteなどを併用可能
• Markdown / MDXサポート — コンテンツをMarkdownで手軽に管理
• ビルド時レンダリング（SSG）＋SSR対応 — 用途に応じて柔軟に選択可能

#このシリーズについて

このシリーズでは、Astroを使ったWebサイト構築をゼロから学んでいきます。環境構築から始まり、ページ作成、コンポーネントの活用、そしてデプロイまでを順を追って解説していく予定です。Astroに興味があるWeb開発初心者の方から、他フレームワークからの乗り換えを検討している方まで、幅広く役立てていただける内容を目指します。

#前提

本シリーズでは以下を前提に進めていきます。

• node.js/npm
• VSCode

それでは、さっそく始めていきましょう！