2025年9月29日

Last updated on 2025年9月29日

Astro.jsの特徴と使い方｜静的サイトを高速に作れる理由を初心者向けに紹介

はじめに

Web制作を学んでいる人の中で、最近特に注目されているフレームワークのひとつが Astro.js（アストロ） です。
「ReactやVueのようなJavaScriptフレームワークは知っているけど、Astroって何が違うの？」
「初心者でも使えるの？」

そんな疑問を持つ方に向けて、この記事では Astro.jsの特徴やメリット、実際の使い方 をわかりやすく解説します。実はこのサイトもAstro.jsで構築されています。
特に、静的サイトを高速に構築したい人や、ブログやポートフォリオサイトを作りたい人には最適の内容です。

1. Astro.jsとは？

Astro.jsは、2021年に登場した比較的新しいフレームワークで、静的サイト生成（SSG: Static Site Generation） に特化しています。

開発元：Astro Technology Company
特徴：HTML中心で必要な部分だけにJavaScriptを適用
用途：ブログ、ポートフォリオ、企業サイト、ドキュメントサイトなど

👉 他のフレームワーク（Next.jsやNuxt.js）と違って、最初から「静的サイトを高速に作る」ことに最適化されているのが大きな特徴です。

2. Astro.jsの大きな特徴

2-1. ゼロJavaScript by default

Astroは「デフォルトではJavaScriptを読み込まない」仕組みになっています。
つまり、サーバーで生成された静的HTMLだけを返すため、読み込み速度が非常に速い。

必要な部分だけに「島（Islands）」と呼ばれる形でJavaScriptを差し込みます。
この「Islands Architecture」がAstroの最大の特徴です。

2-2. フレームワークに依存しない柔軟性

Astroでは、React / Vue / Svelte / Solid.js など複数のUIフレームワークを混在させて利用可能 です。

例：トップページはVue、ブログ部分はReactコンポーネント、という組み合わせもOK。
既存資産を活かせるため、導入ハードルが低いです。

2-3. MarkdownやMDX対応

ブログやドキュメント制作に便利な Markdownファイルをそのままページ化 できます。
さらにMDX（Markdown + JSX）を使えば、Markdown内にReactコンポーネントを埋め込むことも可能。

👉 個人ブログや技術ブログに最適。

2-4. SEOに強い

高速表示 → Core Web Vitals改善
サーバーサイドレンダリング（SSR）や静的生成に対応
metaタグや構造化データも扱いやすい

👉 検索流入を狙う個人ブログや企業サイトにピッタリ。

2-5. 豊富な公式インテグレーション

Tailwind CSS
Sass/SCSS
Google Fonts
Sitemap自動生成
RSSフィード生成

👉 プラグインを追加する感覚で導入できるので初心者でも扱いやすいです。

3. Astro.jsを使うメリット

表示速度が圧倒的に速い
→ 静的HTML配信が中心で、必要最小限しかJSを読み込まない。
学習コストが低い
→ HTML/CSSの基礎があれば扱いやすく、JS知識が浅くても導入可能。
他フレームワークと共存可能
→ ReactやVueの既存コンポーネントを再利用できる。
ブログ・ポートフォリオに最適
→ Markdown対応＋自動ビルド＋SEOに強い。

4. Astro.jsのインストールと使い方

4-1. 新規プロジェクト作成

# プロジェクト作成
npm create astro@latest my-astro-project

# ディレクトリに移動
cd my-astro-project

# パッケージをインストール
npm install

# 開発サーバー起動
npm run dev

ブラウザで http://localhost:4321 にアクセスすると、初期ページが表示されます。

4-2. ディレクトリ構成

├── public/         # 静的ファイル（画像・アイコン）
├── src/
│   ├── components/ # コンポーネント
│   ├── layouts/    # レイアウト
│   └── pages/      # ページファイル（.astro）
├── astro.config.mjs # 設定ファイル

4-3. ページ作成の基本

src/pages/index.astro

---
title: "ホームページ"
---

<html lang="ja">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>Astroへようこそ！</h1>
    <p>これは最初のページです。</p>
  </body>
</html>

4-4. コンポーネントの利用

src/components/Header.astro

<header>
  <h1>サイトタイトル</h1>
  <nav>
    <a href="/">ホーム</a>
    <a href="/about">このサイトについて</a>
  </nav>
</header>

src/pages/index.astro

---
import Header from '../components/Header.astro';
---

<html lang="ja">
  <body>
    <Header />
    <h2>Astroの特徴</h2>
    <p>超高速な静的サイトを簡単に作れます。</p>
  </body>
</html>

4-5. デプロイ

Astroは静的HTMLを出力するので、さまざまな環境に簡単にデプロイ可能です。

Vercel
Netlify
Cloudflare Pages
GitHub Pages

といったホスティングサービスと相性抜群ですが、実は 共用サーバー（レンタルサーバー） でも問題なく運用できます。

共用サーバーにデプロイする場合

プロジェクトをビルドします。
```
npm run build
```
すると、dist/ フォルダにHTML・CSS・JavaScript・画像など、完成した静的ファイル一式が出力されます。
出力された dist/ フォルダ内のファイルを、FTPやSFTPを使ってサーバーの公開ディレクトリ（例：public_html/）にアップロードします。
これだけで、すぐにサイトが公開されます。

👉 WordPressなど動的CMSとは異なり、データベース不要で「ただの静的ファイル」として配信できるのがAstroの強みです。
そのため、エックスサーバー・ロリポップ・さくらのレンタルサーバー といった共用サーバーでも快適に動作します。

5. Astro.jsが向いている人・用途

向いている人

HTML/CSSは理解しているが、JSに自信がない初心者
ブログやポートフォリオを高速に作りたい人
SEOを意識してサイトを運営したい人

向いている用途

技術ブログ・オウンドメディア
個人ポートフォリオサイト
企業の製品サイト・ランディングページ
ドキュメントサイト

6. 初心者がつまづきやすいポイント

動的機能を入れるときの混乱
→ React/Vueを部分的に使う仕組み（Islands）が分かりにくいことも。
プラグイン選び
→ SEOやデザインを整えるには、適切なインテグレーションを選ぶ必要あり。
ビルド時のエラー
→ npm依存関係や設定でつまづくケースあり。

👉 公式ドキュメントやコミュニティフォーラムが充実しているので安心です。

7. 中級者向けの応用活用法

CMS連携：microCMS、Contentful、SanityなどのヘッドレスCMSと組み合わせて本格運用
eコマース対応：Shopify APIやStripeを組み込んだECサイト構築
マルチフレームワーク共存：ReactとVueを同時に利用して既存資産を活用

まとめ

Astro.jsは「静的サイトを高速かつ簡単に作れる」ことに特化した次世代フレームワークです。

ゼロJavaScript by default で爆速表示
複数フレームワークを併用可能
Markdown対応でブログ構築が楽
SEOに強く、公開後の集客にも有利
共用サーバーでも dist をアップロードするだけで公開できる

👉 初心者はまずブログやポートフォリオから始めて、慣れてきたらCMSやECとの連携に挑戦するのがおすすめです。

👉 エックスサーバーっていいの？初心者向けに徹底解説！
👉 フロントエンド開発に欠かせないReact入門｜初心者から中級者へのステップアップ
👉 WordPressをやめたいと思っているあなたへ-セキュリティ・アップデート地獄から抜け出す新しい選択肢「Astro.js × microCMS」
👉 Dockerを使った開発環境構築の基本ステップ