Astroの便利な機能まとめメモ
フレームワーク初心者の私が便利だなと思った機能たちをご紹介します。
データの受け渡し
Astro.propで、親コンポーネントからデータを渡すことができます。
例えばLayout.astroでデータを受け取るように指示します。
---
const { pageTitle, description } = Astro.props;
---
<head>
//省略
<title>{pageTitle}</title>
<meta name="description" content={description}>
</head>
その後、子ページでpageTitleやdescriptionを定義して渡します。
<BaseLayout pageTitle="各ページのタイトル" description="ディスクリプション">
//省略
</BaseLayout>
スロット機能
テンプレートに対して、特定の子要素を入れ込むことができます。
スロットに名前をつけることで、対応する場所にのみ渡すことができます。
また、<slot></slot>の中にあるコンテンツは、もし渡されるデータがない場合の代替になります。
src/layouts/Layout.astro
<header>
<slot name="header">
<h1>デフォルトヘッダー</h1>
</slot>
</header>
<main>
<slot /> <!-- デフォルトスロット（メインコンテンツ） -->
</main>
src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';
---
<Layout>
<header slot="header">
<p>カスタムヘッダーです。デフォルトのヘッダーではなく、これが入ります。</p>
</header>
<p>これはメインコンテンツです。デフォルトスロットに入ります。Layout.astroに代替コンテンツがないため、このpタグがもしなければ何も表示されません。</p>
</Layout>
また、名前付きのスロットは他コンポーネントに渡すことも可能です。
画像の自動最適化
Astroのコンポーネントを利用すると、自動的にwebpに変換されます。
利用するにはImageコンポーネントと画像をインポートする必要があります。
---
import { Image } from 'astro:assets';
import sample from "../img/sample.png";
---
<Image src={sample} alt="srcとaltは必須です" />
画像は基本的に/srcディレクトリに配置する。
/publicディレクトリからも読み込み可能ですが、最適化は行われません。また、この場合/publicディレクトリに存在する画像に対して、Astroはwidthとheightを解析できないため、指定が必要です。
/srcディレクトリだと勝手にwidthとheightを入れてくれるので、CLSに対しても最適化されてかなり便利です。
CSSについて
astroファイル内で利用する<style>は自動的にスコープされ、その中でのみ適用されるので、コンポーネントごとの管理が楽です。逆に、is:globalを付与することでスコープを無効にすることも可能です。
また、langを指定するとscssで書くことができます。
<style lang="scss">
.box {
margin: 0 auto;
&:first-child {
color: #222;
}
span {
font-weight: bold;
}
}
</style>