LESSON 04 · 約24分

propsとslotで部品を再利用する

内容の違いを引数にし、HTMLのまとまりを差し込みます。

コードを試す前に

02で作成する基本プロジェクトが前提です。各コード例は独立した学習用の例です。

各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。

開発環境の準備を確認する →

このレッスンでわかること

Astro.propsで値を受け取れる
propsとslotを用途で使い分けられる

値の違いをpropsにする

同じ見た目のカードでも、題名やリンク先は異なります。呼び出し側でtitleやhrefを渡し、受け取り側でAstro.propsから取り出します。既定値があると省略時の振る舞いも明確になります。propsはHTMLを作るための入力で、渡すだけでブラウザー上の双方向同期が始まるわけではありません。

まとまった内容はslotへ

説明文にリンクや強調を含めたいとき、文字列propsへHTMLを詰め込むより、呼び出しタグの内側に書いた要素を<slot />で受け取ると自然です。slot内の既定内容は、差し込まれる内容がない場合に使えます。

名前付きslotで配置先を分ける

見出しと本文と補足を別の場所へ置きたいなら、<slot name="footer" />などを使います。呼び出し側では直下の要素にslot="footer"を付けます。大量の細かなslotを最初から作るより、まず一つの明確な役割を持つ部品にします。

再利用の境界を考える

二つのページで同じ構造を使う、変更を一箇所にまとめたい、といった理由で部品を分けます。見た目だけが少し似ている内容まで無理に一つへまとめると条件が増えます。部品の名前と入力を見れば用途が分かる状態を目指しましょう。

カードが受け取る値と内容

src/components/NoteCard.astro

---
const { title, href, label = '旅のメモ' } = Astro.props;
---
<article>
  <p>{label}</p>
  <h2><a href={href}>{title}</a></h2>
  <div><slot>説明は準備中です。</slot></div>
  <footer><slot name="footer" /></footer>
</article>

この部品単体はURLになりません。下のページから使います。

文字列とHTMLをそれぞれ渡す

src/pages/cards.astro

---
import NoteCard from '../components/NoteCard.astro';
---
<NoteCard title="港の散歩" href="/notes/harbor/">
  <p>朝の<strong>静かな港</strong>を歩きました。</p>
  <small slot="footer">徒歩30分</small>
</NoteCard>

NoteCard.astroを作成してから実行します。リンク先のページは06または09で別途用意します。

TRY IT YOURSELF

2枚のカードを作る

異なるtitleとhrefを持つNoteCardを2枚表示する
片方は本文を渡さず既定のslot内容を確かめる
footerの補足を一方だけ表示する

できたらOK：部品の構造を複製せず、表示内容の違いを表せる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。