Claude Code के साथ Jotai

Jotaiでボトムアップの状態managementを実現する

Jotaiは「アトム」と呼ばれる最小単位で状態をmanagementするReact向けlibrary है।Recoilに似たアプローチですが、よりシンプルなAPIとTypeScriptファーストの設計が特徴 है।Claude Codeはアトム設計 सेcomplexな派生状態のbuild तक的確にgenerateし है।

basic アトムの設計

Claude Codeにアトムの構成を依頼 करें।

> Jotaiでdarkモードsupportのthememanagementを作って。
> システムsettingsの検出、永続化、component सेの切り替えにsupportして。

import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import { atomWithStorage } from "jotai/utils";

type Theme = "light" | "dark" | "system";

// localStorage に永続化されるアトム
const themePreferenceAtom = atomWithStorage<Theme>("theme", "system");

// システムのdarkモードsettingsを検निकालनाる読み取り専用アトム
const systemDarkModeAtom = atom<boolean>((get) => {
  if (typeof window === "undefined") return false;
  return window.matchMedia("(prefers-color-scheme: dark)").matches;
});

// actually適用されるthemeを計算する派生アトム
const resolvedThemeAtom = atom<"light" | "dark">((get) => {
  const preference = get(themePreferenceAtom);
  if (preference === "system") {
    return get(systemDarkModeAtom) ? "dark" : "light";
  }
  return preference;
});

// カスタムhook
export function useTheme() {
  const [preference, setPreference] = useAtom(themePreferenceAtom);
  const resolvedTheme = useAtomValue(resolvedThemeAtom);

  return {
    preference,
    resolvedTheme,
    setTheme: setPreference,
    isDark: resolvedTheme === "dark",
  };
}

派生アトムでcomplexな状態を構成

アトムを組み合わせてcomplexな状態を表現するpattern है।

// 基本アトム
const todosAtom = atom<Todo[]>([]);
const filterAtom = atom<"all" | "active" | "completed">("all");
const searchQueryAtom = atom("");

// 派生アトム: フィルタリングされたTodo
const filteredTodosAtom = atom((get) => {
  const todos = get(todosAtom);
  const filter = get(filterAtom);
  const query = get(searchQueryAtom).toLowerCase();

  let result = todos;

  // フィルタ適用
  switch (filter) {
    case "active":
      result = result.filter((t) => !t.completed);
      break;
    case "completed":
      result = result.filter((t) => t.completed);
      break;
  }

  // search適用
  if (query) {
    result = result.filter((t) => t.title.toLowerCase().includes(query));
  }

  return result;
});

// 統計情報の派生アトム
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
      ? Math.round(
          (todos.filter((t) => t.completed).length / todos.length) * 100
        )
      : 0,
  };
});

asyncアトムでdatafetch

Jotaiのasyncアトムका उपयोग करकेserver सेdata fetchするpattern है।

import { atom } from "jotai";
import { atomWithQuery } from "jotai-tanstack-query";

// asyncのread-writeアトム
const currentUserAtom = atom<User | null>(null);

const fetchUserAtom = atom(
  (get) => get(currentUserAtom),
  async (_get, set) => {
    const response = await fetch("/api/me");
    const user = await response.json();
    set(currentUserAtom, user);
  }
);

// TanStack Queryとのintegration
const userQueryAtom = atomWithQuery((get) => ({
  queryKey: ["user", get(userIdAtom)],
  queryFn: async ({ queryKey: [, userId] }) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json();
  },
  enabled: !!get(userIdAtom),
}));

アトムファミリーで動的なアトムgenerate

アイテムごとに独立したアトムを動的にgenerateするpattern है।

import { atom } from "jotai";
import { atomFamily } from "jotai/utils";

// IDごとに独立したアトム generate
const todoAtomFamily = atomFamily((id: string) =>
  atom<Todo>({
    id,
    title: "",
    completed: false,
    createdAt: new Date(),
  })
);

// IDlistをmanagementするアトム
const todoIdsAtom = atom<string[]>([]);

// Usage example
function TodoItem({ id }: { id: string }) {
  const [todo, setTodo] = useAtom(todoAtomFamily(id));

  const toggleComplete = () => {
    setTodo((prev) => ({ ...prev, completed: !prev.completed }));
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={toggleComplete}
      />
      <span>{todo.title}</span>
    </div>
  );
}

function TodoList() {
  const ids = useAtomValue(todoIdsAtom);
  return (
    <div>
      {ids.map((id) => (
        <TodoItem key={id} id={id} />
      ))}
    </div>
  );
}

Zustandとの使い分け

JotaiとZustandはどちらもReactの状態managementlibraryですが、アプローチが異なり है।

• Jotai - ボトムアップ。小さなアトムを組み合わせて状態 build。componentに密結合な状態に向く
• Zustand - トップダウン。ストア単位で状態を設計。グローバルなビジネスロジックに向く

両者を組み合わせる बातもpossible है।UIの局所的な状態はJotai、アプリ全体の状態はZustandという使い分けが効果的 है।

Summary

Jotaiのアトミックなアプローチは、component単位での状態managementに優れてい है।Claude Code का लाभ उठाकर、アトム設計 से派生状態のbuild、asyncprocessing तक素早くimplementationでき है।

ストア型の状態managementはZustand状態managementガイドを、Reactでのdevelopment全般はReactdevelopmentを爆速にする方法をदेखें。Jotaiofficial documentationも併せてconfirm करें।