🙄

【Astro】静的サイトの作成に必要最低限な要素だけを確認してみる

に公開
JavaScript
SSG
Astro
tech

はじめに

フロントのモダンフレームワーク・Astro を用いて静的サイトをサクッと作ってみましょう。
API 連携等はせず、簡易的な静的サイトを作るという点だけにフォーカスして、必要最低限の要素を確認してみたいと思います。

インストールとセットアップ

まずは新しいプロジェクトを開始しましょう。以下のコマンドをターミナルで実行します。

npm create astro@latest

プロジェクト名や npm の依存関係インストールについてなど、いくつかの質問への回答が済んだら、無事にプロジェクト作成完了です。
以下のコマンドで開発サーバーを起動しましょう

npm run dev

特にエラーがなければ、http://localhost:4321/でサイトを閲覧できるようになっているはずです。

新規ページの作成

src/pages/ディレクトリがページファイルの格納場所になります。ここに astro ファイルを作成していくことで、自動でルーティングが設定されます。（.astro以外にも、いくつかサポートされているファイルタイプがあります。今回は.astroで統一します。）

src/pages/index.astroがトップページとなるので、例えば同じ要領でsrc/pages/about/index.astroを作成してみましょう。http://localhost:4321/aboutでページが閲覧できるようになっていると思います。

これで、任意のディレクトリに新規ページを作成することができるようになりました。

コンポーネント

Astro では、再利用可能な UI パーツをコンポーネントとして作成できます。top ページと about ページを行き来できるように、ナビゲーションコンポーネントを作成して全ページ共通パーツとして配置してみましょう。
src/components内にHeader.astroを作成し、以下のようにリンクを配置します。

Header.astro
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

ヘッダーやナビゲーションバー、フッターなど、全ページ共通の UI を読み込ませるにはlayouts/Layout.astroを利用します。Layout は、複数のページで共通の HTML 構造を定義するための仕組みです。layouts/Layout.astroに、以下のような記述を追加します。

Layout.astro
---
import Header from '../components/Header.astro';

const title = Astro.props;
---

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
  </body>
</html>

Headerコンポーネントを import して、body内の任意の位置で呼び出します。mainタグ内のslotには、各ページ固有のコンテンツが代入される形になります。

Layout.astroの設定が完了し、全ページ共通のレイアウトを用意できました。あとは、各ページで読み込んで反映させましょう。

pages/index.astro
---

import Layout from '../layouts/Layout.astro';

---

<Layout title="Home">
  <p>top</p>
</Layout>
pages/about/index.astro
---

import Layout from '../layouts/Layout.astro';

---

<Layout title="About">
  <p>about</p>
</Layout>

コードフェンス内でLayout.astroを import し、<Layout></Layout>で呼び出します。Layoutタグ内に記述した内容が、先述した<slot>の内容として代入される、と言う形になります。

props の仕組みについて

props（プロパティ）は、コンポーネント間でデータを渡すための仕組みです。今回の例では、Layout に props を渡すことで、ページタイトルを動的に設定しています。

Layout.astro での受け取り方

Layout.astro
---
const title = Astro.props;
---
<title>{title}</title>

各ページでの渡し方

pages/index.astro
<Layout title="Home">
  <p>topページのコンテンツ</p>
</Layout>
pages/about/index.astro
<Layout title="About">
  <p>aboutページのコンテンツ</p>
</Layout>

動作の流れ

  1. ページファイルで <Layout title="Home"> のように props を渡す
  2. Layout コンポーネント内で Astro.props.title として受け取る
  3. {title} の部分に "Home" や "About" が代入される
  4. 結果として、各ページに適切なタイトルが設定される

この仕組みにより、同じ Layout コンポーネントを使いながら、ページごとに異なるタイトルを設定できます。

ページ遷移アニメーション

ここまでの要素でも静的サイトの作成は充分可能なのですが、少しリッチな演出としてページ遷移アニメーションを足してあげましょう。
実装自体はかなり簡単で、<ClientRouter />ルーティングコンポーネントをインポートし、<head>内に追加するだけで OK です。

Layout.astro
---
import Header from '../components/Header.astro';
import { ClientRouter } from 'astro:transitions';

const title = Astro.props;
---

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <ClientRouter />
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
  </body>
</html>

まとめ

この記事では、Astro を使った静的サイト作成の基本要素を確認しました。

  1. プロジェクトのセットアップ: npm create astro@latestでプロジェクト作成
  2. ページ作成: src/pages/ディレクトリにファイルを配置して自動ルーティング
  3. コンポーネント: 再利用可能な UI パーツの作成
  4. レイアウト: 全ページ共通の HTML 構造の定義
  5. ページ遷移アニメーション: リッチな演出の追加

静的サイト開発に必要な最低限の機能について見てきました。もちろんさらに便利な機能が多くありますので、次のステップとして公式ドキュメントを参照してみてください。

Discussion