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

2023/12/15 11:00

ポスト

　本連載は、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ページが表示されることを確認しましょう。

　同様に、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つのページを共通ヘッダー内のリンクで行き来できるようになっていることが確認できます。

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

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

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

　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を読み込む記述に修正します。

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

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

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

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

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

　生成された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の最大のおすすめポイントと言えるでしょう。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

・全ての過去記事が閲覧できます
・会員限定メルマガを受信できます

メールバックナンバー

新規会員登録無料

次のページ
AstroコンポーネントのスタイルとCSSの便利なスコープ化

この記事は参考になりましたか？

印刷用を表示

ポスト

Astroで始める静的サイト作成入門連載記事一覧: Webフレームワーク「Astro」を便利に使う～環境のカスタマイズとAstro 4.3まで...

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

「Astro」で爆速Web開発をはじめよう！インストールから環境構築までを解説

もっと読む

この記事の著者: 池原健治（イケハラ　ケンジ）

　ゲーム会社のUXデザイナー。デザイン、プロトタイピング、コーディングなどを担当する他、SNSでの情報発信や、登壇活動など、幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事