Astroコンポーネントのprops
さて、実際のWebサイトにおいてコンポーネントを再利用するうえでは、まったく同じ中身ではなく、一部の内容を書き換えて使用したい場面も多いと思います。
例えば、以下のようにButtonコンポーネントを作成したとします（先ほど作成したglobal.cssで記述したCSSカスタムプロパティを使用することもできます）。
<button type="button" class="button">Get Started</button>
<style>
.button {
display: block;
padding: 8px 32px;
border: none;
background-color: var(--color-primary);
color: #fff;
}
</style>
このButtonコンポーネントを、index.astro内でHeaderコンポーネントと同様にimportして使用すると、
---
import "../css/global.css";
import Header from '../components/Header.astro';
import Button from '../components/Button.astro';
---
<!DOCTYPE html>
<html lang="ja">
<head>...(略)...</head>
<body>
...(略)...
<main class="main">
<article class="article">
<h1 class="title">Astro</h1>
<p>Homeページです。</p>
<Button />
</article>
</main>
</body>
</html>
このように共通のボタンとして表示されますが、ページによってはボタンの文言を変更したい場合もあるでしょう。
そのような場合は、propsと呼ばれるコンポーネント内で使用する情報群を受け渡すことができます。
まず、Buttonコンポーネントを以下のように修正します。
---
const { text = "Get Started" } = Astro.props;
---
<button type="button" class="button">{text}</button>
...(省略)...
修正箇所は以下のとおりです。
-
コンポーネントスクリプト内でtextという変数を宣言し、propsを受け取る（初期値は”Get Started”）
const { text = "Get Started" } = Astro.props; -
button要素内で、受け取った変数を配置する（変数は{}で囲う）
<button type="button" class="button">{text}</button>
次に、index.astroを以下のように修正します。
---
import "../css/global.css";
import Header from '../components/Header.astro';
import Button from '../components/Button.astro';
---
<!DOCTYPE html>
<html lang="ja">
<head>...(略)...</head>
<body>
...(略)...
<main class="main">
<article class="article">
<h1 class="title">Astro</h1>
<p>Homeページです。</p>
<Button text="Download" />
</article>
</main>
</body>
</html>
修正箇所は以下のとおりです。
-
Buttonコンポーネントを配置するときに、
textという変数に表示したい文言を入れて、propsとして情報を渡す。<Button text="Download" />
これで共通のButtonコンポーネントとして使用しつつ、一部情報を書き換えて任意の文言で表示することができます（何もpropsを渡さなければ、初期値の”Get Started”が表示されます）。
まとめ
今回ご説明した内容のまとめです。
- 再利用可能なUIコンポーネントの作成
- スコープされたCSSと外部CSSによるスタイリング
- propsによる情報の受け渡し
これらがAstroによるコンポーネント運用の基本知識となります。
次回は、Astroの最新機能で実際にどのようなWebサイトが構築できるのかを紹介しつつ、自分に合った環境構築について解説していきたいと思います。
