Astroの構文

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

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

JSXライクな式

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

動的 vs リアクティブ

この方法により、フロントマターで計算された動的な値をテンプレートに含めることができます。しかし、一度含められたこれらの値はリアクティブではなく、変化することはありません。Astroコンポーネントは、レンダリングの際に一度だけ実行されるテンプレートです。

以下でAstroとJSXの違いに関する例をいくつか紹介します。

変数

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

src/components/Variables.astro

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

動的属性

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

src/components/DynamicAttributes.astro

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

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

注意

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

dont-do-this.astro

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

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

do-this-instead.astro

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

動的HTML

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

src/components/DynamicHtml.astro

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

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

src/components/ConditionalHtml.astro

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

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

動的タグ

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

src/components/DynamicTags.astro

---
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はバンドルする対象のコンポーネントを知る必要がありますが、動的タグパターンではこれが機能しなくなるためです。

フラグメント

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

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

src/components/SetHtml.astro

---
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でも同様です。

example.astro

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

複数の要素

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

src/components/RootElements.astro

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

コメント

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

example.astro

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

注意

HTMLスタイルのコメントはブラウザのDOMに含まれますが、JSのコメントはスキップされます。TODOメッセージやその他の開発専用の説明を残したい場合は、JavaScriptスタイルのコメントを使用することをお勧めします。