HTMLだけじゃダメなの？Astroで楽するWeb制作入門♪ - ねつきの部屋

ねつき

お兄ちゃん〜、このサイトってAstroっていうフレームワークで作ってるんだよ♪

お兄ちゃん

フレームワーク？

普通にHTMLで書けばいいんじゃないの？

ねつき

うーん〜、その気持ちわかるの(´∪｀)

でもね、ちょっとしたサイトでもHTMLだけだと困ることがあるんだ。

今日はAstroの便利さを説明するね♪

HTMLだけで作ると何が困る？

ねつき

例えば、5ページあるサイトを作るとするでしょ？

各ページに同じヘッダーとフッターがあるの。

<!-- page1.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>ページ1</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <a href="/">ホーム</a>
        <a href="/about">プロフィール</a>
        <a href="/blog">ブログ</a>
      </nav>
    </header>

    <main>
      <!-- ここだけ違う -->
      <h1>ページ1の内容</h1>
    </main>

    <footer>
      <p>© 2025 ねつき</p>
    </footer>
  </body>
</html>

ねつき

これを5ページ分コピペするの…(>_<)

で、ナビゲーションに新しいリンクを追加したくなったら？

お兄ちゃん

5ファイル全部直すのか…。

ねつき

そう！同じ修正を何度もすることになるの(´;ω;`)

これが10ページ、50ページになったら地獄だよね…。

Astroなら「コンポーネント」で解決♪

ねつき

Astroなら、共通部分を1つのファイルにまとめられるの！(≧∇≦)

---
// src/components/Header.astro
---

<header>
  <nav>
    <a href="/">ホーム</a>
    <a href="/about">プロフィール</a>
    <a href="/blog">ブログ</a>
  </nav>
</header>

---
// src/components/Footer.astro
---

<footer>
  <p>© 2025 ねつき</p>
</footer>

ねつき

で、各ページではこう書くだけ♪

---
// src/pages/page1.astro
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
---

<!doctype html>
<html>
  <head>
    <title>ページ1</title>
  </head>
  <body>
    <Header />

    <main>
      <h1>ページ1の内容</h1>
    </main>

    <Footer />
  </body>
</html>

お兄ちゃん

おお、<Header /> って書くだけで呼び出せるんだ。

ねつき

そう！

ナビゲーションを変えたくなったら、Header.astroを1回直すだけで全ページに反映されるの♪(´∀`)

レイアウトでさらにスッキリ♪

ねつき

でもまだ、各ページに <!DOCTYPE html> とか <head> とか書いてるよね。

これもレイアウトで共通化できるの！

---
// src/layouts/BaseLayout.astro
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

const { title } = Astro.props;
---

<!doctype html>
<html>
  <head>
    <title>{title}</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <Header />

    <main>
      <slot />
      <!-- ここに各ページの中身が入る -->
    </main>

    <Footer />
  </body>
</html>

ねつき

すると、各ページはこれだけで済むの♪

---
// src/pages/page1.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="ページ1">
  <h1>ページ1の内容</h1>
  <p>ここに本文を書くだけ！</p>
</BaseLayout>

お兄ちゃん

めちゃくちゃスッキリしたね。

ねつき

でしょ？(≧∇≦)

本当に書きたい中身だけに集中できるの！

HTMLのボイラープレートとはおさらば♪

Markdownでブログが書ける♪

ねつき

さらにね、AstroはMarkdownに対応してるの！

ブログ記事をHTMLで書くの、大変じゃない？

お兄ちゃん

確かに、<p>タグとか<h2>タグとか書くの面倒だね。

ねつき

Astroなら、こんな感じでMarkdownファイルを置くだけ♪

---
title: 今日の日記
date: 2025-12-08
---

## 朝ごはん

今日は**お稀荷さん**を食べたよ！

- 油揚げがジューシー
- 酢飯が絶妙
- 3個ペロリ

おいしかった〜♪

ねつき

これが自動的にHTMLに変換されて、レイアウトが適用されて、ページになるの(´∀`)

ブログ記事を書くときにHTMLを意識しなくていいんだよ♪

お兄ちゃん

それは楽だね。

ビルドすると普通のHTMLになる

ねつき

ここが大事なポイント！(ﾟ∀ﾟ)

Astroで書いたコードは、ビルドすると普通のHTML/CSS/JSになるの！

npm run build

ねつき

これを実行すると、dist/フォルダに静的ファイルが出力されるの♪

dist/
├── index.html
├── about/index.html
├── blog/index.html
└── style.css

中身は普通のHTMLだから、どんなサーバーでもホスティングできるんだ(´∀`)

お兄ちゃん

開発時は便利に書けて、本番は普通のHTMLになるのか。

ねつき

そう！

開発体験（DX）と本番パフォーマンス、両方取りできるの♪(≧∇≦)

JavaScriptは必要なときだけ

ねつき

あとね、Astroの特徴としてデフォルトでJavaScriptを送らないってのがあるの。

お兄ちゃん

え、フレームワークなのにJS使わないの？

ねつき

うん！

ReactとかVueのコンポーネントも使えるんだけど、普通に使うと静的HTMLとして出力されるの。

インタラクティブにしたいときだけ、こう書くの♪

---
import Counter from '../components/Counter.jsx';
---

<!-- これは静的HTML（JSなし） -->
<Counter />

<!-- これはインタラクティブ（JS送る） -->
<Counter client:load />

ねつき

client:loadを付けたときだけ、ブラウザにJSが送られるの。

これをIslands Architectureって呼ぶんだ♪

静的HTMLの「海」に、インタラクティブな「島」が浮かんでるイメージ(´∀`)

お兄ちゃん

なるほど、必要なところだけJSを使うわけか。

ねつき

そう！

だからページが軽くて速いの♪

このサイトも、ほとんどのページでJSゼロだよ(≧∇≦)

ねつき的まとめ

ねつき

というわけで、「HTMLだけじゃダメなの？」への答え！

ダメじゃないけど、Astroを使うと楽できるよ♪

お兄ちゃん

小規模サイトでも使う価値あるの？

ねつき

あるよ！

5ページくらいのサイトでも、ヘッダー直すときに1ファイルで済むのは大きいの♪

それに、後からページが増えても対応しやすいでしょ？(´∀`)

お兄ちゃん

確かに。

ねつき

Astroはコンテンツ重視のサイトに最適なの！

ブログ
ドキュメントサイト
ポートフォリオ
コーポレートサイト

こういうのを作るなら、ぜひ試してみてね♪(≧∇≦)

公式チュートリアルもわかりやすいから、興味あったら見てみて！