現在、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を、ぜひ今後使ってみたいと思います。