Astroでループや条件分岐を行う

Astroでループや条件分岐のやり方をメモ。

サンプルコード

Astroではフロントマターのコードフェンス(—)部分に変数を定義でき、その変数をHTMLテンプレート内で使用できます。
HTMLテンプレート内使用する際は波括弧{}で囲います。

---
const title = 'タイトル';
const headClass = 'heading';
---
<h1 class={headClass}>{title}</h1>

<style is:global>
.heading {
  color: red;
}
</style>

属性で使用する際は、ダブルクォーテーションを除去して使用します。
変数設定のデモページ

波括弧で囲った中でmap()を使うことで、ループ処理も同様に行えます。

---
const idols = ['浅倉透', '樋口円香', '福丸小糸', '市川雛菜'];
---
<ul>
{idols.map((idol) => (
  <li>{idol}</li>
))}
</ul>

ループ処理のデモページ

条件分岐を行う場合、波括弧の中で三項演算子を使って行います。

---
const visible = true;
---
{visible ? <p>表示</p> : <p>非表示</p>}

条件分岐のデモページ

if文を使った条件分岐をしたい場合、以下のような記述だとエラーになります。

---
const visible = false;
---
{
  if(visible) {
    return (
      <p>表示</p>
    )
  } else {
    return (
      <p>非表示</p>
    )
  }
}

即時関数内でif文とreturnを行うようにすると、使用できるようでした。

---
const visible = false;
---
{
  (() => {
    if(visible) {
      return (
        <p>表示</p>
      )
    } else {
      return (
        <p>非表示</p>
      )
    }
  })()
}

条件分岐のデモページ2