Frontend Academy · レッスン

軽量な React 状態管理のための Zustand

create() で Zustand ストアを作成し、Hook で state を読み取り、アクションで更新し、定型コードの少ない最小限の API を活用します。

「軽量な React 状態管理のための Zustand」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Zustand とは

Zustand は React 用の軽量で高速な state 管理ライブラリです。API 全体が非常に小さく、store を作成し、フックを使って読み取りと更新を行います。reducer、action、ボイラープレートは必要ありません。

Store の作成

create() は、state と actions をプレーンなオブジェクトとして定義します。返される値はフックです。

import { create } from 'zustand';

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Store の State の読み取り

セレクター関数を指定してフックを呼び出し、特定の state の slice を購読します。選択した slice が変更された場合にのみ、コンポーネントが再レンダリングされます。

function Counter() {
  const count = useCounterStore(state => state.count);
  return <p>Count: {count}</p>;
}

Actions の読み取り

actions も同じ方法で選択します。actions は変化しないため、選択しても余分な再レンダリングは発生しません。

function Controls() {
  const { increment, decrement } = useCounterStore(
    state => ({ increment: state.increment, decrement: state.decrement })
  );
  return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

set() による State の更新

set() 関数は、React のクラスコンポーネントにおける setState のように、更新を浅くマージします。以前の state に依存する更新には、関数を渡します。

// Merge:
set({ loading: true });

// Function for dependent updates:
set(state => ({ count: state.count + 1 }));

// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);

非同期 Actions

Zustand の actions は非同期にできます。非同期処理を await した後に set() を呼び出すだけです。

export const useUsersStore = create<UsersStore>((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch('/api/users').then(r => r.json());
    set({ users, loading: false });
  }
}));

Slices — 大規模な Store の構成

大規模な store を slice（個別のオブジェクト）に分割し、それらを組み合わせます。Zustand のパターンでは slice の抽象化は必須ではありませんが、大規模な store を整理する方法として適しています。

Middleware: persist

persist middleware は Zustand の state を localStorage に保存し、読み込み時に復元します。セットアップは最小限で済みます。

import { persist } from 'zustand/middleware';

export const useSettingsStore = create<Settings>(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme })
    }),
    { name: 'app-settings' } // localStorage key
  )
);

Middleware: devtools

devtools middleware を使用すると、Zustand に Redux DevTools のサポートを追加できます。完全な action ログとタイムトラベルを利用できます。

Zustand と Redux Toolkit

Zustand は最小限でボイラープレートがなく、セットアップが速いため、小規模から中規模のアプリに適しています。RTK は構造化されていてスケーラブルで、クラス最高水準の DevTools を備えているため、大規模なチームに適しています。どちらも堅実な選択肢ですが、ほとんどのアプリでは Zustand のシンプルさが有利です。

セレクターとパフォーマンス

コンポーネントが必要とする最小限の state の slice を常に選択してください。state オブジェクト全体を選択すると、store が変更されるたびに再レンダリングが発生します。複数のプロパティを選択する場合は、zustand/shallow の shallow を使用します。

import { shallow } from 'zustand/shallow';

const { theme, font } = useSettingsStore(
  state => ({ theme: state.theme, font: state.font }),
  shallow // compare each property shallowly
);

クイックチェック

React アプリ全体で使用できる Zustand store はどのように作成しますか？

まとめ: Zustand

create() は state と actions を定義します。返される値はフックです。不要な再レンダリングを避けるには slice を選択します。set() は state の更新をマージします。非同期 actions では await の後に set() を呼び出します。localStorage には persist middleware を使用します。Redux DevTools との統合には devtools を使用します。Provider は必要ありません。

よくある質問

「軽量な React 状態管理のための Zustand」レッスンは無料ですか？

はい。「軽量な React 状態管理のための Zustand」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「軽量な React 状態管理のための Zustand」で何を学びますか？

create() で Zustand ストアを作成し、Hook で state を読み取り、アクションで更新し、定型コードの少ない最小限の API を活用します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「軽量な React 状態管理のための Zustand」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

Redux Toolkit：createSlice と configureStore
軽量な React 状態管理のための Zustand
Vue の Pinia：defineStore と storeToRefs
グローバル状態とローカル状態の使い分け

← Frontend Academyに戻る