Reactのシンプルな状態管理: Jotaiの特徴と導入方法を徹底解説

import { atom } from 'jotai';

const countAtom = atom(0); // 初期値が0のアトムを作成

import { atom } from 'jotai';

const fetchDataAtom = atom(async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
});

npm install jotai

yarn add jotai

import { atom } from 'jotai';

const countAtom = atom(0);

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms'; // 作成したアトムをインポート

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <h1>カウンター: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>増やす</button>
      <button onClick={() => setCount((prev) => prev - 1)}>減らす</button>
    </div>
  );
};

export default Counter;

import { atom } from 'jotai';

const countAtom = atom(0); // 初期値0のアトムを作成

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <h1>現在のカウント: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>増加</button>
      <button onClick={() => setCount((prev) => prev - 1)}>減少</button>
    </div>
  );
};

export default Counter;

import { atom } from 'jotai';

const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2); // countAtomの値を2倍する派生アトム

import { atom } from 'jotai';

const userDataAtom = atom(async () => {
  const response = await fetch('https://api.example.com/user');
  return response.json();
});

import { useAtom, useResetAtom } from 'jotai';
import { countAtom } from './atoms';

const CounterWithReset = () => {
  const [count, setCount] = useAtom(countAtom);
  const resetCount = useResetAtom(countAtom);

  return (
    <div>
      <h1>現在のカウント: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>増加</button>
      <button onClick={() => setCount((prev) => prev - 1)}>減少</button>
      <button onClick={resetCount}>リセット</button>
    </div>
  );
};

export default CounterWithReset;

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={increment}>増加</button>
      <button onClick={decrement}>減少</button>
    </div>
  );
};

export default Counter;

import { atom } from 'jotai';

const asyncCountAtom = atom(async (get) => {
  const response = await fetch('https://api.example.com/count');
  return response.json();
});

npm install jotai-devtools

import React from 'react';
import { DevTools } from 'jotai-devtools';

const App = () => (
  <div>
    <DevTools />
    {/* アプリケーションのその他のコンポーネント */}
  </div>
);

import { atom } from 'jotai';

const baseAtom = atom(1);
const dependentAtom = atom((get) => get(baseAtom) * 2);

// デバッグ時、baseAtomが変更されるとdependentAtomも変更されることを確認可能

const asyncAtom = atom(async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('データの取得に失敗しました');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
});

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

const Counter = () => {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>増加</button>
    </div>
  );
};

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>増加</button>
    </div>
  );
};

import React, { createContext, useContext } from 'react';
import { atom, useAtom } from 'jotai';

const ThemeContext = createContext('light');
const countAtom = atom(0);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  const theme = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333' }}>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>増加</button>
    </div>
  );
};

import { atom } from 'jotai';

const fetchUserAtom = atom(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!response.ok) {
    throw new Error('データの取得に失敗しました');
  }
  return response.json();
});

import React from 'react';
import { useAtom } from 'jotai';
import { fetchUserAtom } from './atoms';

const UserProfile = () => {
  const [user, setUser] = useAtom(fetchUserAtom);

  if (!user) return <p>読み込み中...</p>;
  if (user.error) return <p>エラー: {user.error}</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfile;

const userIdAtom = atom(1);
const fetchUserAtom = atom(async (get) => {
  const userId = get(userIdAtom);
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return response.json();
});

const fetchDataAtom = atom(async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('データの取得に失敗しました');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
});

import { atom } from 'jotai';

export const tasksAtom = atom([
  { id: 1, text: 'Reactを学ぶ', completed: false },
  { id: 2, text: 'Jotaiで状態管理', completed: false },
]);

import React, { useState } from 'react';
import { useAtom } from 'jotai';
import { tasksAtom } from './atoms';

const AddTask = () => {
  const [tasks, setTasks] = useAtom(tasksAtom);
  const [text, setText] = useState('');

  const addTask = () => {
    if (text.trim()) {
      setTasks([...tasks, { id: Date.now(), text, completed: false }]);
      setText('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="新しいタスクを入力"
      />
      <button onClick={addTask}>追加</button>
    </div>
  );
};

export default AddTask;

import React from 'react';
import { useAtom } from 'jotai';
import { tasksAtom } from './atoms';

const TaskList = () => {
  const [tasks, setTasks] = useAtom(tasksAtom);

  const toggleComplete = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
          <span onClick={() => toggleComplete(task.id)}>{task.text}</span>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

const TaskList = () => {
  const [tasks, setTasks] = useAtom(tasksAtom);

  const removeTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <span>{task.text}</span>
          <button onClick={() => removeTask(task.id)}>削除</button>
        </li>
      ))}
    </ul>
  );
};

import React from 'react';
import AddTask from './AddTask';
import TaskList from './TaskList';

const App = () => {
  return (
    <div>
      <h1>To-Doリスト</h1>
      <AddTask />
      <TaskList />
    </div>
  );
};

export default App;

import { atom } from 'jotai';

export const filterAtom = atom('all');
export const filteredTasksAtom = atom((get) => {
  const filter = get(filterAtom);
  const tasks = get(tasksAtom);

  if (filter === 'completed') return tasks.filter((task) => task.completed);
  if (filter === 'incomplete') return tasks.filter((task) => !task.completed);
  return tasks;
});