ReactでJotaiとTypeScriptを活用した型安全な状態管理の方法

# Jotaiのインストール
npm install jotai
# TypeScriptプロジェクトの場合は型定義ファイルもインストール
npm install --save-dev @types/react

npm install typescript --save-dev

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

import { atom } from 'jotai';

// 型を指定したアトムを作成
const countAtom = atom<number>(0);

export default countAtom;

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

const Counter: React.FC = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>カウントアップ</button>
    </div>
  );
};

export default Counter;

import { atom } from 'jotai';

// 数値型のカウンター状態を定義
const counterAtom = atom(0);

export default counterAtom;

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

const Counter: React.FC = () => {
  const [count, setCount] = useAtom(counterAtom);

  return (
    <div>
      <h1>Jotaiカウンター</h1>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>増やす</button>
      <button onClick={() => setCount((prev) => prev - 1)}>減らす</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
};

export default Counter;

import { atom } from 'jotai';

// 型付きアトム
const countAtom = atom<number>(0);

export default countAtom;

import { atom } from 'jotai';

// タスクの型定義
interface Task {
  id: number;
  title: string;
  completed: boolean;
}

// 型付きタスクリストアトム
const tasksAtom = atom<Task[]>([
  { id: 1, title: 'タスク1', completed: false },
  { id: 2, title: 'タスク2', completed: true },
]);

export default tasksAtom;

import { atom } from 'jotai';
import tasksAtom from './tasksAtom';

// 未完了タスクの数を計算する派生アトム
const incompleteTaskCountAtom = atom<number>((get) => {
  const tasks = get(tasksAtom);
  return tasks.filter((task) => !task.completed).length;
});

export default incompleteTaskCountAtom;

// 間違った型の値を設定しようとするとエラーが発生
setCount('string'); // エラー: 型 'string' を型 'number' に割り当てることはできません

import { atom } from 'jotai';

// タスクの型定義
interface Task {
  id: number;
  title: string;
  completed: boolean;
}

// タスクリストアトムの作成
const tasksAtom = atom<Task[]>([]);

export default tasksAtom;

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

const TodoApp: React.FC = () => {
  const [tasks, setTasks] = useAtom(tasksAtom);
  const [newTaskTitle, setNewTaskTitle] = useState('');

  // タスクを追加する関数
  const addTask = () => {
    if (!newTaskTitle.trim()) return;
    const newTask = {
      id: Date.now(),
      title: newTaskTitle,
      completed: false,
    };
    setTasks((prev) => [...prev, newTask]);
    setNewTaskTitle('');
  };

  // タスクの完了状態をトグルする関数
  const toggleTaskCompletion = (id: number) => {
    setTasks((prev) =>
      prev.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  // タスクを削除する関数
  const deleteTask = (id: number) => {
    setTasks((prev) => prev.filter((task) => task.id !== id));
  };

  return (
    <div>
      <h1>To-Doアプリ</h1>
      <div>
        <input
          type="text"
          value={newTaskTitle}
          onChange={(e) => setNewTaskTitle(e.target.value)}
          placeholder="新しいタスクを入力"
        />
        <button onClick={addTask}>追加</button>
      </div>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <label>
              <input
                type="checkbox"
                checked={task.completed}
                onChange={() => toggleTaskCompletion(task.id)}
              />
              {task.title}
            </label>
            <button onClick={() => deleteTask(task.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

import { atom } from 'jotai';

// ユーザーの型定義
interface User {
  id: number;
  name: string;
  email: string;
}

// 非同期処理を含むアトム
const userAtom = atom<Promise<User[]>>(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('データの取得に失敗しました');
  }
  return response.json();
});

export default userAtom;

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

const UserList: React.FC = () => {
  const [users] = useAtom(userAtom);

  return (
    <div>
      <h1>ユーザーリスト</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <p>名前: {user.name}</p>
            <p>メール: {user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

import { atom } from 'jotai';

// ローディング状態
const loadingAtom = atom<boolean>(true);

// 非同期データ取得アトム
const userAtomWithLoading = atom(async (get) => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('データの取得に失敗しました');
  }
  const data = await response.json();
  // ローディング状態を更新
  get(loadingAtom);
  return data;
});

import React from 'react';
import { useAtom } from 'jotai';
import userAtomWithLoading, { loadingAtom } from './userAtomWithLoading';

const UserListWithLoading: React.FC = () => {
  const [users] = useAtom(userAtomWithLoading);
  const [isLoading] = useAtom(loadingAtom);

  if (isLoading) {
    return <p>読み込み中...</p>;
  }

  return (
    <div>
      <h1>ユーザーリスト</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <p>名前: {user.name}</p>
            <p>メール: {user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserListWithLoading;

import { atom } from 'jotai';

// 特定のコンポーネントでのみ使用されるローカルアトム
const localStateAtom = atom<string>('初期値');

import { atom } from 'jotai';

// ユーザー情報を個別に管理
const userNameAtom = atom<string>('匿名');
const userEmailAtom = atom<string>('example@example.com');

import { atom } from 'jotai';

const countAtom = atom<number>(0);
const doubleCountAtom = atom<number>((get) => get(countAtom) * 2);

import { atom } from 'jotai';

const errorAtom = atom<string | null>(null);

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

import { useAtomDevtools } from 'jotai-devtools';
useAtomDevtools(atom, 'アトムの名前');

import { renderHook, act } from '@testing-library/react-hooks';
import { useAtom } from 'jotai';
import countAtom from './countAtom';

test('カウントの初期値は0であるべき', () => {
  const { result } = renderHook(() => useAtom(countAtom));
  expect(result.current[0]).toBe(0);
});