フレームワークコンポーネント

お好みのUIコンポーネントフレームワークを活かしてAstroでウェブサイトを作成してみましょう。

AstroはReact、Preact、Svelte、Vue、SolidJS、AlpineJS、Litのようなさまざまな人気のフレームワークをサポートしています。

インテグレーションをインストール

AstroはReact、Preact、Svelte、Vue、SolidJS、AlpineJS、Litのインテグレーションをオプションとして提供しています。1つまたは複数のAstroインテグレーションをプロジェクトにインストールし、設定できます。

フレームワークを使えるようにAstroを設定するためには、まずインテグレーションと関連するpeer dependenciesをインストールします。

npm install --save-dev @astrojs/react react react-dom

次に、それらをインポートし、astro.config.mjsのintegrationsの配列に関数を追加します。

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';
import preact from '@astrojs/preact';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
import lit from '@astrojs/lit';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  integrations: [react(), preact(), svelte(), vue(), solid() , lit(), alpine()],
});

⚙️ Astroのインテグレーションをインストールし、設定するにあたっての詳細はインテグレーションガイド (EN)をご覧ください。

⚙️ お好きなフレームワークの例を確認したいですか？astro.newにアクセスして、そのフレームワークのテンプレートを選択してみてください。

フレームワークコンポーネントを利用

Astroコンポーネントと同じように、JavaScriptフレームワークコンポーネントをAstroページやレイアウト、コンポーネントで使ってみましょう！すべてのコンポーネントは、/src/componentsにまとめることも、好きなように整理することもできます。

フレームワークコンポーネントを使用するには、Astroコンポーネントスクリプトで相対パスを指定してインポートします。そして、コンポーネントテンプレートで、他のコンポーネント、HTML要素、JSXライクな式と一緒に使用します。

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Astro の中で React コンポーネントを直接使用してください！</h1>
    <MyReactComponent />
  </body>
</html>

デフォルトでは、フレームワークのコンポーネントは静的なHTMLとしてレンダリングされます。これはインタラクティブでないコンポーネントを表示するのに便利で、必要のないJavaScriptをクライアントに送信するのを防ぎます。

インタラクティブなコンポーネント

client:* というディレクティブの内の1つを使用してフレームワークのコンポーネントをインタラクティブ（ハイドレーションした状態）にできます。これはコンポーネントがどのようにレンダリングされ、ハイドレーションされるかを定義するためのコンポーネントの属性です。

このclientディレクティブ (EN)はコンポーネントがビルド時にレンダリングされるかどうか、コンポーネントで使用されているJavaScriptがクライアントサイドでいつブラウザに読み込まれるかを表しています。

ほとんどのディレクティブでビルド時にサーバー内でコンポーネントをレンダリングします。コンポーネント内のJavaScriptは特定のディレクティブに応じてクライアントに送信されます。コンポーネントは自身に含まれるJavaScriptをインポートし終えた段階でハイドレーションします。

---
// 例: ブラウザでコンポーネントをハイドレーションする
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
---
<!-- このコンポーネントのJavaScriptはページ読み込み時にインポートが開始されます -->
<InteractiveButton client:load />

<!-- このコンポーネントのJavaScriptはユーザーがスクロールしてコンポーネントがページ内に表示されるまでクライアントに送信さません -->
<InteractiveCounter client:visible />

利用可能なハイドレーションのディレクティブ

UIフレームワークコンポーネントで利用可能なハイドレーションのディレクティブがいくつかあります。client:load、client:idle、client:visible、client:media={QUERY}、client:only={FRAMEWORK}です。

📚 これらのハイドレーションのディレクティブやその使い方を詳しく知りたい場合はディレクティブのリファレンス (EN)のページをご覧ください。

フレームワークを混在させる

同じAstroコンポーネントの中で複数のフレームワークで作られたコンポーネントをインポートし、レンダリングできます。

---
// 例: 同じページで複数のフレームワークのコンポーネントを混在させる
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

フレームワークコンポーネントに子要素を渡す

Astroコンポーネントでは、フレームワークコンポーネントに子要素を渡せます。各フレームワークは、これらの子要素を参照するための固有のパターンがあります。React、Preact、Solidはchildrenという特別なプロパティを使用し、SvelteとVueは<slot />という要素を使用します。

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>これは、テキストとボタンがあるサイドバーです。</p>
</MyReactSidebar>

さらに、名前付きスロットを使って、特定の子要素をグループ化できます。

React、Preact、Solidでは、これらのスロットはトップレベルのプロパティに変換されます。kebab-caseを使用しているスロット名は、camelCaseに変換されます。

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">メニュー</h2>
  <p>テキストとボタンを含むサイドバーがあります。</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>

export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}

SvelteとVueでは、これらのスロットは<slot>要素にname属性を付けて参照できます。また、kebab-caseを使用したスロット名は保持されます。

<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>

フレームワークコンポーネントをネストさせる

Astroファイルの中には、フレームワークコンポーネントの子もハイドレーションされたコンポーネントにできます。これは、フレームワークのどれからでも、コンポーネントを再帰的にネストできることを意味します。

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---

<MyReactSidebar>
  <p>テキストとボタンを含むサイドバーがあります。</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

これにより、お好みのJavaScriptフレームワークで「アプリ」全体を構築し、親コンポーネントを介してAstroのページにレンダリングできます。

フレームワークコンポーネントの中でAstroコンポーネントを使用できますか？

UIフレームワークコンポーネントは、そのフレームワークの「アイランド（島）」になります。これらのコンポーネントは、そのフレームワークの有効なコードとして、独自のインポートやパッケージのみを使用して完全に記述しなければなりません。UIフレームワークコンポーネント（例：.jsxや.svelte）の中で.astroコンポーネントをインポートすることはできません。

しかし、Astroの<slot />パターンを利用して、Astroコンポーネントが生成した静的コンテンツを .astroコンポーネントの中でフレームワークコンポーネントに子要素として渡すことはできます。

---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>

Astroコンポーネントをハイドレーションすることはできますか？

client:という修飾子を使ってAstroコンポーネントをハイドレーションしようとするとエラーになるはずです。

Astro コンポーネントはクライアントサイドのランタイムを持たないHTMLのみを表示するコンポーネントです。しかし、<script>タグをAstroコンポーネントのテンプレートの中で使い、グローバルスコープで実行するJavaScriptをブラウザに送信することはできます。

📚 Astroコンポーネントのクライアントサイド<script>タグについてもっと学ぶ