💡

Astroチュートリアルメモその6【アイランドアーキテクチャ】

2022/11/09に公開

Astro

tech

やっとここからがAstroの本番というか。もうチュートリアルは最後だけど。

Astroで作るアイランドアーキテクチャについて。

Astroアイランドについては以下で。

MPAとSPAについては以下で。

Astroはマルチページアプリケーション（MPA）フレームワークの1つだと、公式にも書いてある。

MPAという言葉はシングルページアプリケーション（SPA）が出てくるまでなかったような気がする。

MPAとSPAは一長一短なわけで、目的に合わせて選択するしかない。

のだけど、できるだけ両方のいいとこどりをしたい…、みたいなのがアイランドアーキテクチャなのかなと思う。

ページ全部をReactで更新するのではなく、基本はHTMLで、その中に一部のコンテンツを島として分離して、そこでだけReactというかjsを扱う、みたいな感じ。

チュートリアルではPreactを使って、Astroアイランドの機能を紹介している。

Preactの追加

npx astro add preact

npxでインストール。色々聞かれるけどとりあえず全部YesでOK。

ボタンを押すとランダムで表示が変わるコンポーネント

src/components/Greeting.jsx

import { h } from "preact";
import { useState } from "preact/hooks";

export default function Greeting({ messages }) {
  const randomMessage = () =>
    messages[Math.floor(Math.random() * messages.length)];

  const [greeting, setGreeting] = useState(randomMessage());

  return (
    <div>
      <h3>{greeting}! Thank you for visiting!</h3>
      <button onClick={() => setGreeting(randomMessage())}>New Greeting</button>
    </div>
  );
}

Preactでコンポーネントを作る。

ボタンをクリックすると、statesの値がランダムで変更になるコンポーネント。

トップページに追加する。

src/pages/index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import Greeting from "../components/Greeting.jsx";
const pageTitle = "Home Page";
---

<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting client:load messages={["Hi", "Hello", "Howdy", "Hey there"]} />
</BaseLayout>

コンポーネントの<Greeting />の中にclient:loadと入れることで、画面がロードされた時にJavaScriptを読みこむ。client:loadがないと、ボタンを押してもstatesの値が変わらない。

その他にもコールバックが発生したときや、スクロールしていって画面内に入ってきたとき（IntersectionObserverで判定してるらしい）など、client:の指定を変えることで対応することができる。

詳細は以下で。

Astroチュートリアルメモその6【アイランドアーキテクチャ】

Preactの追加

ボタンを押すとランダムで表示が変わるコンポーネント

次の記事

Discussion