Astroのslotについて

Astroのslotについて

現在、Astroを勉強中です。Astroのslotについて、理解するのが難しかったので、調べたことをまとめてみました。

slotとは

Astroにはslotという機能があります。slotは、コンポーネント内で動的なコンテンツを挿入するための仕組みです。

slotを使用すると、親コンポーネントから子コンポーネントに対して、動的なコンテンツを渡すことができます。具体的には、親コンポーネントで定義されたコンテンツを、子コンポーネントの特定の場所に挿入することができます。

例えば、以下のようなAstroコンポーネントがあるとします。

<div>
  <h1>Hello, World!</h1>
  <slot />
</div>

上記のコンポーネントを呼び出す際に、子コンポーネントのコンテンツが、slotの位置に挿入されます。

<MyComponent>
  <p>This is some content.</p> 
  <p>This is some more content.</p>
</MyComponent>

下記のように、<p>要素が、<slot />要素の内部に挿入され、次のようにレンダリングされます。

<div>
  <h1>Hello, World!</h1>
  <p>This is some content.</p>
  <p>This is some more content.</p>
</div>

上記はシンプルな例ですが、もう少し具体的な例で説明してみます。

HeaderコンポーネントとFooterコンポーネントを含む、Layout.astroというコンポーネントを作ります。Layout.astroのコードは下記のようになります。

---
import "../styles/global.css";
import Header from "../components/Header.astro";
import Footer from '../components/Footer.astro';

export interface Props {
	title: string;
}

const { pageTitle } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
	<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>{ pageTitle }</title>
	</head>
	<body>
		<Header />
		<slot /> //ここに子要素が入る
		<Footer />
		<script>
			import "../scripts/menu.js";
  	</script>
	</body>
</html>

Layout.astroをindex.astroで、importして使います。

Layout.astroを呼び出した先で、Layoutタグで囲った中身のコンテンツが入るところが、 Layout.astroでslotタグが書いてある部分です。

---
import Layout from "../layouts/Layout.astro";
---

<Layout>
    <!-- ここから -->
    <h1>My First Astro Site</h1>
    <div class="main-content">
      <h2>Astro...</h2>
       <p>Laerning Astro.</p>
    </div>
    <!-- ここまでのコンテンツがLayoutのslotに入る -->
</Layout>

実際の見た目で説明すると、下記のようなイメージです。

名前付きのslot

デフォルトでは、コンポーネントに渡されたすべての子要素が、slotに入ります。

Astroでは、名前付きのslotも使えます。名前付きのslotを利用すると、対応するスロット名を持つHTML要素のみをslotの場所に渡すことができます。

<div>
    <slot name="title" />
    <slot name="content" />
</div>

呼び出し先でslot名を指定します。対応したスロット名の場所に、レンダリングされます。

<my-component>
  <h2 slot="title">Hello, World!</h2>
  <p slot="content">Astroは素晴らしいフレームワークです。</p>
</my-component>

おわりに

以上、簡単にAstroのslotについてまとめてみました。高速なWebサイトを作ることができるAstroを、ぜひ今後使ってみたいと思います。

まい

フロントエンドエンジニア目指して、勉強中です。

Astroカテゴリの最新記事