Astroにおけるコンポーネントの基本～初心者もベテランも欲しかった！ 最適化されたCSSスコープ～

　本連載は、Web制作者である筆者が、Astro（アストロ）というフレームワークに出会って、爆速静的サイト構築に向けて歩き出すまでの物語です。第3回では、Astroの再利用可能なUIコンポーネントの作成と運用方法について解説していきます（2023年11月時点での最新バージョンであるAstro 3.4.0を基に解説しています）。

作成・運用が手軽なAstroコンポーネント

　過去2回の連載で、.astroファイル（Astroコンポーネント）における、HTMLとほぼ同様なコーディングを体感できたかと思いますが、Astroの最も柔軟で強力な機能の一つは、再利用可能なUIコンポーネントを簡単に作成・運用することができるという点です。

　例えば、第2回で作成したindex.astroを複製して少し中身を修正し、about.astroを作成します。

---
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Aboutページです。">
    <title>About</title>
  </head>
  <body>
    <main class="main">
      <article class="article">
        <h1 class="title">About</h1>
        <p>Aboutページです。</p>
      </article>
    </main>
  </body>
</html>

　上記ファイルを保存し、開発サーバー（astro dev）にアクセスして、Aboutページが表示されることを確認しましょう。

Aboutページ

　同様に、Homeページ（index.astro）の中身をシンプルに修正しつつ、Aboutページ（about.astro）とお互いを行き来できる、共通のヘッダーを追加します。

Homeページの中身の修正

---
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Homeページです。">
    <title>Astro</title>
  </head>
  <body>
    <!-- 共通Header ここから -->
    <header>
      <a href="/"><img src="/favicon.svg" alt="Astro" width="40" height="40"></a>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
    <!-- 共通Header ここまで -->
    <main class="main">
      <article class="article">
        <h1 class="title">Astro</h1>
        <p>Homeページです。</p>
      </article>
    </main>
  </body>
</html>

Aboutページの中身の修正

---
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Aboutページです。">
    <title>About</title>
  </head>
  <body>
    <!-- 共通Header ここから -->
    <header>
      <a href="/"><img src="/favicon.svg" alt="Astro" width="40" height="40"></a>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
    <!-- 共通Header ここまで -->
    <main class="main">
      <article class="article">
        <h1 class="title">About</h1>
        <p>Aboutページです。</p>
      </article>
    </main>
  </body>
</html>

　開発サーバーで、2つのページを共通ヘッダー内のリンクで行き来できるようになっていることが確認できます。

Homeページ（共通ヘッダーあり）

Homeページ（共通ヘッダーあり）

Aboutページ（共通ヘッダーあり）

　続いて、これらのページに組み込んだ共通ヘッダーを、再利用可能なUIコンポーネントとして分離していきます。

　まず、src/componentsフォルダーを作成し、中にHeader.astroファイルを作成します。

　ファイル名には特に縛りはありませんが、src/pages内の（HTMLに変換される）Astroコンポーネントと区別するために、Cap & Lowのネーミングルールにしています。

src/components/Header.astroを作成する

　Header.astroを開き、index.astroとabout.astroに追加した共通ヘッダーのコードを抜き出して記述します。

<header>
  <a href="/"><img src="/favicon.svg" alt="Astro" width="40" height="40"></a>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

　最後に、index.astro内に記述していた共通ヘッダーのコードの代わりに、以下のようにHeader.astroをコンポーネントとして読み込む記述に修正します。

---
import Header from '../components/Header.astro';
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Astroのサンプルページです。">
    <title>Astro</title>
  </head>
  <body>
    <!-- 共通Header ここから -->
    <Header />
    <!-- 共通Header ここまで -->
    <main class="main">
      <article class="article">
        <h1 class="title">Astro</h1>
        <p>Homeページです。</p>
      </article>
    </main>
  </body>
</html>

　修正内容は以下のとおりです。

• コンポーネントスクリプト内に以下の記述を追加（index.astroから見た相対パスにする） import Header from '../components/Header.astro';
• 共通ヘッダーを記述していた箇所を<Header />に変更

　同様に、about.astroもHeader.astroを読み込む記述に修正します。

　そして、開発サーバーで、変更前と変わらず共通ヘッダーが表示されていることを確認してください。

Homeページ

　見た目が変わらないのでわかりにくいですが、Header.astro内の記述を修正すると、HomeページとAboutページの両方のヘッダー部分に修正が反映されていることがわかります。

　試しにこの状態で、Astroをビルドしてみましょう。

　astro buildを実行すると、静的Webサイトとして、distフォルダ内にHTMLファイル一式が生成されます。

distフォルダにHTMLファイル一式が生成される

　その後、astro previewを実行すると、生成された静的サイトをブラウザでプレビューすることもできます。

静的HTMLとしてビルドされたHomeページ

　生成されたHTMLのソースコードを見てみると、

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="description" content="Homeページです。"><title>Astro</title></head><body><!-- 共通Header ここから --><header><a href="/"><img src="/favicon.svg" alt="Astro" width="40" height="40"></a><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav></header><!-- 共通Header ここまで --><main class="main"><article class="article"><h1 class="title">Astro</h1><p>Homeページです。</p></article></main></body></html>

　importしたHeader.astroのコードが、各HTMLに埋め込まれた形で最適化されていることがわかります。

　Astroでは、ほとんどHTMLを書くのと同じ感覚で、再利用可能なUIコンポーネントを作成し、好きな場所で読み込んで表示することができます。そしてビルド後は、コンポーネントを内包した一つの静的なHTMLとして書き出されます。

　このように、コンポーネント作成・運用の手軽さ、敷居の低さがAstroの最大のおすすめポイントと言えるでしょう。