コンテンツにスキップ

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

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

ここで学ぶことは...

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

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

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

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

      npx astro add preact

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

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

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

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

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

  2. 以下のコードを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でこのコンポーネントをインポートして使用します。

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

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

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

    ---
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コンポーネントを削除します。

    ---
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 />

チェックリスト

参考

貢献する コミュニティ スポンサー