Zustandでの非同期処理とfetch連携パターン（パターン 2: 楽観的更新（Optimistic Updates））

2025年5月26日

Zustand を使った非同期処理パターンの中でも、ユーザー体験を大幅に向上させる「楽観的更新（Optimistic Updates）」は特に重要なテクニックです。この記事では、Zustand を使った楽観的更新の実装方法とそのメリットについて詳しく解説します。

パターン 2: 楽観的更新（Optimistic Updates）

ユーザー体験を向上させるための効果的な手法として、「楽観的更新」があります。この手法では、サーバーからの応答を待たずに、操作が成功すると「楽観的に」想定して UI を即座に更新します。

ユースケース: Todo リストの管理

Todo 項目の完了状態を切り替えるユースケースで、楽観的更新を実装してみましょう：

typescript// src/stores/todoStore.ts
import { create } from 'zustand';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

interface TodoStore {
  todos: Todo[];
  isLoading: boolean;
  error: string | null;

  // アクション
  fetchTodos: () => Promise<void>;
  toggleTodo: (id: string) => Promise<void>;
}

export const useTodoStore = create<TodoStore>(
  (set, get) => ({
    todos: [],
    isLoading: false,
    error: null,

    fetchTodos: async () => {
      set({ isLoading: true, error: null });
      try {
        const response = await fetch('/api/todos');
        if (!response.ok)
          throw new Error('Failed to fetch todos');
        const todos = await response.json();
        set({ todos, isLoading: false });
      } catch (error) {
        set({
          error:
            error instanceof Error
              ? error.message
              : '未知のエラー',
          isLoading: false,
        });
      }
    },

    toggleTodo: async (id) => {
      // 現在のtodosを取得
      const currentTodos = get().todos;
      const todoToUpdate = currentTodos.find(
        (todo) => todo.id === id
      );

      if (!todoToUpdate) return;

      // 更新前の状態をバックアップ（ロールバック用）
      const previousTodos = [...currentTodos];

      // 楽観的に即時更新（UIにすぐに反映）
      set({
        todos: currentTodos.map((todo) =>
          todo.id === id
            ? { ...todo, completed: !todo.completed }
            : todo
        ),
      });

      try {
        // サーバーへ更新を送信
        const response = await fetch(
          `/api/todos/${id}/toggle`,
          {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              completed: !todoToUpdate.completed,
            }),
          }
        );

        if (!response.ok)
          throw new Error('Failed to update todo');

        // サーバーからのレスポンスでステートを更新することもできる
        // この例では楽観的更新で十分なので省略
      } catch (error) {
        // エラーが発生した場合、前の状態に戻す（ロールバック）
        set({
          todos: previousTodos,
          error:
            '更新に失敗しました。もう一度お試しください。',
        });
      }
    },
  })
);

コンポーネントの実装

このストアを使用した Todo リストコンポーネントの例：

tsx// src/components/TodoList.tsx
import React, { useEffect } from 'react';
import { useTodoStore } from '../stores/todoStore';

export const TodoList: React.FC = () => {
  const {
    todos,
    isLoading,
    error,
    fetchTodos,
    toggleTodo,
  } = useTodoStore();

  useEffect(() => {
    fetchTodos();
  }, []);

  if (isLoading && todos.length === 0) {
    return <div>読み込み中...</div>;
  }

  if (error) {
    return <div className='error-message'>{error}</div>;
  }

  return (
    <div className='todo-list'>
      {error && <div className='error-banner'>{error}</div>}

      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            className={todo.completed ? 'completed' : ''}
            onClick={() => toggleTodo(todo.id)}
          >
            <span className='checkbox'>
              {todo.completed ? '✓' : '□'}
            </span>
            <span className='todo-text'>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

楽観的更新のメカニズム

楽観的更新パターンの実装では、以下の手順が重要です：

現在の状態をバックアップ: 更新前の状態をコピーして保存します。これにより、エラー発生時にロールバックできます。
UI の即時更新: サーバーからのレスポンスを待たずに、予想される結果に基づいて UI を更新します。
サーバー処理: バックグラウンドでサーバーに更新リクエストを送信します。
エラー処理: サーバー処理が失敗した場合、バックアップした状態に戻し（ロールバック）、エラーメッセージを表示します。
サーバーレスポンスの反映（オプション）: サーバーからの応答データに基づいて状態を微調整することもできます。

応用例：複数アイテムの楽観的更新

複数の項目を一度に更新する場合の楽観的更新パターン：

typescript// 複数Todoの一括完了/未完了切り替え
const toggleAllTodos = async (completed: boolean) => {
  const currentTodos = get().todos;

  // 状態のバックアップ
  const previousTodos = [...currentTodos];

  // 楽観的に全てのTodoを更新
  set({
    todos: currentTodos.map((todo) => ({
      ...todo,
      completed,
    })),
  });

  try {
    // サーバーに一括更新リクエスト
    const response = await fetch('/api/todos/toggle-all', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ completed }),
    });

    if (!response.ok)
      throw new Error('Failed to update todos');

    // 成功時の処理（必要に応じて）
  } catch (error) {
    // エラー時にロールバック
    set({
      todos: previousTodos,
      error: '一括更新に失敗しました',
    });
  }
};

トランザクション管理との併用

複数の楽観的更新が同時に発生する可能性がある場合、トランザクション ID を使って競合を防ぐことができます：

typescript// トランザクションを使った楽観的更新
const updateWithTransaction = async (id, updates) => {
  // トランザクションIDの生成
  const transactionId = Date.now().toString();

  // 現在の状態を保存
  const previousState = { ...get() };

  // 楽観的に更新して、トランザクションIDを記録
  set((state) => ({
    ...state,
    items: state.items.map((item) =>
      item.id === id ? { ...item, ...updates } : item
    ),
    pendingTransactions: [
      ...state.pendingTransactions,
      transactionId,
    ],
  }));

  try {
    // サーバーに更新を送信
    const response = await fetch(`/api/items/${id}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        'X-Transaction-ID': transactionId,
      },
      body: JSON.stringify(updates),
    });

    if (!response.ok) throw new Error('Update failed');

    // 成功したトランザクションを削除
    set((state) => ({
      ...state,
      pendingTransactions: state.pendingTransactions.filter(
        (id) => id !== transactionId
      ),
    }));
  } catch (error) {
    // エラー時に特定のトランザクションのみをロールバック
    // （複雑なケースでは部分的なロールバックロジックが必要）
    set({
      ...previousState,
      error: '更新に失敗しました',
    });
  }
};