コンテンツにスキップ

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

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

ここで学ぶことは…

  • AstroプロジェクトにPreactを追加する
  • ホームページにAstroアイランド(Preactの.jsxコンポーネント)を追加する
  • アイランドをインタラクティブにするためにclient:ディレクティブを使用する
  1. 動作中であれば開発サーバーを停止し、ターミナルを使用できるようにします(キーボードショートカットはCtrl + Cです)。

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

    Terminal window
    npx astro add preact
  3. コマンドラインの指示に従って、プロジェクトに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 />