Astro入門：初心者でも作れる超高速Webサイト

  • #Astro
  • #静的サイト
  • #初心者
  • #Web開発

Astro入門：初心者でも作れる超高速Webサイト

導入

  • 「Next.jsやReactは難しそう…」と感じたことはありませんか？
  • Astro はそんな人にぴったりの、軽量で高速な静的サイトジェネレーターです。
  • HTMLと少しのJavaScriptで、モダンなWebサイトを簡単に作ることができます。

前提条件

  • Node.jsがインストールされている
  • コマンドライン操作に少し慣れている
  • HTMLの基礎を理解している

ステップ1：Astroプロジェクトを作成

  • まずはターミナルで以下のコマンドを実行します。
npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev
  • これで開発サーバーが起動し、http://localhost:4321 にアクセスすればAstroサイトが見られます。

ステップ2：ページを作ってみよう

  • Astroでは、src/pages フォルダに .astro ファイルを作るだけでページが追加されます。
---
// index.astro
---
<html lang="ja">
  <body>
    <h1>こんにちはAstro！</h1>
    <p>これは私の最初のAstroサイトです。</p>
  </body>
</html>
  • ファイル名がそのままURLになります（例：about.astro → /about）。

ステップ3：コンポーネントを活用する

  • Astroでは、UIをコンポーネントとして再利用できます。
---
// src/components/Header.astro
---
<header>
  <h1>My Astro Site</h1>
</header>
---
// src/pages/index.astro
import Header from "../components/Header.astro";
---
<html>
  <body>
    <Header />
    <p>Astroは本当に軽くて速い！</p>
  </body>
</html>

ベストプラクティス

  • JavaScriptを最小限に抑えてHTML中心の構成にする。
  • コンポーネントを分けて整理整頓する。
  • デプロイはVercelやNetlifyを活用する。

よくある質問

  • Q. AstroはReactやNext.jsより簡単？
    • A. はい。AstroはHTML中心なので、Reactを知らなくても始められます。
  • Q. JavaScriptフレームワークも使える？
    • A. はい、React・Vue・Svelteを部分的に組み合わせ可能です。

まとめ

  • Astroは、静的サイト生成の新定番です。
  • シンプルなのにモダンで、速いのに拡張性もあります。
  • 初めてのモダンWeb開発に、Astroは最適な選択肢です。