AstroでNanoStoresを使ってみた

はじめに

HRBrainでオウンドメディアやランディングページの開発を担当している中川です。
AstroでNano Storesを使う機会があったので、備忘録的にまとめてみます。
本記事は HRBrain Advent Calendar 2024 の10日目の記事です。

Nano Storesとは

Nano Storesとは、小さくて、高速で、使いやすいJavaScriptの状態管理ライブラリです。複雑な設定やボイラープレートコードなしで、コンポーネント間でデータを簡単に共有し、更新を追跡できます。React、Vue、Svelteなど、様々なフレームワークで使用でき、シンプルなAPIで直感的に操作できます。状態管理に初めて挑戦する方にもおすすめです。軽量なので、バンドルサイズを小さく抑えたい場合にも最適です。
詳しくは公式ドキュメントを参照してください。

Astroとは

Astroは、Webサイトを構築するための最新の静的サイトジェネレーターです。コンテンツ中心のウェブサイト構築に重点を置いており、高速なパフォーマンスと優れた開発体験を提供します。
詳しくは以下で解説しているので、興味がある方はよかったら見てください。

実際にNano StoresをAstroに導入してみた

今回はAstro + Vue.jsのプロジェクトなので、Vue用のものをインストールします。

npm install nanostores @nanostores/vue

以下は、シンプルなカウンターの例です。

store.js

import { atom } from 'nanostores'

export const count = atom(0)

Component.vue

<template>
  <div>
    <p>StoreCount: {{ storeCount }}</p>
    <p>count.get(): {{ countGet }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useStore } from "@nanostores/vue";
import { count } from "./store.js";

export default {
  setup() {
    const storeCount = useStore(count);
    const countGet = count.get();
    const increment = () => {
      count.set(count.get() + 1);
    };
    return {
      storeCount,
      countGet,
      increment,
    };
  },
};
</script>

index.astro

---
import Component from './Component.vue'
---
<Component client:visible />

初期状態では、storeCount と countGet はどちらも 0 です。ボタンをクリックすると、storeCountは1に更新されます。このとき、template内のcountGetは初期値の0のままです。

useStore(count) を使うことで、ストアの値の変化に反応してコンポーネントを再レンダリングすることができます。一方、count.get() は、特定の時点でのストアの値を取得したい場合に便利です。リアクティブな更新が必要ない場合は、count.get() を使用することでパフォーマンスのオーバーヘッドを避けることができます。

以下で動作確認できます

おわりに

このように、Nano StoresはAstroで簡単に利用でき、軽量でシンプルな状態管理を実現できます。 Astroを使用する際の状態管理ライブラリの選択肢としてはとても有力だと思うので、試してみてください。

PR

HRBrainではフロントエンドエンジニア（コミュニケーションデザイン）の採用も行なっているので、Astro触ってみたいよ〜って方はぜひご応募ください！