🙆

Astroチュートリアルメモ その2-3【変数を使う】

2022/11/02に公開約1,600字

Astroでは、Frontmatterのような書き方で変数を定義できる。

JavaScript行を.astroファイル内に書くことができる。

チュートリアルでは2-3。

https://docs.astro.build/en/tutorial/2-pages/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でよくやる書き方に似てる。

三項演算子も使える。

次の記事

https://zenn.dev/k_neko3/articles/1c7dddf3ece065

Discussion

ログインするとコメントできます