React初心者必見！Zustandで簡単に始める軽量な状態管理

状態管理はReactでアプリケーションを構築する際に重要な課題の一つです。特にアプリが複雑になるにつれ、コンポーネント間でのデータ共有や更新管理が難しくなることがあります。そんな中、軽量でシンプルな状態管理ライブラリとして注目されているのが「Zustand」です。本記事では、Zustandを使った基本的な状態管理の方法を初心者にもわかりやすく解説します。これにより、Reactアプリケーションの状態管理を効率的に行えるスキルを身につけられます。

Zustandとは何か

Zustandは、React向けの軽量で直感的な状態管理ライブラリです。「状態管理のための小さな、速い、スケーラブルなベアボーンのライブラリ」として設計されており、ReduxやMobXといった他のライブラリに比べて、設定やコード量が最小限で済むことが特徴です。

Zustandの主な特徴

軽量: Zustandは非常に軽量で、アプリケーションのパフォーマンスを損ないません。
直感的なAPI: 状態の作成や更新が簡単で、初学者でも扱いやすい設計です。
Reactに特化: Reactコンポーネントとの相性が良く、Hooksを使って状態を簡単に取得・更新できます。
ミドルウェア対応: ログや永続化といった追加機能をミドルウェアで簡単に拡張可能です。

他の状態管理ライブラリとの違い

ReduxやContext APIなどのライブラリは柔軟性が高い一方、学習コストやコード量が増えることがあります。一方、Zustandは以下の点で優れています。

シンプルな設計: Reduxのように複雑な設定ファイルやアクションタイプを必要とせず、直感的に状態を管理できます。
スケーラビリティ: 大規模なアプリケーションにも適応可能で、パフォーマンスの低下を抑えられます。
非React依存: 状態の定義がReactの外で行われるため、柔軟性が高い設計になっています。

Zustandは、「必要な機能だけ」を素早く実現したいReact開発者にとって、理想的な選択肢です。

Zustandの基本的な使い方

Zustandを使うには、ライブラリのインストールから始めて、状態を作成し、それをReactコンポーネントで利用します。ここでは、Zustandをセットアップして基本的な使い方を解説します。

Zustandのインストール

Zustandを使用するには、まずプロジェクトにインストールします。以下のコマンドを実行してください。

npm install zustand
# または
yarn add zustand

基本的な状態の作成

Zustandでは、create関数を使って状態を定義します。以下はカウンターの状態を作成する例です。

import create from 'zustand';

const useStore = create((set) => ({
  count: 0, // 初期状態
  increment: () => set((state) => ({ count: state.count + 1 })), // 状態を更新する関数
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

状態の利用

Reactコンポーネント内で、useStoreを呼び出して状態を取得・更新できます。

import React from 'react';
import useStore from './store';

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

状態の更新とレンダリング

Zustandの特徴の一つは、状態が更新されると自動的に関連するコンポーネントが再レンダリングされる点です。また、必要に応じて特定の状態だけを選択して取得することも可能です。

const count = useStore((state) => state.count);

このように、Zustandは簡単に状態を定義し、Reactコンポーネントで利用できる軽量な仕組みを提供します。次に、さらに詳細な使用方法や応用例を見ていきましょう。

状態を作成する方法

Zustandを使って状態を作成するプロセスは非常にシンプルです。以下では、状態の定義方法と、Reactコンポーネントでの利用方法について詳しく解説します。

Zustandでの状態定義

状態を作成する際、create関数を利用します。状態には、値そのものと、それを操作するための関数を定義します。以下にカウンターアプリケーションを例にした状態定義を示します。

import create from 'zustand';

const useCounterStore = create((set) => ({
  count: 0, // 状態の初期値
  increment: () => set((state) => ({ count: state.count + 1 })), // 状態を更新する関数
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

ポイント

set関数の利用: setは状態を更新するために使用します。
関数での更新: 更新は常に現在の状態を基に行います（stateを引数に取る形）。

状態をReactコンポーネントで利用

作成した状態は、Reactコンポーネント内でカスタムフックを呼び出すことで簡単に利用できます。

import React from 'react';
import useCounterStore from './store';

function Counter() {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

ポイント

必要な状態と関数だけをオブジェクト分割構文で取得することで、無駄なデータ取得を回避できます。
Zustandは内部で状態を効率的に管理するため、必要な状態のみが再レンダリングされます。

特定の状態だけを選択して取得

Zustandは、状態の一部を選択して取得することもできます。これにより、不要なレンダリングを防ぐことが可能です。

const count = useCounterStore((state) => state.count);

この例では、countのみが変更された場合にコンポーネントが再レンダリングされます。

状態管理のベストプラクティス

状態を小さく分割することで、アプリケーションの複雑さを軽減できます。
set関数内では、状態の変更が直接的かつ明確に行えるよう、シンプルな更新ロジックを維持してください。

Zustandを用いることで、効率的かつ分かりやすい状態管理が実現可能です。次は、複数の状態をどのように管理するかを学びましょう。

複数の状態を管理する方法

アプリケーションが成長するにつれて、単一の状態だけではなく、複数の状態を管理する必要があります。ZustandはシンプルなAPIを提供しており、複数の状態を一元管理しつつ、個別に操作することが可能です。

複数の状態を定義する

Zustandでは、単一の状態オブジェクト内に複数のプロパティを持たせることで、複数の状態を定義できます。以下に、カウンターとタスクリストを同時に管理する例を示します。

import create from 'zustand';

const useStore = create((set) => ({
  count: 0, // カウンターの状態
  tasks: [], // タスクの配列
  increment: () => set((state) => ({ count: state.count + 1 })), // カウンターの更新関数
  addTask: (task) =>
    set((state) => ({ tasks: [...state.tasks, task] })), // タスクを追加する関数
  removeTask: (index) =>
    set((state) => ({
      tasks: state.tasks.filter((_, i) => i !== index),
    })), // タスクを削除する関数
}));

状態をReactコンポーネントで利用

Reactコンポーネントで必要な状態を個別に取得し、操作します。

import React, { useState } from 'react';
import useStore from './store';

function App() {
  const { count, tasks, increment, addTask, removeTask } = useStore();
  const [taskInput, setTaskInput] = useState('');

  const handleAddTask = () => {
    if (taskInput.trim()) {
      addTask(taskInput);
      setTaskInput('');
    }
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>

      <h2>Task List</h2>
      <input
        type="text"
        value={taskInput}
        onChange={(e) => setTaskInput(e.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={handleAddTask}>Add Task</button>

      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task} <button onClick={() => removeTask(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

特定の状態の選択

Zustandでは、状態の一部だけを選択して取得することで効率的なレンダリングを実現できます。

const tasks = useStore((state) => state.tasks);
const increment = useStore((state) => state.increment);

これにより、必要な状態や関数だけを取得し、それに依存するコンポーネントのみを再レンダリングできます。

複数の状態管理のポイント

状態を分割して定義し、必要な箇所でのみ取得することでパフォーマンスを最適化できます。
大規模な状態を扱う場合は、状態を機能ごとに分割して管理することを検討してください。

Zustandの柔軟性を活かせば、複雑なアプリケーションの状態も効率的に管理できます。次は、Zustandのミドルウェアを活用してさらなる機能拡張を行う方法を見ていきます。

Zustandのミドルウェアの活用

Zustandはシンプルさが魅力のライブラリですが、ミドルウェアを利用することで、状態管理に追加の機能を簡単に組み込むことができます。ミドルウェアを使用すると、状態の永続化やデバッグログの記録など、便利な拡張機能を導入可能です。

ミドルウェアの基本

Zustandのミドルウェアは、状態をラップする形で動作します。代表的なミドルウェアの用途として以下があります：

状態の永続化
デバッグやロギング
非同期操作の簡略化

状態の永続化 (Persist Middleware)

状態をローカルストレージなどに保存し、アプリ再起動後も復元するために、zustand/middlewareからpersistを使用します。

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter-storage', // ローカルストレージのキー名
    }
  )
);

実装ポイント

persistは状態と設定オプションを引数に取ります。
nameオプションでストレージのキー名を指定します。

上記の例では、状態はローカルストレージに保存され、アプリをリロードしても状態が復元されます。

デバッグログの記録 (Logger Middleware)

状態の更新ごとにログを記録するには、zustand/middlewareからloggerを使用します。

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

メリット

状態変更を記録してデバッグを容易にします。
Redux DevTools拡張と連携して視覚的に状態の変更を確認できます。

複数のミドルウェアを組み合わせる

Zustandでは複数のミドルウェアを簡単に組み合わせることが可能です。以下の例では、persistとdevtoolsを組み合わせています。

import create from 'zustand';
import { persist, devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
      }),
      {
        name: 'counter-storage',
      }
    )
  )
);

注意点

ミドルウェアを多用しすぎると、コードが複雑化する可能性があります。必要な機能のみを導入しましょう。
ミドルウェアの順序によって動作が異なる場合があります。適切な順序で組み合わせることが重要です。

Zustandのミドルウェアを活用することで、状態管理の柔軟性と機能性がさらに向上します。次は、グローバル状態とローカル状態を効率的に使い分ける方法を解説します。

グローバル状態とローカル状態の使い分け

Reactアプリケーションの状態管理では、グローバル状態とローカル状態を適切に使い分けることが重要です。Zustandは、グローバルな状態管理を得意としつつ、Reactのローカル状態と併用することで柔軟な設計が可能です。

グローバル状態の特性と用途

グローバル状態は、アプリ全体で共有する必要があるデータや設定を管理するために利用されます。
主な用途として以下が挙げられます：

ユーザー情報や認証トークン
言語やテーマ設定
複数のコンポーネント間で共有されるデータ

Zustandを使ったグローバル状態管理の例：

import create from 'zustand';

const useGlobalStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  theme: 'light',
  toggleTheme: () =>
    set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

グローバル状態をReactコンポーネントで利用：

const { user, theme, toggleTheme } = useGlobalStore();

ローカル状態の特性と用途

ローカル状態は、特定のコンポーネント内で完結する一時的なデータを管理するために使用します。
主な用途として以下が挙げられます：

フォーム入力の状態
一時的なUI要素の開閉状態（モーダルやドロップダウンなど）
コンポーネント内部でしか必要とされない一時的なフラグ

ReactのuseStateやuseReducerを用いるローカル状態管理の例：

import React, { useState } from 'react';

function Modal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Modal</button>
      {isOpen && <div className="modal">This is a modal</div>}
    </div>
  );
}

グローバル状態とローカル状態の使い分けのポイント

スコープを明確にする

他のコンポーネントからアクセスが必要なデータはグローバル状態に。
特定のコンポーネント内だけで完結するデータはローカル状態に。

依存性を最小限にする

グローバル状態を増やしすぎると依存関係が複雑化し、デバッグが難しくなります。
必要最低限の情報だけをグローバル状態に含めるように設計します。

パフォーマンスを考慮する

グローバル状態が更新されるたびに、関連するすべてのコンポーネントが再レンダリングされます。
ローカル状態で管理可能な部分は、積極的にローカル状態を利用しましょう。

例: グローバルとローカル状態の併用

以下は、テーマ設定をグローバル状態で管理し、モーダルの開閉をローカル状態で管理する例です。

import React, { useState } from 'react';
import create from 'zustand';

const useGlobalStore = create((set) => ({
  theme: 'light',
  toggleTheme: () =>
    set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

function App() {
  const { theme, toggleTheme } = useGlobalStore();
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <div className={`app ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => setModalOpen(!isModalOpen)}>Toggle Modal</button>
      {isModalOpen && <div className="modal">This is a modal</div>}
    </div>
  );
}

export default App;

まとめ

状態のスコープを意識することで、グローバル状態とローカル状態を適切に使い分けられる。
ZustandとReactのローカル状態管理を組み合わせることで、効率的かつ明確な状態管理が可能。

次は、実際のアプリケーションでZustandを活用した状態管理の実践例を見ていきます。

Zustandの実践的な例

ここでは、Reactアプリケーションの具体的な例を通して、Zustandを使った状態管理を学びます。簡単なタスク管理アプリを作成し、Zustandを活用してタスクの追加、削除、完了の状態を管理します。

プロジェクトのセットアップ

以下のコマンドでReactプロジェクトを作成し、Zustandをインストールします。

npx create-react-app zustand-task-app
cd zustand-task-app
npm install zustand

Zustandストアの作成

タスク管理用の状態をZustandで定義します。

// src/store.js
import create from 'zustand';

const useTaskStore = create((set) => ({
  tasks: [], // タスクリストの初期状態
  addTask: (task) =>
    set((state) => ({ tasks: [...state.tasks, { id: Date.now(), ...task }] })),
  removeTask: (id) =>
    set((state) => ({ tasks: state.tasks.filter((task) => task.id !== id) })),
  toggleTask: (id) =>
    set((state) => ({
      tasks: state.tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      ),
    })),
}));

export default useTaskStore;

タスクリストコンポーネントの作成

Zustandの状態を利用してタスクリストを表示し、操作します。

// src/components/TaskList.js
import React from 'react';
import useTaskStore from '../store';

function TaskList() {
  const { tasks, removeTask, toggleTask } = useTaskStore();

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
          {task.title}
          <button onClick={() => toggleTask(task.id)}>
            {task.completed ? 'Undo' : 'Complete'}
          </button>
          <button onClick={() => removeTask(task.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default TaskList;

タスク追加コンポーネントの作成

新しいタスクを追加するためのフォームを作成します。

// src/components/AddTask.js
import React, { useState } from 'react';
import useTaskStore from '../store';

function AddTask() {
  const [taskTitle, setTaskTitle] = useState('');
  const addTask = useTaskStore((state) => state.addTask);

  const handleAddTask = () => {
    if (taskTitle.trim()) {
      addTask({ title: taskTitle, completed: false });
      setTaskTitle('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={taskTitle}
        onChange={(e) => setTaskTitle(e.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={handleAddTask}>Add Task</button>
    </div>
  );
}

export default AddTask;

アプリの統合

作成したコンポーネントを組み合わせて、アプリ全体を構築します。

// src/App.js
import React from 'react';
import TaskList from './components/TaskList';
import AddTask from './components/AddTask';

function App() {
  return (
    <div>
      <h1>Task Manager</h1>
      <AddTask />
      <TaskList />
    </div>
  );
}

export default App;

アプリケーションの起動

以下のコマンドでアプリケーションを起動します。

npm start

ブラウザで開き、タスクの追加、完了、削除を試してください。

ポイント

Zustandを利用することで、状態管理コードを簡潔に保ちながら、グローバルな状態共有が可能。
状態の更新は即座に関連するコンポーネントに反映されるため、アプリケーション全体のレスポンスが向上します。

このように、ZustandはシンプルなAPIで実践的なアプリケーションの状態管理をサポートします。次は、状態管理におけるパフォーマンス最適化について学びます。

状態管理のパフォーマンス最適化

Zustandは軽量な状態管理ライブラリですが、大規模なアプリケーションでは適切な設計と最適化が重要です。状態管理のパフォーマンスを向上させるための基本的な方法とZustandでの実践的な最適化技術を紹介します。

不要なレンダリングの回避

Zustandでは、状態の一部だけを選択して取得することで、不要なレンダリングを回避できます。

// 状態の一部のみを取得
const taskCount = useTaskStore((state) => state.tasks.length);

これにより、taskCountが変化しない限り、コンポーネントは再レンダリングされません。

Selector関数を活用する

複雑な状態を選択する場合、セレクター関数を使うことでパフォーマンスを最適化できます。

const completedTasks = useTaskStore((state) =>
  state.tasks.filter((task) => task.completed)
);

セレクター関数は、必要なデータだけを抽出するために利用します。

依存関係の分離

状態が大きくなると、すべての状態を一つのストアに詰め込むのは非効率的です。以下の方法で状態を分離できます：

機能ごとにストアを分ける
共通部分だけをグローバルストアに保管し、ローカルストアを併用する

// tasksStore.js
const useTaskStore = create((set) => ({
  tasks: [],
  addTask: (task) => set((state) => ({ tasks: [...state.tasks, task] })),
}));

// userStore.js
const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

この分離により、不要なデータへの依存を避けられ、状態管理が効率化します。

状態の分割取得

複数の状態を利用する場合、一度に取得するのではなく、必要な部分だけを取得します。

const addTask = useTaskStore((state) => state.addTask);
const tasks = useTaskStore((state) => state.tasks);

これにより、状態の一部だけが変更された場合にも無駄な再レンダリングを抑えられます。

メモ化とキャッシュの利用

Zustandでは、ReactのuseMemoを併用して計算コストの高いデータをキャッシュすることも可能です。

import { useMemo } from 'react';

const sortedTasks = useMemo(() => {
  return tasks.slice().sort((a, b) => a.title.localeCompare(b.title));
}, [tasks]);

これにより、必要なデータの計算を効率化し、不要な再計算を回避します。

ミドルウェアを活用したパフォーマンス監視

devtoolsミドルウェアを使用することで、状態変更のパフォーマンスを視覚的に監視できます。

import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

適切なレンダリング設計

コンポーネントを必要最小限の責務に分割し、それぞれのコンポーネントが独自の状態を監視する設計を採用します。これにより、影響範囲を限定してパフォーマンスを向上させられます。

まとめ

Zustandはデフォルトでも高いパフォーマンスを持っていますが、以下の工夫でさらに効率的な状態管理を実現できます：

状態の分離とセレクターの活用
不要なレンダリングの回避
メモ化とキャッシュの使用
ミドルウェアを活用した監視とデバッグ

これらのテクニックを組み合わせることで、大規模なReactアプリケーションでも軽量で高速な状態管理が可能です。次は、今回学んだ内容をまとめていきます。

まとめ

本記事では、Zustandを活用したReactアプリケーションの軽量な状態管理について解説しました。Zustandの概要から、状態の作成、実践的な例、さらにパフォーマンス最適化の方法までを学びました。

Zustandは、以下の点でReactの状態管理を大幅に簡略化します：

シンプルなAPIで迅速に状態を管理可能
必要な状態だけを選択して取得できる高い効率性
ミドルウェアやパフォーマンス最適化の柔軟性

Reactアプリケーションの成長に伴い、状態管理の重要性が増しますが、Zustandはその課題を直感的かつ軽量な方法で解決します。これにより、開発者はコードの保守性を高め、より効率的なアプリケーション開発が可能になります。

ぜひZustandをプロジェクトに導入し、その簡便さとパフォーマンスを体験してください！

React初心者必見！Zustandで簡単に始める軽量な状態管理

Zustandとは何か

Zustandの主な特徴

他の状態管理ライブラリとの違い

Zustandの基本的な使い方

Zustandのインストール

基本的な状態の作成

状態の利用

状態の更新とレンダリング

状態を作成する方法

Zustandでの状態定義

ポイント

状態をReactコンポーネントで利用

ポイント

特定の状態だけを選択して取得

状態管理のベストプラクティス

複数の状態を管理する方法

複数の状態を定義する

状態をReactコンポーネントで利用

特定の状態の選択

複数の状態管理のポイント

Zustandのミドルウェアの活用

ミドルウェアの基本

状態の永続化 (Persist Middleware)

実装ポイント

デバッグログの記録 (Logger Middleware)

メリット

複数のミドルウェアを組み合わせる

注意点

グローバル状態とローカル状態の使い分け

グローバル状態の特性と用途

ローカル状態の特性と用途

グローバル状態とローカル状態の使い分けのポイント

例: グローバルとローカル状態の併用

まとめ

Zustandの実践的な例

プロジェクトのセットアップ

Zustandストアの作成

タスクリストコンポーネントの作成

タスク追加コンポーネントの作成

アプリの統合

アプリケーションの起動

ポイント

状態管理のパフォーマンス最適化

不要なレンダリングの回避

Selector関数を活用する

依存関係の分離

状態の分割取得

メモ化とキャッシュの利用

ミドルウェアを活用したパフォーマンス監視

適切なレンダリング設計

まとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル