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
