Zustand って、どんな機能があるのかな？
今回は、React.js 向けのシンプルな状態管理ライブラリ Zustand について、基本的な考え方から実際の使い方、そして実務でよく使われるユースケースまでをわかりやすく解説します。
※ React.js の環境構築がまだお済みでない場合は、下記より環境構築を行なってください。
Zustand とは？
Zustandとは、React.js 向けに設計された 軽量な状態管理ライブラリ です。Providerの設定が不要 で、シンプルかつ少ないコードで状態管理を実現できる 点が大きな特徴です。
さらに、必要な部分のみを再レンダリングできる ため、アプリケーションのパフォーマンスを最適化しやすい というメリットがあります。
なぜ Zustand が必要なの？
React.js では、小規模なアプリであれば useState と props だけでも状態を管理することができます。
しかし、アプリケーションが大きくなり、コンポーネントの階層が深くなってくると、複数のコンポーネントで同じ状態を共有する必要性 が出てきます。
例えば、ログイン情報 や テーマ設定、カートの中身 などは、アプリ全体で参照したい状態 です。
これらの状態を 親コンポーネントで管理 し、props を通じて 子コンポーネントへ受け渡していった 場合、階層が深くなれば深くなるほどコードが複雑になってしまいます。
こうした 状態の受け渡しが連鎖する問題のこと を props drilling と呼びます。
こうした問題を解決するのが 状態管理ライブラリ で、Zustand はその中でも 導入が簡単で学習コストが低く、シンプルに状態を一元管理できるライブラリとして注目されています。
Zustand のインストールと基本的な使い方
それでは、ここから実際に Zustandを インストール したり、コンポーネントで利用する 基本的な流れを見ていきましょう。
Zustand のインストール
Zustand を インストール します
npm install zustandユースケース①: カウンター
Store の作成
カウンター の 状態（データ）の初期値 や 処理内容 を登録する
- count → 状態
- increment / decrement → 状態を更新する関数
- set → Zustand が用意している 状態更新用関数
※ Redux Toolkit のように reducer や action は不要です。
// ZustandStore.js
import { create } from 'zustand'
export const useCounterStore = create((set) => ({
count: 0, // 管理したい状態
increment: () => set((state) => ({ count: state.count + 1 })), // 状態を更新する関数
decrement: () => set((state) => ({ count: state.count - 1 })), // 状態を更新する関数
}))状態（データ）の取得・表示・更新
上記の Store を アプリ上 で呼び出して、状態（データ）の取得・表示・更新 を確認する
※ Provider の設定も不要です。
// ZustandCounter.jsx
import { useCounterStore } from './ZustandStore.js';
export default function ZustandCounter() {
// カウンター の 状態（データ）の初期値 や 更新処理 の呼び出し
const { count, increment, decrement } = useCounterStore();
return (
<>
<h2>Zustand Counter</h2>
<p>Counter: {count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</>
);
}処理内容
- “+” ボタンで、+1 ずつカウントアップ される
- “–” ボタンで、-1 ずつカウントダウン される
ユースケース②: ログインのユーザー情報
Store の作成
ユーザー の 状態（データ）の初期値 や 処理内容 を登録する
- user → 状態
- login / logout → 状態を更新する関数
- set → Zustand が用意している 状態更新用関数
※ Redux Toolkit のように reducer や action は不要です。
// ZustandStore.js
import { create } from 'zustand'
export const useAuthStore = create((set) => ({
user: null, // 管理したい状態
login: (userData) => set({ user: userData }), // 状態を更新する関数
logout: () => set({ user: null }), // 状態を更新する関数
}))データの取得・表示・更新
上記の Store を アプリ上 で呼び出して、状態（データ）の取得・表示・更新 を確認する
※ Provider の設定も不要です。
// ZustandUserProfile.js
import { useState } from 'react';
import { useAuthStore } from './ZustandStore.js';
export default function ZustandUserProfile() {
// input の値を更新 初期値: 山田 太郎
const [userName, setUserName] = useState('山田 太郎');
// ユーザー の 状態（データ）の初期値 や 更新処理 の呼び出し
const { user, login, logout } = useAuthStore();
return (
<>
<h2>Zustand UserProfile</h2>
{user ? (
// ログイン状態で、ログインユーザー名とログアウトボタンを表示
<>
<p>こんにちは、{user.name}さん</p>
<button onClick={logout}>ログアウト</button>
</>
) : (
// ログアウト状態で、入力欄とログインボタンを表示
<>
<p>
<input
type="text"
value={userName}
onChange={(e) => setUserName(e.target.value)}
/>
</p>
<button onClick={() => login({ name: userName })}>ログイン</button>
</>
)}
</>
);
}処理内容
- “ログイン” ボタンのクリックで、 ”こんにちは、山田 太郎さん” と ”ログアウト” ボタンが表示される
- “ログアウト” ボタンのクリックで、入力欄 と”ログイン” ボタンが表示される
- 入力欄 に ”テスト 花子”と入力後、”ログイン” ボタンのクリックで、 ”こんにちは、テスト 花子さん” と ”ログアウト” ボタンが表示される
まとめ
Zustand について、いかがでしたでしょうか？
Zustand は、Provider の設定が不要 で、シンプルかつ少ないコードで状態管理を実現することができる 軽量ライブラリ です。
必要な部分だけを再レンダリングできる ため、アプリケーションのパフォーマンスを最適化しやすく、ログイン中のユーザー情報 や アプリ全体で共有したい設定情報の管理 にも向いています。
まずは基本的な使い方から試し、小さな コンポーネント で動かしながら、少しずつ Zustand に慣れていきましょう。
公式サイト
コメント