ReactとTypescriptでTODOアプリを言語化しながら作ってみる

npx create-react-app --template typescript todo-app-ts

cd todo-app-ts

npm start

import { useContext, createContext, useReducer } from 'react'

// TODOリストの状態を保持するContextを作成
const TodoContext = createContext()
// Todoリストの状態を更新するためのDispatch関数を保持するContextを作成
const TodoDispatchContext = createContext()

// 初期のTODOリストのデータを用意しておく
const todosList = [
  { id: 1, content: 'a', editing: false },
  { id: 2, content: 'b', editing: false },
  { id: 3, content: 'c', editing: false },
]

// Reducer関数の定義
const todoReducer = (todos, action) => {
  // 追加、更新、削除によって処理を分ける
  switch (action.type) {
    // 新しいTODOを追加する場合
    case 'todo/add':
      return [...todos, action.todo]
    // TODOを削除する場合
    case 'todo/delete':
      return todos.filter((todo) => todo.id !== action.todo.id)
    //  TODOを削除する場合
    case 'todo/update':
      return todos.map((_todo) =>
        _todo.id === action.todo.id
          ? { ..._todo, ...action.todo }
          : { ..._todo }
      )
    // それ以外
    default:
      return todos
  }
}

// TODOの状態とReducerを結びつけるProviderを用意
const TodoProvider = ({ children }) => {
  // useReducerフックでtodoReducer関数を使ってtodosListを初期値として状態を管理し、dispatch関数を取得する
  const [todos, dispatch] = useReducer(todoReducer, todosList)
  return (
    // TodoContext.ProviderとTodoDispatchContext.Providerでtodosとdispatchを子コンポーネントに渡す
    <TodoContext.Provider value={todos}>
      <TodoDispatchContext.Provider value={dispatch}>
        {children}
      </TodoDispatchContext.Provider>
    </TodoContext.Provider>
  )
}

// Todoリストの状態を取得するカスタムフックを作成
const useTodos = () => useContext(TodoContext)
// dispatch関数を取得するカスタムフック
const useTodoDispatch = () => useContext(TodoDispatchContext)

export { useTodos, useTodoDispatch, TodoProvider }

import React from 'react'
import { TodoProvider } from '../context/TodoContext'
import { TodoList } from './TodoList'
import { TodoForm } from './TodoForm'

export const Todo = () => {
  return (
    // 先ほど作成した`Provider`を使って全体を囲ってあげることで状態を管理してあげます
    <TodoProvider>
      <TodoList />
      <TodoForm />
    </TodoProvider>
  )
}

import { useState } from 'react'
import { useTodoDispatch } from '../context/TodoContext'

type Todo = {
  id: number,
  content: string,
}

type TodoFormProps = {
  createTodo: (todo: Todo) => void,
}

export const TodoForm: React.FC<TodoFormProps> = ({ createTodo }) => {
  // 入力内容を管理
  const [enteredTodo, setEnteredTodo] = useState('')
  // Todoアイテムを追加するためのdispatch関数を取得
  const dispatch = useTodoDispatch()
  // 新たに追加されたTODOのidを設定
  const newTodoId = useTodos().length + 1
  // 入力内容を更新していく
  const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEnteredTodo(e.target.value)
  }
  // フォームのSubmitイベントによってTODOを追加
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    // 新しく追加するTODO
    const newTodo = {
      id: newTodoId,
      content: enteredTodo,
    }
    // ここでは追加したいので'todo/add'で指定する
    dispatch({ type: 'todo/add', todo: newTodo })
    // 入力内容を初期化
    setEnteredTodo('')
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" value={enteredTodo} onChange={onChangeValue} />
    </form>
  )
}

import { useTodos } from '../context/TodoContext'
import { TodoItem } from './TodoItem'

type Todo = {
  id: string,
  content: string,
}

export const TodoList = () => {
  // useTodosで現在のTODOを取得してくる
  const todos: Todo[] = useTodos()
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  )
}

import { useState } from 'react'
import { useTodoDispatch } from '../context/TodoContext'

type Props = {
  id: string,
  content: string
}

export const TodoItem:React.FC<Props>  = ({ todo }) => {
  // 更新された入力内容を管理
  const [editingContent, setEditingContent] = useState(todo.content)
  // Todoアイテムを更新・削除するためのdispatch関数を取得
  const dispatch = useTodoDispatch()
  // Todoアイテムを更新していく
  const changeContent = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEditingContent(e.target.value)
  }
  // Todoアイテムの更新状態を管理する
  const toggleEdditMode = () => {
    const newTodo = { ...todo, editing: !todo.editing }
    // ここでは更新したいので'todo/update'で指定する
    dispatch({ type: 'todo/update', todo: newTodo })
  }
  // 更新したした内容を確定する
  const confirmContent = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const newTodo = { ...todo, content: editingContent, editing: !todo.editing }
    // ここでは更新したいので'todo/update'で指定する
    dispatch({ type: 'todo/update', todo: newTodo })
  }
  // TODOを削除する
  const delete = (todo: Todo) => {
    // ここでは削除したいので'todo/delete'で指定する
    dispatch({ type: 'todo/delete', todo })
  }

  return (
    <li>
      <form onSubmit={confirmContent}>
        <span className="">
          {todo.editing ? (
            <input
              type="text"
              value={editingContent}
              onChange={changeContent}
            />
          ) : (
            <span onDoubleClick={toggleEdditMode} className="">
              {' '}
              {todo.content}
            </span>
          )}
        </span>
      </form>
      <button onClick={() => delete(todo)} className="">
        削除
      </button>
    </li>
  )
}