Astroの基本構造

2023/05/14

Astroを使う上で基本となるディレクトリ構成や.astroファイルの構造、コンポーネントのインポート方法やslotの使い方などを紹介していきたいと思います。

Astroのディレクトリ構成

Astroのディレクトリ構成は以下のようになります。公式サイトに詳細に記載があります。

srcディレクトリにはpages/layouts/componentsなどのサブディレクトリを作り.astroファイルを配置します。pagesにはページ単位のastroファイル、layoutsにはページ共通のベースレイアウトとなるastroファイル、componentsには共通部品を配置します。

publicディレクトリには画像ファイルやフォント、アイコンなどコード以外の要素を配置します。

distディレクトリにはビルドした後に出力されるhtmlファイルなどの静的ファイルが出力されます。このフォルダの中身を丸っとS3に配置すればそのまま利用できます。

Astroのページ構成

astroのページはレイアウト／ページ／コンポーネントから構成されます。

レイアウトは一番上位にあり、ホームページ共通のページレイアウトを定義します。ヘッダやフッダなど、各ページでも共通となるような要素やスタイルを定義します。

ページは各画面単位に作っていきます。レイアウトを継承して作ります。

コンポーネントは汎用的なパーツを部品として作り、必要なページやレイアウトから組み込みます。

また、.astroファイルは大きく３つのエリアから構成されます。

一番上は「---」で囲まれたエリアで制御文を書く領域です。他のコンポーネントをimportしたり、変数を定義、場合によっては制御文なども書きます。ここで定義した変数をHTML内で利用することができます。

次にHTMLを記述していきます。コンポーネント指向ですので、大本のタグは１つである必要があります。

最後にstyleを書きます。で囲んで中にCSSを定義していきますが、ここで定義したスタイルはこのファイル内でのみ有効です。

コンポーネントの挿入方法

コンポーネントとして作成したastroファイルを他のastroファイルにインポートする方法です。下図ではCard.astroというコンポーネントを作成してindex.astroで利用しています。

呼出元からimport分でCardコンポーネントを参照し、要素で利用します。

コンポーネント側でPropsを定義することで、呼出元からパラメータを受けり利用することができます。

Card.astroの例

---
export interface Props {
	title: string;
	body: string;
	img: string;
}
const { title, body, img} = Astro.props;
---
<li class="link-card">
  <p>{title}</p>
  <img src={img}>
  <div>{body}</div>
…
</li>

index.astroの例

---
import Card from "../components/Card.astro";
---
<Layout title=”トップページ”>
  <Card
    title="タイトル"
    body="説明"
    img="/img.png"
  />
</Layout>

レイアウトを継承してページを作成する仕組み（Slotの利用方法）

下図のようにインポート元のastroファイルに要素を入れると、インポート先からインポート元に要素を入れることができます。レイアウトを各ページで利用する場合などに利用できます。

下図だとLayout.astroにslot要素を入れて、Layout.astroをindex.astroにインポートして要素として利用します。この要素の中に入れた子要素がLayout.astroのslotに入ります。

Layout.astroの例

---
export interface Props {
	title: string;
}
—
<!DOCTYPE html>
<html lang="jp">
…
  <title>{title}</title>
  <body>
    <slot />
  </body>
</html>