💡

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

2022/11/09に公開約1,900字

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

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

https://docs.astro.build/en/tutorial/6-islands/1/

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

https://docs.astro.build/ja/concepts/islands/

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

https://docs.astro.build/ja/concepts/mpa-vs-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:の指定を変えることで対応することができる。

詳細は以下で。

https://docs.astro.build/ja/reference/directives-reference/#client-directives

次の記事

https://zenn.dev/k_neko3/articles/f8fdfab009e17c

Discussion

ログインするとコメントできます