Astroで変数・定数を使用する方法【JSフレームワーク】

JSフレームワークの「Astro」で変数・定数を使用する方法を紹介します。
※ここでは、Astro環境を用意されている前提で進めます。

Astroで変数・定数を使用する方法

AstroでJavaScriptを使う方法

AstroでJavaScriptを使用するには、

---
ここにJavaScript
---

このように、「—」を用意し、間に記述することで使用できます。

変数・定数を用意する

下記のように、変数・定数を設定できます。

---
const title = 'タイトルだよ';
let = 1234;
---

変数・定数を出力する

Astroでは、下記のように記述することで、変数・定数を出力できます。

{title}

ただし、うまく出力できないパターンが存在します。
それは、HTMLの属性内に出力する際におきます。
試しに、画像を定数に入れてそれを＜img＞タグで出力してみます。

Astroで出力がうまくできない例

---
const img = '/assets/img/xxx.jpg';
---

<img src="{img}" alt="">

「””」の中にはうまく出力することができません。

Astroで出力が成功する例

HTML属性内に出力するには、下記のように「””」を使用しないでそのまま記述します。

---
const img = '/assets/img/xxx.jpg';
---

<img src="{img}" alt="">