Astroでコンポーネントを使用する

Astroのコンポーネント周りの設定を試してみます。

サンプルコード

まずは特に設定を行わないでコンポーネントを使ってみます。
src/pages/index.astro を以下の内容にします。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout>
	<Card />
</Layout>

先頭でコンポーネントの読み込みをすることで、ページ内で使用できます。

次に読み込んでいるコンポーネントを作成します。
src/components/ ディレクトリ内にCard.astro を作成して、以下の内容にします。

<div class="card">
	card
</div>

コンポーネントのデモページ

次にコンポーネント側で値を受け取れるpropsを使ってみます。
src/pages/index.astro に値を渡す設定を追加します。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout>
	<Card
		title="タイトル"
	/>
</Layout>

Cardコンポーネントにtitleを渡したので、src/components/Card.astro で受け取って表示してみます。

---
const { title } = Astro.props;
---
<div class="card">
	<h2 class="card_title">{title}</h2>
</div>

これでコンポーネントで値を受け取ることができました。
propsのデモページ

先ほどのpropsで受け取る値がない場合の初期値を設定してみます。
src/pages/index.astro で値を渡さないパターンを追加します。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout>
	<Card
		title="タイトル"
	/>
	<Card />
</Layout>

src/components/Card.astro で値がない場合の初期値の設定を追加します。

---
const { title = "初期値タイトル" } = Astro.props;
---
<div class="card">
	<h2 class="card_title">{title}</h2>
</div>

propsの初期値のデモページ

コンポーネントの子要素に記述した内容(開始タグと終了タグの間に記述した内容)を、slotでレンダリングできます。
src/pages/index.astro でコンポーネントの呼び出し部分に子要素を追加します。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout>
	<Card
		title="タイトル"
	>
		<p>説明文テキスト</p>
		<p>テキストテキストテキスト</p>
	</Card>
</Layout>

src/components/Card.astro にslotを追加します。

---
const { title = "初期値タイトル" } = Astro.props;
---
<div class="card">
	<h2 class="card_title">{title}</h2>
	<div class="card__description">
		<slot />
	</div>
</div>

これでコンポーネントの子要素として記述した内容をコンポーネント内でレンダリングできました。
slotのデモページ

slotの子要素に記述した内容がslotの初期値になります。
src/components/Card.astro にslotの子要素を追加してみます。

---
const { title = "初期値タイトル" } = Astro.props;
---
<div class="card">
	<h2 class="card_title">{title}</h2>
	<div class="card__description">
		<slot>
			<p>初期値説明文</p>
		</slot>
	</div>
</div>

src/pages/index.astro にテストの読み込みを追加してみます。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout>
	<Card
		title="タイトル"
	>
		<p>説明文テキスト</p>
		<p>テキストテキストテキスト</p>
	</Card>
	<Card
		title="タイトル2"
	/>
</Layout>

slotの初期値の表示が確認できました。
slotの初期値のデモページ

slotに名前をつけることで、1つのコンポーネントに対して複数のslotを設定できます。
src/components/Card.astro に複数のslotを設定します。

---
const { title = "初期値タイトル" } = Astro.props;
---
<div class="card">
	<h2 class="card_title">{title}</h2>
	<div class="card__img">
		<slot name="card-img" />
	</div>
	<div class="card__description">
		<slot name="card-description" />
	</div>
</div>

slotの名前はname属性での付与で、今回の場合card-imgとcard-descriptionのslotを作成しました。

src/pages/index.astro でそれぞれのslotに要素を渡してみます。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---
<Layout>
	<Card
		title="タイトル"
	>
		<img
			src="https://cly7796.net/blog/sample/using-components-in-astro/img.jpg"
			alt=""
			width="400"
			slot="card-img"
		/>
		<Fragment slot="card-description">
			<p>説明文テキスト</p>
			<p>テキストテキストテキスト</p>
		</Fragment>
	</Card>
</Layout>

13,15行目で行っているように、slot属性にそのスロット名を指定する形になります。
2つ目のcard-descriptionのようにルートに複数の要素が入る場合、Fragmentコンポーネントを使って指定します。

これで2つのslotを表示することができました。
名前付きslotのデモページ