Astroの構文

HTMLを知っていれば、最初のAstroコンポーネントを書くには十分です。

Astroコンポーネントの構文はHTMLのスーパーセットです。この構文はHTMLやJSXを書いたことのある人にとって親しみやすいように設計され、コンポーネントやJavaScriptの式がサポートされています。

JSXライクな式

Astroコンポーネントのフロントマターのコードフェンス（---）の間に、JavaScriptのローカル変数を定義できます。そして、JSXライクな式を使って、変数をコンポーネントのHTMLテンプレートに注入できます。

変数

ローカル変数は、波括弧の構文を使ってHTMLに追加できます。

---
const name = "Astro";
---
<div>
  <h1>Hello {name}!</h1>  <!-- <h1>Hello Astro!</h1> を出力 -->
</div>

動的属性

ローカル変数を波括弧で囲むことで、HTML要素とコンポーネントの両方に属性値を渡せます。

---
const name = "Astro";
---
<h1 class={name}>属性を式で指定できます</h1>

<MyComponent templateLiteralNameAttribute={`私の名前は${name}です`} />

HTML属性は文字列に変換されるため、関数やオブジェクトをHTML要素に渡すことはできません。たとえば、Astroコンポーネント内のHTML要素にイベントハンドラを割り当てることはできません。

---
function handleClick () {
    console.log("ボタンがクリックされました！");
}
---
<!-- ❌ これは動作しません！ ❌ -->
<button onClick={handleClick}>クリックしても何も起こりません！</button>

代わりに、通常のJavaScriptと同じように、クライアントサイドスクリプトを使用してイベントハンドラを追加します。

<button id="button">クリックしてください</button>
<script>
  function handleClick () {
    console.log("ボタンがクリックされました！");
  }
  document.getElementById("button").addEventListener("click", handleClick);
</script>

動的HTML

ローカル変数をJSXのような関数で使用して、動的に生成されるHTML要素を作成できます。

---
const items = ["犬", "猫", "カモノハシ"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

Astroは、JSXと同様に論理演算子と三項演算子を使用して、HTMLを条件に応じて表示できます。

---
const visible = true;
---
{visible && <p>表示！</p>}

{visible ? <p>表示！</p> : <p>あるいはこちらを表示！</p>}

動的タグ

HTMLタグ名またはインポートされたコンポーネントを変数に設定することで、動的タグも使用できます。

---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- <div>Hello!</div> としてレンダリングされます -->
<Component /> <!-- <MyComponent /> としてレンダリングされます -->

動的タグを使用する場合は、以下の点に注意してください。

変数名は大文字で始める必要があります。 たとえば、elementではなくElementを使用します。そうしないと、Astroは変数名をそのままHTMLタグとしてレンダリングしようとします。
ハイドレーションディレクティブは使えません。client:*ハイドレーションディレクティブを使用する場合、Astroはバンドルする対象のコンポーネントを知る必要がありますが、動的タグパターンではこれが機能しなくなるためです。
define:vars ディレクティブはサポートされていません。 もし、子要素を追加の要素(例えば<div>)でラップすることができない場合は、 style={``--myVar:${value}``} を手動で要素に追加することができます。

フラグメント

Astroでは、<Fragment> </Fragment>または短縮形の<> </>を使用できます。

フラグメントは、次の例のように、set:*ディレクティブを使用する際にラッパー要素を避けるために役立ちます。

---
const htmlString = '<p>生のHTMLコンテンツ</p>';
---
<Fragment set:html={htmlString} />

AstroとJSXの違い

Astroコンポーネントの構文はHTMLのスーパーセットです。HTMLやJSXを書いたことのある人にとって親しみやすいように設計されてはいますが、.astroファイルとJSXの間にはいくつかの重要な違いがあります。

属性

Astroでは、JSXで使用されているcamelCaseではなく、すべてのHTML属性に標準のkebab-case形式を使用します。これは、Reactではサポートされていないclassでも同様です。

<div className="box" dataValue="3" />
<div class="box" data-value="3" />

複数の要素

Astroコンポーネントテンプレートは複数の要素をレンダリングできます。その際、JavaScriptやJSXとは異なり、全体を単一の<div>や<>で囲む必要はありません。

---
// 複数の要素を含むテンプレート
---
<p>全体をコンテナ要素で囲む必要はありません。</p>
<p>Astroではテンプレート内に複数のルート要素を置けます。</p>

Astroでは、標準のHTMLコメントまたはJavaScriptスタイルのコメントを使用できます。

---
---
<!-- .astroファイルでは、HTMLのコメント構文が使えます -->
{/* JSのコメント構文も有効です */}

貢献する

コミュニティ