コンポーネント / Learch

Astro の基本的なコンポーネント

Astro プロジェクトでは、コンポーネントはウェブサイトやアプリケーションの再利用可能な構築ブロックです。このセクションでは、Astro でのコンポーネントの作成、プロップスの使用、そしてコンポーネント間でのデータ受け渡しの方法を、具体例を交えて説明します。

Astro コンポーネントは.astroファイル内に作成され、HTML に似た構文で書かれますが、JavaScript の式を組み込むことができる特別な機能を持っています。

Button.astroファイルを作成し、以下のように記述します。

---
// コンポーネントのロジックをここに書きます
const label = "Click me";
---

<button>{label}</button>

この例では、ボタンに表示されるラベルをlabel変数に格納しています。Astro コンポーネントは、---で区切られた上部で JavaScript を記述し、下部で HTML のマークアップを記述します。

Astro では、コンポーネントにデータを渡すためにプロップスを使用します。プロップスを通じて、親コンポーネントから子コンポーネントへデータを渡すことができます。

Button.astroを次のように更新して、プロップスでラベルを受け取れるようにします。

---
// プロップスを通じてラベルを受け取ります
const { label = "Click me" } = Astro.props;
---

<button>{label}</button>

これで、ボタンコンポーネントはプロップスを通じてラベルを受け取り、デフォルト値として"Click me"を使用します。

コンポーネント間でデータを渡すことで、アプリケーション内の情報フローを管理します。

Index.astroファイルに Button コンポーネントをインポートし、プロップスを渡します。

---
import Button from './Button.astro';
---

<div>
  <Button label="Submit" />
</div>

この例では、Index.astroが親コンポーネントとなり、Buttonコンポーネントにlabelプロップスを"Submit"として渡しています。

Astro でのコンポーネントの作成、プロップスの使用、およびコンポーネント間でのデータの受け渡し方法を学びました。これらの基本的な概念を理解することで、Astro を使用して効率的にウェブサイトやアプリケーションを構築するための基礎を築くことができます。