コンテンツにスキップ

Astroの構文

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

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

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

ローカル変数は、波括弧の構文を使って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}です`} />

ローカル変数を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コンポーネントの構文は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のコメント構文も有効です */}