はじめに
---
const title = Astro.props;
---
<!doctype html>
<html lang="ja">
<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>{title}</title>
</head>
<body>
<header id="header"></header>
<main id="main">
<slot />
</main>
<footer id="footer"></footer>
</body>
</html>
Astroでは、こんな感じで作成したコンポーネントを
---
import Layout from '@/layouts/Layout.astro';
---
<Layout title="hoge" />
別のファイルでimportして呼び出すことができます。
ところで、何故にAstroでは
---
const title = Astro.props;
---
という変数定義の仕方をとるのでしょう？
Astroを触り始めてからしばらく「そういうもの」として深く考えずに書いてきましたが、やはりちゃんと知っておいた方がいいと思い、また、私のように何となくで「Astro.props」と書いているAstro初学者の方もいるのではないかと考えたため、本記事の作成に至りました。
そもそも「Astroオブジェクト」が何なのか分からない
Astro.propsは、「Astroオブジェクトのpropsというプロパティ」ということを意味しています。
しかし私にはこの「Astroオブジェクト」の正体が何なのか、どこでどういう働きをしているのか、そして何よりconstとの関係性がどういうものなのかが不透明でした。
結論から言うと、この「Astroオブジェクト」は、Astroのどこからでもアクセス可能な様々なプロパティを保有したグローバルなオブジェクトです。そのうち「props」と言うプロパティは、親コンポーネントから受け取ったプロパティの値を一旦保持し、子コンポーネントに受け渡すという、いわば仲介業者のような役割を果たします。
Astro.propsが具体的にどのように機能するのか
---
import Layout from '@/layouts/Layout.astro';
---
<Layout title="hoge" />
先ほどのこのコードを例に取って、詳しい流れを見ていきましょう。
親コンポーネントindex.astroで、Layoutと言う子コンポーネントを呼び出しています。その際、titleプロパティに"hoge"と言う値を指定しました。
ここで指定した"hoge"が、Astro.props、つまりAstroオブジェクトのpropsというプロパティに一旦格納されます。まず、ここに私の勘違いがありました。title="hoge"は、直接Layoutコンポーネントに伝えられるわけではないのです。
それから、一旦Astro.propsに保有された"hoge"は、子コンポーネントLayout.astro内で、ある方法で呼び出されます。
そう、その方法が
---
const title = Astro.props;
---
というわけです！
コードを書くとき、基本的に子コンポーネント側で、titleなどのプロパティを定義してから、親コンポーネントで呼び出すときにプロパティの値を指定する、という流れになるため、勘違いが生じてしまっていたのですが、実際の処理の流れは逆で、親コンポーネントで属性に指定した値が、Astro.propsを経由して、子コンポーネントでプロパティを定義した際に格納される、という風になっているのです。
↑こんなイメージ
おわりに
AstroどころかJSの知識もほとんどない初学者のため、他にこんなところで躓く人がいるのか疑問ではありますが、使いながらうっすらと感じていたモヤモヤを解消することができたので、著者としてはこの記事を書いて良かったと思っております。ご感想やご指摘などあれば、コメント欄にお書きいただけますと幸いです🙇