Astro PR

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="">
ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。