Astro で書く: 構文 ✍️

概要

皆さん、こんにちは?
この記事では、Astro 構文について、また HTML に慣れていれば驚くほど簡単に学習できることについて説明します。
始めましょう！ ?

---

Astro には JSX 風の表現がありますか? ?

質問に対する答えは はいです。
Astro 構文は HTML の「スーパーセット」です。この構文は、HTML または JSX の作成経験がある人なら誰でも親しみやすいように設計されており、コンポーネントと JavaScript 式を含めるサポートが追加されています。
あなたが React 開発者であれば、プロジェクトを開発するときに構文に多くの類似点があることに気づくでしょう。

変数

Astro コンポーネントの 2 つのコード フェンスの間の、frontmatter コンポーネント スクリプト内でローカル JavaScript 変数を定義できます。その後、これらの変数をコンポーネントの HTML テンプレートに挿入できます。
この実践を以前にどこで見たことがありますか?そうです、JSX! ?

---
const name = "Hugo";
---

<div>
  <h1 id="Hello-I-m-name">Hello, I'm {name}!</h1>
</div>

動的属性

ローカル変数を中括弧内で使用して、プロジェクトで作成および呼び出されるコンポーネントに値を渡すことができます。
上記の例は、小道具として「name」を取る汎用コンポーネントであると考えられます:

---
const name = "Hugo";
---

<hellocomponent name="{name}"></hellocomponent>

HTML 属性は文字列に変換されるため、HTML 要素に関数やオブジェクトを渡すことはできません。
例:

---
function handleClick () {
    console.log("button clicked!");
}
---
<!-- ❌ This doesn't work! ❌ -->
<button onclick="{handleClick}">Click me!</button>

クライアント側スクリプトを使用してイベント ハンドラーを追加する場合は、次のようなバニラ JavaScript を使用する必要があります:

<button>

<h2>
  
  
  Dynamic HTML
</h2>

<p>It is possible generate dynamic HTML with JavaScript function like JSX, in this way for example:<br>
</p>
<pre class="brush:php;toolbar:false">---
const languages = ["Python", "JavaScript", "C#"];
---

{languages.map((lang) => (
• {lang}
))}

Astro は、次のように JSX 論理演算子と三項式を使用して HTML を条件付きで表示できます。

---
const visible = true;
---
{visible && <p>Show me!</p>}

{visible ? <p>Show me!</p> : <p>Else show me!</p>}

動的タグ

これは素晴らしい機能です: Astro では、HTML タグやコンポーネントを変数に割り当てることができます:

---
import HelloComponent from "./HelloComponent.astro";

const Title = 'h1'
const Component = HelloComponent;
---
<title>Hello!</title>
<component></component>

ただし、動的タグを使用する場合は、次の 3 つの点を考慮する必要があります。

• 変数名は大文字にする必要があります。たとえば、タイトルではなくタイトルを使用します。Astro は変数名をリテラル HTML タグとしてレンダリングしようとします。

• ハイドレーションディレクティブはサポートされていません。 client:* ハイドレーション ディレクティブを使用する場合、Astro は実稼働用にどのコンポーネントをバンドルするかを知る必要がありますが、動的タグ パターンによりこれが機能しません。

• define:vars ディレクティブはサポートされていません。子を追加の要素でラップできない場合は、要素 (上記の例ではタイトル) に手動で を追加できます。

断片

Astro は > をサポートしています。 JSX の構文のような表記法を使用して任意の要素をラップし、組み込みの も提供します。 set:* ディレクティブを使用して HTML 文字列を挿入するコンポーネント。

Astro 構文と JSX

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

• 属性: Astro では、JSX で使用されるキャメルケースの代わりに、すべての HTML 属性に標準のケバブケース形式を使用します。これは、React でサポートされていないクラスでも機能します。

• 複数の要素: Astro コンポーネント テンプレートは、すべてを単一の

  でラップする必要がなく、複数の要素をレンダリングできます。または

• コメント: HTML コメントと JavaScript コメントの両方がサポートされています。

---

結論

Astro の構文は HTML のスーパー セットであり、あらゆる種類のフロントエンド開発者が HTML または JSX を使用しているかのように作業できるようになります。
すごいです、そして今...

コーディングを楽しんでください!✨

---

こんにちは??
私の名前は Domenico です。Vue.js フレームワークに情熱を注ぐソフトウェア開発者です。私の知識と経験を共有するために、Vue.js フレームワークについての記事を書いています。
私のリンクツリーにアクセスして私のプロジェクトを見つけることを忘れないでください??

リンクツリー: https://linktr.ee/domenicotenace

他の記事については、dev.to でフォローしてください ??


ドメニコ・テナスフォロー
IT の世界とそれに関連するすべてのことに情熱を持っていますか ✌? Vue とオープンソースに熱心ですか?

私のコンテンツが気に入った場合、または GitHub での私の活動をサポートしたい場合は、少額の寄付で私をサポートしていただけます。
よろしくお願いします?