🙆
Astroチュートリアルメモ その2-3【変数を使う】
Astroでは、Frontmatterのような書き方で変数を定義できる。
JavaScript行を.astroファイル内に書くことができる。
チュートリアルでは2-3。
チュートリアルの例
---
const pageTitle = "About Me";
const identity = {
firstName: "Sarah",
country: "Canada",
occupation: "Technical Writer",
hobbies: ["photography", "birdwatching", "baseball"],
};
const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
---
//抜粋
<body>
<h1>{pageTitle}</h1>
<h2>... and my new Astro site!</h2>
<ul>
<li>My name is {identity.firstName}.</li>
<li>
I live in {identity.country} and I work as a {identity.occupation}.
</li>
{
identity.hobbies.length >= 2 && (
<li>
Two of my hobbies are: {identity.hobbies[0]} and{" "}
{identity.hobbies[1]}
</li>
)
}
</ul>
<p>My skills are:</p>
<ul>
{skills.map((skill) => <li>{skill}</li>)}
</ul>
</body>
</html>
オブジェクトや配列
jsのオブジェクトや配列を普通に使える。
{identity.firstName}とすれば、オブジェクトidentityのキーfirstNameの要素になる。
オブジェクト内の配列に関しても、 {identity.hobbies[0]}としてアクセスできる。
また、Reactなどで良く見られるjsのmapなどを使用して、繰り返し処理でリストにするなども可能。
出し分け
---
const happy = true;
const finished = false;
const goal = 3;
---
//抜粋
<body>
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
{
goal === 3 ? (
<p>My goal is to finish in 3 days.</p>
) : (
<p>My goal is not 3 days.</p>
)
}
</body>
jsの値で出し分けすることも可能。この辺りもReactでよくやる書き方に似てる。
三項演算子も使える。
次の記事
Discussion