Under the Snow

Astroの勉強を始めよう

• 1分で読める
Web開発
Astro静的サイトジェネレーターWebフレームワーク

なぜAstroなのか？

Astroは、2021年に登場した比較的新しい静的サイトジェネレーター（SSG）です。特徴は以下のとおりです：

  • 高速レンダリング: デフォルトでHTMLを出力し、必要な部分だけをJS化する「Islands Architecture」を採用
  • 多様なUIフレームワーク対応: React / Vue / Svelte / Solid を同一プロジェクトで併用可
  • 柔軟なコンテンツ管理: Markdown / MDX / Content Collections で記事やドキュメントを管理
  • シンプルな学習曲線: 基本はHTMLとMarkdownが分かれば使い始められる

公式でも「Less client JS（クライアントJSを減らす）」を理念として掲げており、サイト速度の最適化を重視しています。

インストールと初期設定

Astroの学習を始める一番簡単な方法は、公式のCLIを使うことです。

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

# ディレクトリに移動して依存関係をインストール
cd my-astro-site
npm install

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

これで http://localhost:4321 にアクセスすると、Astroのスターターサイトが表示されます。

プロジェクト構成の基本

Astroプロジェクトはシンプルな構成になっています。

  • src/pages/: ページファイル（.astro, .md, .mdx など）を配置
  • src/components/: 再利用可能なコンポーネントを配置
  • public/: 画像やフォントなど静的ファイルを配置

.astro ファイルはHTMLに似た文法で、そこにコンポーネントを挿入できます。

---
// フロントマター部分（JavaScript/TypeScript）
const name = "Astro";
---

<html>
  <body>
    <h1>こんにちは、{name}!</h1>
  </body>
  </html>

学習ステップのおすすめ

  • 公式チュートリアルを一通り読む（Astro Docs）

  • Markdownで記事を作ってみる（例: src/pages/first-post.md を追加）

  • コンポーネントを試す（React / Vue など好きなFWを導入）

  • デプロイする（Vercel / Netlify / Cloudflare Pages など）

まとめ

Astroは「高速で扱いやすい次世代SSG」として、ブログやドキュメントサイト、ポートフォリオ制作に最適です。まずは小さなプロジェクトを作りながら、公式ドキュメントを併読して理解を深めていきましょう。 🚀 今日からAstroの勉強を始めてみませんか？ - for me!

関連記事