// Zustand: 超シンプルなストアベース状態管理
import { create } from 'zustand';
 
// --- 基本的なストア ---
interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
  incrementBy: (amount: number) => void;
}
 
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 }),
  incrementBy: (amount) => set((state) => ({ count: state.count + amount })),
}));
 
// 使用（必要なプロパティだけ選択 → 最小限の再レンダリング）
function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  return <button onClick={increment}>{count}</button>;
}
 
// 複数の値をまとめて取得する場合
function CounterDisplay() {
  // shallow 比較でオブジェクトの再レンダリングを最適化
  const { count, increment, decrement } = useCounterStore(
    useShallow((state) => ({
      count: state.count,
      increment: state.increment,
      decrement: state.decrement,
    }))
  );
 
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

// create の引数関数には set, get, api の3つが渡される
const useStore = create<MyStore>((set, get, api) => ({
  // === set の使い方 ===
 
  // ① オブジェクトを渡す（部分的なマージ）
  setName: (name: string) => set({ name }),
  // → 他のプロパティは保持される（Object.assign相当）
 
  // ② 関数を渡す（前の状態に基づく更新）
  increment: () => set((state) => ({ count: state.count + 1 })),
 
  // ③ replace フラグ（状態全体を置き換え）
  resetAll: () =>
    set(
      { count: 0, name: '', items: [] },
      true // 第2引数: replace = true（マージではなく置き換え）
    ),
 
  // === get の使い方 ===
  // ストアの現在の状態を同期的に取得
  doubleCount: () => get().count * 2,
 
  // 他のアクションを呼び出す
  incrementAndLog: () => {
    get().increment();
    console.log('New count:', get().count);
  },
 
  // 非同期処理での状態参照
  saveToServer: async () => {
    const { items, name } = get();
    await api.save({ items, name });
    set({ lastSaved: new Date() });
  },
 
  // === api の使い方 ===
  // api.getState() = get と同じ
  // api.setState() = set と同じ
  // api.subscribe() = 状態変更のリスナー登録
  // api.getInitialState() = 初期状態を取得
}));

interface TodoStore {
  todos: Todo[];
  filter: 'all' | 'active' | 'completed';
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  setFilter: (filter: 'all' | 'active' | 'completed') => void;
}
 
const useTodoStore = create<TodoStore>((set) => ({
  todos: [],
  filter: 'all',
  addTodo: (text) =>
    set((state) => ({
      todos: [
        ...state.todos,
        { id: crypto.randomUUID(), text, completed: false },
      ],
    })),
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((t) =>
        t.id === id ? { ...t, completed: !t.completed } : t
      ),
    })),
  setFilter: (filter) => set({ filter }),
}));
 
// NG: オブジェクトを毎回作成 → 毎レンダリングで新しい参照
function TodoListBad() {
  // 毎回新しいオブジェクトが返されるので、常に再レンダリング
  const { todos, filter } = useTodoStore((state) => ({
    todos: state.todos,
    filter: state.filter,
  }));
  // ...
}
 
// OK: useShallow を使う
import { useShallow } from 'zustand/react/shallow';
 
function TodoListGood() {
  const { todos, filter } = useTodoStore(
    useShallow((state) => ({
      todos: state.todos,
      filter: state.filter,
    }))
  );
  // → 値が実際に変わった時だけ再レンダリング
}
 
// OK: 個別にセレクト
function TodoFilter() {
  const filter = useTodoStore((state) => state.filter);
  const setFilter = useTodoStore((state) => state.setFilter);
  // → todos が変わっても再レンダリングされない
  return (
    <select value={filter} onChange={(e) => setFilter(e.target.value as any)}>
      <option value="all">すべて</option>
      <option value="active">未完了</option>
      <option value="completed">完了</option>
    </select>
  );
}
 
// 計算値はストア外でセレクターとして定義
const selectFilteredTodos = (state: TodoStore) => {
  const { todos, filter } = state;
  switch (filter) {
    case 'active':
      return todos.filter((t) => !t.completed);
    case 'completed':
      return todos.filter((t) => t.completed);
    default:
      return todos;
  }
};
 
function FilteredTodoList() {
  // 注意: この書き方では毎回新しい配列が返されるため再レンダリングされる
  // パフォーマンスが問題になる場合は useMemo と組み合わせる
  const filteredTodos = useTodoStore(selectFilteredTodos);
  return (
    <ul>
      {filteredTodos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

// --- 実践的なストア（認証）---
interface AuthStore {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  refreshToken: () => Promise<void>;
  clearError: () => void;
}
 
const useAuthStore = create<AuthStore>((set, get) => ({
  user: null,
  token: null,
  isAuthenticated: false,
  isLoading: false,
  error: null,
 
  login: async (email, password) => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.auth.login(email, password);
      set({
        user: response.user,
        token: response.token,
        isAuthenticated: true,
        isLoading: false,
      });
      // トークンをHTTPクライアントに設定
      apiClient.setAuthToken(response.token);
    } catch (error) {
      set({
        error: error instanceof Error ? error.message : 'ログインに失敗しました',
        isLoading: false,
      });
      throw error;
    }
  },
 
  logout: () => {
    set({
      user: null,
      token: null,
      isAuthenticated: false,
    });
    apiClient.clearAuthToken();
    // ログアウト後のクリーンアップ
    queryClient.clear();
  },
 
  refreshToken: async () => {
    const currentToken = get().token;
    if (!currentToken) return;
 
    try {
      const { token } = await api.auth.refresh(currentToken);
      set({ token });
      apiClient.setAuthToken(token);
    } catch {
      // リフレッシュ失敗 → ログアウト
      get().logout();
    }
  },
 
  clearError: () => set({ error: null }),
}));
 
// React 外からの使用例（APIインターセプターなど）
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      const { refreshToken, logout } = useAuthStore.getState();
      try {
        await refreshToken();
        // リトライ
        return apiClient.request(error.config);
      } catch {
        logout();
      }
    }
    return Promise.reject(error);
  }
);

// --- ミドルウェア ---
import { persist, devtools, subscribeWithSelector } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
 
interface CartItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
}
 
interface CartStore {
  items: CartItem[];
  addItem: (product: Product) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
  // 計算プロパティ（getter的に使う）
  totalItems: () => number;
  totalPrice: () => number;
}
 
const useCartStore = create<CartStore>()(
  devtools(
    persist(
      subscribeWithSelector(
        immer((set, get) => ({
          items: [],
 
          addItem: (product: Product) =>
            set((state) => {
              const existing = state.items.find(
                (i) => i.productId === product.id
              );
              if (existing) {
                existing.quantity += 1;
              } else {
                state.items.push({
                  productId: product.id,
                  name: product.name,
                  price: product.price,
                  quantity: 1,
                  image: product.image,
                });
              }
            }),
 
          removeItem: (productId: string) =>
            set((state) => {
              state.items = state.items.filter(
                (i) => i.productId !== productId
              );
            }),
 
          updateQuantity: (productId: string, quantity: number) =>
            set((state) => {
              const item = state.items.find(
                (i) => i.productId === productId
              );
              if (item) {
                if (quantity <= 0) {
                  state.items = state.items.filter(
                    (i) => i.productId !== productId
                  );
                } else {
                  item.quantity = quantity;
                }
              }
            }),
 
          clearCart: () => set({ items: [] }),
 
          totalItems: () =>
            get().items.reduce((sum, item) => sum + item.quantity, 0),
 
          totalPrice: () =>
            get().items.reduce(
              (sum, item) => sum + item.price * item.quantity,
              0
            ),
        }))
      ),
      {
        name: 'cart-storage', // localStorage のキー
        // 一部のフィールドのみ永続化
        partialize: (state) => ({ items: state.items }),
        // カスタムストレージ（sessionStorage等）
        // storage: createJSONStorage(() => sessionStorage),
        // バージョン管理（マイグレーション）
        version: 1,
        migrate: (persistedState, version) => {
          if (version === 0) {
            // v0 → v1 のマイグレーション
            return {
              ...(persistedState as any),
              items: (persistedState as any).items.map((item: any) => ({
                ...item,
                image: item.image ?? '/placeholder.png',
              })),
            };
          }
          return persistedState as CartStore;
        },
      }
    ),
    { name: 'CartStore' } // Redux DevTools に表示される名前
  )
);
 
// subscribeWithSelector で特定の状態変更を監視
useCartStore.subscribe(
  (state) => state.items.length,
  (itemCount, prevItemCount) => {
    if (itemCount > prevItemCount) {
      toast.success('カートに追加しました');
    }
  }
);

// UIに関する状態をまとめたストア
interface UIStore {
  // サイドバー
  sidebarOpen: boolean;
  sidebarWidth: number;
  toggleSidebar: () => void;
  setSidebarWidth: (width: number) => void;
 
  // モーダル
  activeModal: string | null;
  modalData: Record<string, unknown>;
  openModal: (id: string, data?: Record<string, unknown>) => void;
  closeModal: () => void;
 
  // トースト通知
  toasts: Toast[];
  addToast: (toast: Omit<Toast, 'id'>) => void;
  removeToast: (id: string) => void;
 
  // テーマ
  theme: 'light' | 'dark' | 'system';
  setTheme: (theme: 'light' | 'dark' | 'system') => void;
 
  // ブレッドクラム
  breadcrumbs: Breadcrumb[];
  setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;
}
 
const useUIStore = create<UIStore>()(
  persist(
    (set, get) => ({
      // サイドバー
      sidebarOpen: true,
      sidebarWidth: 240,
      toggleSidebar: () =>
        set((state) => ({ sidebarOpen: !state.sidebarOpen })),
      setSidebarWidth: (width) => set({ sidebarWidth: width }),
 
      // モーダル
      activeModal: null,
      modalData: {},
      openModal: (id, data = {}) =>
        set({ activeModal: id, modalData: data }),
      closeModal: () => set({ activeModal: null, modalData: {} }),
 
      // トースト通知
      toasts: [],
      addToast: (toast) => {
        const id = crypto.randomUUID();
        set((state) => ({
          toasts: [...state.toasts, { ...toast, id }],
        }));
        // 自動削除
        if (toast.duration !== Infinity) {
          setTimeout(() => {
            get().removeToast(id);
          }, toast.duration ?? 5000);
        }
      },
      removeToast: (id) =>
        set((state) => ({
          toasts: state.toasts.filter((t) => t.id !== id),
        })),
 
      // テーマ
      theme: 'system',
      setTheme: (theme) => set({ theme }),
 
      // ブレッドクラム
      breadcrumbs: [],
      setBreadcrumbs: (breadcrumbs) => set({ breadcrumbs }),
    }),
    {
      name: 'ui-preferences',
      partialize: (state) => ({
        sidebarOpen: state.sidebarOpen,
        sidebarWidth: state.sidebarWidth,
        theme: state.theme,
      }),
    }
  )
);
 
// モーダルを型安全に使うヘルパー
type ModalType = 'confirm' | 'editUser' | 'createProject';
 
interface ModalDataMap {
  confirm: { title: string; message: string; onConfirm: () => void };
  editUser: { userId: string };
  createProject: { teamId: string };
}
 
function useTypedModal<T extends ModalType>(type: T) {
  const activeModal = useUIStore((state) => state.activeModal);
  const modalData = useUIStore((state) => state.modalData);
  const openModal = useUIStore((state) => state.openModal);
  const closeModal = useUIStore((state) => state.closeModal);
 
  return {
    isOpen: activeModal === type,
    data: modalData as ModalDataMap[T],
    open: (data: ModalDataMap[T]) => openModal(type, data),
    close: closeModal,
  };
}
 
// 使用例
function UserList() {
  const editModal = useTypedModal('editUser');
 
  return (
    <div>
      <button onClick={() => editModal.open({ userId: '123' })}>
        編集
      </button>
      {editModal.isOpen && (
        <EditUserModal
          userId={editModal.data.userId}
          onClose={editModal.close}
        />
      )}
    </div>
  );
}

// 大規模アプリでは、ストアをスライスに分割する
 
// --- 型定義 ---
interface UserSlice {
  user: User | null;
  setUser: (user: User | null) => void;
  updateProfile: (data: Partial<User>) => Promise<void>;
}
 
interface CartSlice {
  items: CartItem[];
  addItem: (product: Product) => void;
  removeItem: (productId: string) => void;
  totalPrice: () => number;
}
 
interface NotificationSlice {
  notifications: Notification[];
  unreadCount: number;
  addNotification: (notification: Omit<Notification, 'id' | 'timestamp'>) => void;
  markAsRead: (id: string) => void;
  markAllAsRead: () => void;
  clearAll: () => void;
}
 
// 結合型
type AppStore = UserSlice & CartSlice & NotificationSlice;
 
// --- 各スライスの実装 ---
import { StateCreator } from 'zustand';
 
// UserSlice
const createUserSlice: StateCreator<AppStore, [], [], UserSlice> = (
  set,
  get
) => ({
  user: null,
  setUser: (user) => set({ user }),
  updateProfile: async (data) => {
    const currentUser = get().user;
    if (!currentUser) throw new Error('Not authenticated');
 
    const updated = await api.users.update(currentUser.id, data);
    set({ user: updated });
 
    // 他のスライスとの連携: 通知を追加
    get().addNotification({
      type: 'success',
      title: 'プロフィール更新',
      message: 'プロフィールを更新しました',
    });
  },
});
 
// CartSlice
const createCartSlice: StateCreator<AppStore, [], [], CartSlice> = (
  set,
  get
) => ({
  items: [],
  addItem: (product) =>
    set((state) => {
      const existing = state.items.find(
        (i) => i.productId === product.id
      );
      if (existing) {
        return {
          items: state.items.map((i) =>
            i.productId === product.id
              ? { ...i, quantity: i.quantity + 1 }
              : i
          ),
        };
      }
      return {
        items: [
          ...state.items,
          {
            productId: product.id,
            name: product.name,
            price: product.price,
            quantity: 1,
          },
        ],
      };
    }),
  removeItem: (productId) =>
    set((state) => ({
      items: state.items.filter((i) => i.productId !== productId),
    })),
  totalPrice: () =>
    get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
});
 
// NotificationSlice
const createNotificationSlice: StateCreator<
  AppStore,
  [],
  [],
  NotificationSlice
> = (set, get) => ({
  notifications: [],
  unreadCount: 0,
  addNotification: (notification) =>
    set((state) => {
      const newNotification: Notification = {
        ...notification,
        id: crypto.randomUUID(),
        timestamp: new Date(),
        read: false,
      };
      return {
        notifications: [newNotification, ...state.notifications],
        unreadCount: state.unreadCount + 1,
      };
    }),
  markAsRead: (id) =>
    set((state) => ({
      notifications: state.notifications.map((n) =>
        n.id === id ? { ...n, read: true } : n
      ),
      unreadCount: Math.max(0, state.unreadCount - 1),
    })),
  markAllAsRead: () =>
    set((state) => ({
      notifications: state.notifications.map((n) => ({
        ...n,
        read: true,
      })),
      unreadCount: 0,
    })),
  clearAll: () => set({ notifications: [], unreadCount: 0 }),
});
 
// --- ストア作成 ---
const useAppStore = create<AppStore>()(
  devtools((...a) => ({
    ...createUserSlice(...a),
    ...createCartSlice(...a),
    ...createNotificationSlice(...a),
  }))
);
 
// 各スライスごとにエクスポートするヘルパー
export const useUser = () => useAppStore((state) => state.user);
export const useCartItems = () => useAppStore((state) => state.items);
export const useNotifications = () =>
  useAppStore((state) => state.notifications);
export const useUnreadCount = () =>
  useAppStore((state) => state.unreadCount);

// Zustand の強力な特徴: React コンポーネント外から状態にアクセスできる
 
// API インターセプターでの使用
import axios from 'axios';
 
const apiClient = axios.create({ baseURL: '/api' });
 
apiClient.interceptors.request.use((config) => {
  // React の外から直接 token を取得
  const token = useAuthStore.getState().token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
 
// WebSocket ハンドラでの使用
const socket = new WebSocket('wss://api.example.com/ws');
 
socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
 
  switch (data.type) {
    case 'NEW_NOTIFICATION':
      // React の外から直接状態を更新
      useAppStore.getState().addNotification(data.notification);
      break;
 
    case 'CART_UPDATED':
      useCartStore.setState({ items: data.items });
      break;
 
    case 'USER_LOGGED_OUT':
      useAuthStore.getState().logout();
      break;
  }
});
 
// タイマー/スケジューラでの使用
setInterval(() => {
  const { token, refreshToken } = useAuthStore.getState();
  if (token) {
    // トークンの有効期限チェック
    const payload = parseJwt(token);
    const expiresIn = payload.exp * 1000 - Date.now();
    if (expiresIn < 5 * 60 * 1000) {
      // 5分以内に期限切れ
      refreshToken();
    }
  }
}, 60 * 1000); // 毎分チェック
 
// テストでの使用
describe('CartStore', () => {
  beforeEach(() => {
    // テスト間で状態をリセット
    useCartStore.setState({
      items: [],
    });
  });
 
  it('should add item', () => {
    useCartStore.getState().addItem({
      id: '1',
      name: 'テスト商品',
      price: 1000,
      image: '/test.png',
    });
 
    expect(useCartStore.getState().items).toHaveLength(1);
    expect(useCartStore.getState().items[0].quantity).toBe(1);
  });
});
 
// subscribe で状態変更を監視（React外）
const unsubscribe = useAuthStore.subscribe(
  (state) => state.isAuthenticated,
  (isAuthenticated) => {
    if (!isAuthenticated) {
      // 未認証になったらWebSocket接続を切断
      socket.close();
    }
  }
);

// Jotai: アトムベースのボトムアップ状態管理
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 
// --- プリミティブアトム ---
// 最も基本的な状態単位
const countAtom = atom(0);
const nameAtom = atom('');
const isDarkModeAtom = atom(false);
const selectedIdsAtom = atom<Set<string>>(new Set());
const formDataAtom = atom<FormData>({
  firstName: '',
  lastName: '',
  email: '',
});
 
// 使用: useAtom（読み書き両方）
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count}
    </button>
  );
}
 
// useAtomValue（読み取り専用）
function CountDisplay() {
  const count = useAtomValue(countAtom);
  return <span>現在のカウント: {count}</span>;
}
 
// useSetAtom（書き込み専用 → このコンポーネントは値の変更で再レンダリングされない）
function IncrementButton() {
  const setCount = useSetAtom(countAtom);
  return <button onClick={() => setCount((c) => c + 1)}>+1</button>;
}

// --- 派生アトム（Derived Atom）---
 
// ① 読み取り専用の派生アトム
const doubleCountAtom = atom((get) => get(countAtom) * 2);
 
const fullNameAtom = atom((get) => {
  const data = get(formDataAtom);
  return `${data.lastName} ${data.firstName}`;
});
 
// 複数のアトムに依存
const cartSummaryAtom = atom((get) => {
  const items = get(cartItemsAtom);
  const discount = get(discountAtom);
  const subtotal = items.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );
  const discountAmount = subtotal * discount;
  const total = subtotal - discountAmount;
  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
 
  return {
    subtotal,
    discountAmount,
    total,
    itemCount,
    isEmpty: items.length === 0,
  };
});
 
function CartSummary() {
  const summary = useAtomValue(cartSummaryAtom);
  // cartItemsAtom か discountAtom が変わった時のみ再計算＆再レンダリング
  return (
    <div>
      <p>小計: {summary.subtotal.toLocaleString()}円</p>
      <p>割引: -{summary.discountAmount.toLocaleString()}円</p>
      <p>合計: {summary.total.toLocaleString()}円</p>
    </div>
  );
}
 
// ② 読み書き派生アトム（Write-only derived atom）
const countWithLimitAtom = atom(
  (get) => get(countAtom),
  (get, set, newValue: number) => {
    // 0〜100 の範囲に制限
    set(countAtom, Math.min(Math.max(newValue, 0), 100));
  }
);
 
// 複数のアトムを同時に更新する派生アトム
const resetAllAtom = atom(null, (get, set) => {
  set(countAtom, 0);
  set(nameAtom, '');
  set(isDarkModeAtom, false);
  set(selectedIdsAtom, new Set());
});
 
function ResetButton() {
  const resetAll = useSetAtom(resetAllAtom);
  return <button onClick={resetAll}>すべてリセット</button>;
}
 
// ③ 条件付き派生アトム
const currentUserAtom = atom<User | null>(null);
const isAdminAtom = atom((get) => {
  const user = get(currentUserAtom);
  return user?.role === 'admin';
});
 
const adminMenuItemsAtom = atom((get) => {
  const isAdmin = get(isAdminAtom);
  if (!isAdmin) return [];
  return [
    { label: 'ユーザー管理', path: '/admin/users' },
    { label: 'システム設定', path: '/admin/settings' },
    { label: 'ログ', path: '/admin/logs' },
  ];
});

// --- 非同期アトム ---
 
// 基本: 非同期な初期値
const userAtom = atom(async () => {
  const response = await fetch('/api/user');
  return response.json() as Promise<User>;
});
 
// Suspense と組み合わせて使用
function UserProfile() {
  const user = useAtomValue(userAtom);
  // Suspense がローディング状態をハンドル
  return <div>{user.name}</div>;
}
 
function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile />
    </Suspense>
  );
}
 
// 読み書き非同期アトム
const todosAtom = atom<Todo[]>([]);
 
const fetchTodosAtom = atom(
  (get) => get(todosAtom),
  async (get, set) => {
    const response = await fetch('/api/todos');
    const todos = await response.json();
    set(todosAtom, todos);
  }
);
 
const addTodoAtom = atom(null, async (get, set, text: string) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
  });
  const newTodo = await response.json();
  set(todosAtom, [...get(todosAtom), newTodo]);
});
 
function TodoApp() {
  const [todos, fetchTodos] = useAtom(fetchTodosAtom);
  const addTodo = useSetAtom(addTodoAtom);
 
  useEffect(() => {
    fetchTodos();
  }, [fetchTodos]);
 
  return (
    <div>
      <button onClick={() => addTodo('新しいタスク')}>追加</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

import { atomWithStorage, createJSONStorage } from 'jotai/utils';
 
// localStorage に永続化
const themeAtom = atomWithStorage<'light' | 'dark' | 'system'>(
  'app-theme',
  'system'
);
 
const languageAtom = atomWithStorage<'ja' | 'en' | 'zh'>('language', 'ja');
 
// sessionStorage に永続化
const sessionThemeAtom = atomWithStorage(
  'session-theme',
  'light',
  createJSONStorage(() => sessionStorage)
);
 
// カスタムストレージ（例: AsyncStorage, MMKV）
const customStorage = createJSONStorage<string>(() => ({
  getItem: async (key) => {
    return await AsyncStorage.getItem(key);
  },
  setItem: async (key, value) => {
    await AsyncStorage.setItem(key, value);
  },
  removeItem: async (key) => {
    await AsyncStorage.removeItem(key);
  },
}));
 
// ユーザー設定を永続化
interface UserPreferences {
  fontSize: number;
  lineHeight: number;
  fontFamily: string;
  sidebarWidth: number;
  showLineNumbers: boolean;
  autoSave: boolean;
  autoSaveInterval: number;
}
 
const userPreferencesAtom = atomWithStorage<UserPreferences>(
  'user-preferences',
  {
    fontSize: 14,
    lineHeight: 1.6,
    fontFamily: 'Inter',
    sidebarWidth: 240,
    showLineNumbers: true,
    autoSave: true,
    autoSaveInterval: 30000,
  }
);
 
// 個別のプロパティを更新する派生アトム
const fontSizeAtom = atom(
  (get) => get(userPreferencesAtom).fontSize,
  (get, set, fontSize: number) => {
    set(userPreferencesAtom, {
      ...get(userPreferencesAtom),
      fontSize: Math.min(Math.max(fontSize, 10), 24),
    });
  }
);

import { atomFamily, atomWithDefault } from 'jotai/utils';
 
// 基本的な atomFamily
const todoAtomFamily = atomFamily((id: string) =>
  atom<Todo | null>(null)
);
 
// 非同期な atomFamily
const userAtomFamily = atomFamily((userId: string) =>
  atom(async () => {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('User not found');
    return response.json() as Promise<User>;
  })
);
 
function UserCard({ userId }: { userId: string }) {
  const user = useAtomValue(userAtomFamily(userId));
  return (
    <Suspense fallback={<Skeleton />}>
      <div>
        <img src={user.avatar} alt={user.name} />
        <h3>{user.name}</h3>
      </div>
    </Suspense>
  );
}
 
// 読み書き可能な atomFamily
interface FieldState {
  value: string;
  error: string | null;
  touched: boolean;
}
 
const fieldAtomFamily = atomFamily((fieldName: string) =>
  atom<FieldState>({
    value: '',
    error: null,
    touched: false,
  })
);
 
// フォームの各フィールドを独立して管理
function FormField({ name, label }: { name: string; label: string }) {
  const [field, setField] = useAtom(fieldAtomFamily(name));
 
  const handleChange = (value: string) => {
    setField((prev) => ({
      ...prev,
      value,
      error: null, // 入力時にエラーをクリア
    }));
  };
 
  const handleBlur = () => {
    setField((prev) => ({ ...prev, touched: true }));
  };
 
  return (
    <div>
      <label>{label}</label>
      <input
        value={field.value}
        onChange={(e) => handleChange(e.target.value)}
        onBlur={handleBlur}
      />
      {field.touched && field.error && (
        <span className="error">{field.error}</span>
      )}
    </div>
  );
}
 
// フォーム全体のバリデーション
const formFieldNames = ['firstName', 'lastName', 'email', 'phone'];
 
const formValidAtom = atom((get) => {
  return formFieldNames.every((name) => {
    const field = get(fieldAtomFamily(name));
    return field.value.length > 0 && field.error === null;
  });
});
 
const formDataAtom = atom((get) => {
  const data: Record<string, string> = {};
  for (const name of formFieldNames) {
    data[name] = get(fieldAtomFamily(name)).value;
  }
  return data;
});

// 状態定義
const filterAtom = atom<'all' | 'active' | 'completed'>('all');
const sortAtom = atom<'newest' | 'oldest' | 'name'>('newest');
const searchQueryAtom = atom('');
const todosAtom = atom<Todo[]>([]);
 
// 派生アトム: フィルタリング → ソート → 検索の順で適用
const filteredTodosAtom = atom((get) => {
  const todos = get(todosAtom);
  const filter = get(filterAtom);
 
  switch (filter) {
    case 'active':
      return todos.filter((t) => !t.completed);
    case 'completed':
      return todos.filter((t) => t.completed);
    default:
      return todos;
  }
});
 
const sortedTodosAtom = atom((get) => {
  const filtered = get(filteredTodosAtom);
  const sortBy = get(sortAtom);
 
  return [...filtered].sort((a, b) => {
    switch (sortBy) {
      case 'newest':
        return b.createdAt.getTime() - a.createdAt.getTime();
      case 'oldest':
        return a.createdAt.getTime() - b.createdAt.getTime();
      case 'name':
        return a.text.localeCompare(b.text);
      default:
        return 0;
    }
  });
});
 
const displayTodosAtom = atom((get) => {
  const sorted = get(sortedTodosAtom);
  const query = get(searchQueryAtom).toLowerCase();
 
  if (!query) return sorted;
  return sorted.filter(
    (t) =>
      t.text.toLowerCase().includes(query) ||
      t.tags?.some((tag) => tag.toLowerCase().includes(query))
  );
});
 
// 統計アトム
const todoStatsAtom = atom((get) => {
  const todos = get(todosAtom);
  return {
    total: todos.length,
    active: todos.filter((t) => !t.completed).length,
    completed: todos.filter((t) => t.completed).length,
    completionRate:
      todos.length > 0
        ? Math.round(
            (todos.filter((t) => t.completed).length / todos.length) * 100
          )
        : 0,
  };
});
 
// 使用
function TodoFilters() {
  const [filter, setFilter] = useAtom(filterAtom);
  const [sort, setSort] = useAtom(sortAtom);
  const [query, setQuery] = useAtom(searchQueryAtom);
  const stats = useAtomValue(todoStatsAtom);
 
  return (
    <div className="filters">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="検索..."
      />
      <select value={filter} onChange={(e) => setFilter(e.target.value as any)}>
        <option value="all">すべて ({stats.total})</option>
        <option value="active">未完了 ({stats.active})</option>
        <option value="completed">完了 ({stats.completed})</option>
      </select>
      <select value={sort} onChange={(e) => setSort(e.target.value as any)}>
        <option value="newest">新しい順</option>
        <option value="oldest">古い順</option>
        <option value="name">名前順</option>
      </select>
      <span>完了率: {stats.completionRate}%</span>
    </div>
  );
}
 
function TodoList() {
  const displayTodos = useAtomValue(displayTodosAtom);
  return (
    <ul>
      {displayTodos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

import { atomWithReducer } from 'jotai/utils';
 
// useReducer のアトム版
type CountAction =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' }
  | { type: 'set'; value: number };
 
const countReducerAtom = atomWithReducer(0, (state, action: CountAction) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    case 'reset':
      return 0;
    case 'set':
      return action.value;
  }
});
 
function Counter() {
  const [count, dispatch] = useAtom(countReducerAtom);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>リセット</button>
    </div>
  );
}
 
// より複雑な例: ドラッグ&ドロップの状態管理
type DragState = {
  isDragging: boolean;
  draggedItem: string | null;
  dragOverTarget: string | null;
  startPosition: { x: number; y: number } | null;
};
 
type DragAction =
  | { type: 'START_DRAG'; item: string; position: { x: number; y: number } }
  | { type: 'DRAG_OVER'; target: string }
  | { type: 'DROP' }
  | { type: 'CANCEL' };
 
const dragAtom = atomWithReducer<DragState, DragAction>(
  {
    isDragging: false,
    draggedItem: null,
    dragOverTarget: null,
    startPosition: null,
  },
  (state, action) => {
    switch (action.type) {
      case 'START_DRAG':
        return {
          isDragging: true,
          draggedItem: action.item,
          dragOverTarget: null,
          startPosition: action.position,
        };
      case 'DRAG_OVER':
        return { ...state, dragOverTarget: action.target };
      case 'DROP':
      case 'CANCEL':
        return {
          isDragging: false,
          draggedItem: null,
          dragOverTarget: null,
          startPosition: null,
        };
    }
  }
);

import { atomWithQuery, atomWithMutation } from 'jotai-tanstack-query';
 
// クエリアトム
const usersQueryAtom = atomWithQuery(() => ({
  queryKey: ['users'],
  queryFn: async () => {
    const response = await fetch('/api/users');
    return response.json() as Promise<User[]>;
  },
  staleTime: 5 * 60 * 1000,
}));
 
// パラメータ付きクエリアトム
const userIdAtom = atom<string | null>(null);
 
const userQueryAtom = atomWithQuery((get) => {
  const userId = get(userIdAtom);
  return {
    queryKey: ['user', userId],
    queryFn: async () => {
      if (!userId) throw new Error('No user ID');
      const response = await fetch(`/api/users/${userId}`);
      return response.json() as Promise<User>;
    },
    enabled: !!userId,
  };
});
 
// ミューテーションアトム
const createUserMutationAtom = atomWithMutation(() => ({
  mutationFn: async (data: CreateUserInput) => {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    return response.json() as Promise<User>;
  },
  onSuccess: () => {
    // キャッシュ無効化
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
}));
 
// 使用
function UserList() {
  const [{ data: users, isLoading, error }] = useAtom(usersQueryAtom);
  const [, createUser] = useAtom(createUserMutationAtom);
 
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
 
  return (
    <div>
      <button onClick={() => createUser({ name: '新しいユーザー', email: 'new@example.com' })}>
        ユーザー追加
      </button>
      <ul>
        {users?.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// === 再レンダリングの違い ===
 
// Zustand: セレクターで明示的に最適化
function ZustandExample() {
  // 方法1: 個別セレクター（最も効率的）
  const count = useStore((s) => s.count);
  const name = useStore((s) => s.name);
  // → count or name が変わった時だけ再レンダリング
 
  // 方法2: useShallow（複数値を一度に取得）
  const { count, name } = useStore(
    useShallow((s) => ({ count: s.count, name: s.name }))
  );
  // → count or name が変わった時だけ再レンダリング
  // → shallow comparison で判定
 
  // 注意: セレクター内で新しいオブジェクトを作ると毎回再レンダリング
  // NG:
  const state = useStore((s) => ({ count: s.count })); // 毎回新しいオブジェクト
  // → useShallow で解決
}
 
// Jotai: アトム単位で自動最適化
function JotaiExample() {
  const count = useAtomValue(countAtom);
  // → countAtom が変わった時だけ再レンダリング
  // → nameAtom の変更は影響しない
  // → セレクター不要で自動的に最適化される
 
  // 派生アトムも自動的に依存関係を追跡
  const displayName = useAtomValue(displayNameAtom);
  // → displayNameAtom が依存するアトムが変わった時のみ再計算
}
 
// パフォーマンス比較:
// Zustand:
//   ✓ セレクターで精密な制御が可能
//   ✗ セレクターの書き方を間違えると不要な再レンダリング
//   ✓ useShallow で複数値の取得も最適化可能
 
// Jotai:
//   ✓ アトム単位で自動的に最適化
//   ✓ 派生アトムの依存関係も自動追跡
//   ✗ アトムを細かく分割しすぎるとコードが散乱する可能性

// === Zustand の DevTools ===
import { devtools } from 'zustand/middleware';
 
const useStore = create<AppStore>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () =>
        set(
          (state) => ({ count: state.count + 1 }),
          false, // replace = false
          'increment' // アクション名（DevToolsに表示）
        ),
    }),
    {
      name: 'AppStore', // DevToolsに表示されるストア名
      enabled: process.env.NODE_ENV === 'development',
    }
  )
);
 
// Redux DevTools で:
// - 状態のスナップショットを確認
// - タイムトラベルデバッグ
// - アクションの履歴を確認
// - 状態の差分を確認
 
// === Jotai の DevTools ===
import { DevTools } from 'jotai-devtools';
import 'jotai-devtools/styles.css';
 
// アトムにデバッグラベルを付ける
const countAtom = atom(0);
countAtom.debugLabel = 'countAtom';
 
const nameAtom = atom('');
nameAtom.debugLabel = 'nameAtom';
 
// DevTools コンポーネントを配置
function App() {
  return (
    <Provider>
      <DevTools />
      <MainContent />
    </Provider>
  );
}
 
// React DevTools の「Atoms」タブで:
// - 各アトムの現在値を確認
// - アトム間の依存関係を可視化
// - 値の変更をリアルタイムで監視

import { renderHook, act } from '@testing-library/react';
 
// テスト用にストアをリセットするユーティリティ
function resetStore<T extends object>(useStore: any) {
  const initialState = useStore.getInitialState();
  useStore.setState(initialState, true);
}
 
describe('useCartStore', () => {
  beforeEach(() => {
    resetStore(useCartStore);
  });
 
  it('should add an item to the cart', () => {
    const { result } = renderHook(() =>
      useCartStore(
        useShallow((state) => ({
          items: state.items,
          addItem: state.addItem,
        }))
      )
    );
 
    act(() => {
      result.current.addItem({
        id: 'p1',
        name: 'テスト商品',
        price: 1000,
        image: '/test.png',
      });
    });
 
    expect(result.current.items).toHaveLength(1);
    expect(result.current.items[0]).toEqual({
      productId: 'p1',
      name: 'テスト商品',
      price: 1000,
      quantity: 1,
      image: '/test.png',
    });
  });
 
  it('should increment quantity for existing item', () => {
    // 直接状態を設定してテストのセットアップを簡潔に
    useCartStore.setState({
      items: [
        {
          productId: 'p1',
          name: 'テスト商品',
          price: 1000,
          quantity: 1,
          image: '/test.png',
        },
      ],
    });
 
    const { result } = renderHook(() => useCartStore());
 
    act(() => {
      result.current.addItem({
        id: 'p1',
        name: 'テスト商品',
        price: 1000,
        image: '/test.png',
      });
    });
 
    expect(result.current.items[0].quantity).toBe(2);
  });
 
  it('should calculate total price correctly', () => {
    useCartStore.setState({
      items: [
        { productId: 'p1', name: '商品A', price: 1000, quantity: 2, image: '' },
        { productId: 'p2', name: '商品B', price: 500, quantity: 3, image: '' },
      ],
    });
 
    expect(useCartStore.getState().totalPrice()).toBe(3500);
  });
 
  it('should remove an item', () => {
    useCartStore.setState({
      items: [
        { productId: 'p1', name: '商品A', price: 1000, quantity: 1, image: '' },
        { productId: 'p2', name: '商品B', price: 500, quantity: 1, image: '' },
      ],
    });
 
    act(() => {
      useCartStore.getState().removeItem('p1');
    });
 
    expect(useCartStore.getState().items).toHaveLength(1);
    expect(useCartStore.getState().items[0].productId).toBe('p2');
  });
});
 
// コンポーネント統合テスト
import { render, screen, fireEvent } from '@testing-library/react';
 
describe('CartComponent', () => {
  beforeEach(() => {
    resetStore(useCartStore);
  });
 
  it('should display cart items', () => {
    useCartStore.setState({
      items: [
        { productId: 'p1', name: '商品A', price: 1000, quantity: 2, image: '' },
      ],
    });
 
    render(<CartComponent />);
 
    expect(screen.getByText('商品A')).toBeInTheDocument();
    expect(screen.getByText('2')).toBeInTheDocument();
    expect(screen.getByText('2,000円')).toBeInTheDocument();
  });
 
  it('should remove item when delete button is clicked', () => {
    useCartStore.setState({
      items: [
        { productId: 'p1', name: '商品A', price: 1000, quantity: 1, image: '' },
      ],
    });
 
    render(<CartComponent />);
 
    fireEvent.click(screen.getByRole('button', { name: '削除' }));
 
    expect(screen.queryByText('商品A')).not.toBeInTheDocument();
    expect(useCartStore.getState().items).toHaveLength(0);
  });
});