コンテンツにスキップ
Astro Astro

初めてのAstroアイランドを作成する

Preactコンポーネントを使い、ランダムに選択されたメッセージでサイト訪問者に挨拶しましょう！

ここで学ぶことは…

  • AstroプロジェクトにPreactを追加する
  • ホームページにAstroアイランド（Preactの.jsxコンポーネント）を追加する
  • アイランドをインタラクティブにするためにclient:ディレクティブを使用する

AstroプロジェクトにPreactを追加する

  1. 動作中であれば開発サーバーを停止し、ターミナルを使用できるようにします（キーボードショートカットはCtrl + Cです）。

  2. 以下のコマンドを実行して、AstroプロジェクトでPreactコンポーネントを使用できるようにします。

    Terminal window
    npx astro add preact

  3. コマンドラインの指示に従って、プロジェクトにPreactを追加します。

Preactの挨拶用バナーを追加する

このコンポーネントは、挨拶用メッセージの配列をpropとして受け取り、その中からランダムに1つを選んでウェルカムメッセージとして表示します。ユーザーはボタンをクリックして新しいメッセージをランダムに受け取れます。

  1. src/components/にGreeting.jsxという名前の新しいファイルを作成します。

    .jsxというファイル拡張子が使われていることに注意してください。このファイルはAstroではなくPreactで書きます。

  2. 以下のコードをGreeting.jsxに追加します。

    src/components/Greeting.jsx
    import { useState } from 'preact/hooks';
    

    export default function Greeting({messages}) {
    

      const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];
    

      const [greeting, setGreeting] = useState(messages[0]);
    

      return (
        <div>
          <h3>{greeting}！ 訪問いただきありがとうございます！</h3>
          <button onClick={() => setGreeting(randomMessage())}>
            新しい挨拶
          </button>
        </div>
      );
    }

  3. ホームページのindex.astroでこのコンポーネントをインポートして使用します。

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting.jsx';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>私の素晴らしいブログのサブタイトル</h2>
      <Greeting messages={["どうも", "こんにちは", "初めまして", "ようこそ"]} />
    </BaseLayout>

    ブラウザのプレビューを確認すると、ランダムな挨拶が表示されますが、ボタンは機能していないはずです。

  4. client:loadディレクティブを使用して、2つ目の<Greeting />コンポーネントを追加します。

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>私の素晴らしいブログのサブタイトル</h2>
      <Greeting messages={["どうも", "こんにちは", "初めまして", "ようこそ"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

  5. ページを再度確認し、2つのコンポーネントを比較します。2番目のボタンが機能しているのは、client:loadディレクティブによって、ページがロードされたときにJavaScriptをクライアントに送信して再実行するようAstroに指示しているためです。これにより、コンポーネントはインタラクティブになります。これは ハイドレートされた（hydrated） コンポーネントと呼ばれます。

  6. 違いがわかったら、ハイドレートされていないGreetingコンポーネントを削除します。

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>私の素晴らしいブログのサブタイトル</h2>
      <Greeting messages={["どうも", "こんにちは", "初めまして", "ようこそ"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

パターンを分析する

client:ディレクティブは他にもあり、それぞれが異なるタイミングでJavaScriptをクライアントに送信します。たとえばclient:visibleは、コンポーネントがページ上に表示されたタイミングで対応するJavaScriptを送信します。

次のようなコードをもつAstroコンポーネントについて考えてみましょう。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import AstroBanner from '../components/AstroBanner.astro';
import PreactBanner from '../components/PreactBanner';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<BaseLayout>
  <AstroBanner />
  <PreactBanner />
  <PreactBanner client:load />
  <SvelteCounter />
  <SvelteCounter client:visible />
</BaseLayout>

  1. 5つのコンポーネントのうち、JavaScriptをクライアントに送信し、ハイドレートされるアイランドになるのはどれですか？

  2. 2つの<PreactBanner />コンポーネントで共通している点はどこですか？逆に異なる点はどこでしょうか？

  3. SvelteCounterコンポーネントは数値を表示し、それを増やすためのボタンをもっているとします。ウェブサイトのソースコードを見ることはできず、公開されたページのみ確認できるとき、client:visibleを使用しているのは2つの<SvelteCounter />コンポーネントのうちどちらか、どのように判断すればよいでしょうか？

確認テスト

以下のコンポーネントのそれぞれについて、ブラウザに送信される内容を選択してください。

  1. <ReactCounter client:load/>

  2. <SvelteCard />

チェックリスト

参考