useEffect

import文

import ReactDOM from 'react-dom'
// 問題1. useEffectをインポートしよう
import React, { useEffect, useState } from 'react'
// ここまで

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, title: '買い物に行く', status: 'done' },
    { id: 2, title: '子どものお迎え', status: 'notStarted' },
    { id: 3, title: '企画書の提出', status: 'inProgress' }
  ])
  const [todoTitle, setTodoTitle] = useState('')
  const [todoId, setTodoId] = useState(todos.length + 1)
  const [isEditable, setIsEditable] = useState(false)
  const [editId, setEditId] = useState('')
  const [newTitle, setNewTitle] = useState('')
  const [filter, setFilter] = useState('notStarted')
  const [filteredTodos, setFilteredTodos] = useState([])

  const handleAddFormChanges = (e) => {
    setTodoTitle(e.target.value)
  }

  const resetFormInput = () => {
    setTodoTitle('')
  }

  const handleAddTodo = () => {
    setTodos([...todos, { id: todoId, title: todoTitle, status: 'notStarted' }])
    setTodoId(todoId + 1)
    resetFormInput()
  }

  const handleDeleteTodo = (targetTodo) => {
    setTodos(todos.filter((todo) => todo !== targetTodo))
  }

  const handleOpenEditForm = (todo) => {
    setIsEditable(true)
    setEditId(todo.id)
    setNewTitle(todo.title)
  }

  const handleEditFormChange = (e) => {
    setNewTitle(e.target.value)
  }

  const handleCloseEditForm = () => {
    setIsEditable(false)
    setEditId('')
  }

  const handleEditTodo = () => {
    const newArray = todos.map((todo) =>
      todo.id === editId ? { ...todo, title: newTitle } : todo
    )
    setTodos(newArray)
    setNewTitle('')
    setEditId()
    handleCloseEditForm()
  }

  const handleStatusChange = (targetTodo, e) => {
    const newArray = todos.map((todo) =>
      todo.id === targetTodo.id ? { ...todo, status: e.target.value } : todo
    )
    setTodos(newArray)
  }

  useEffect(() => {
    // 問題2. Todoリストの変更とフィルター操作に連動して、useEffectが実行されるようにしよう
    console.log('useEffect発動')
  }, [filter, todos])
  // ここまで

  return (
    <>
      {isEditable ? (
        <div>
          <input
            type="text"
            label="新しいタイトル"
            value={newTitle}
            onChange={handleEditFormChange}
          />
          <button onClick={handleEditTodo}>編集を保存</button>
          <button onClick={handleCloseEditForm}>キャンセル</button>
        </div>
      ) : (
        <div>
          <input
            type="text"
            label="タイトル"
            value={todoTitle}
            onChange={handleAddFormChanges}
          />
          <button onClick={handleAddTodo}>作成</button>
          <select value={filter} onChange={(e) => setFilter(e.target.value)}>
            <option value="all">すべて</option>
            <option value="notStarted">未着手</option>
            <option value="inProgress">作業中</option>
            <option value="done">完了</option>
          </select>
        </div>
      )}

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.title}</span>
            <select
              value={todo.status}
              onChange={(e) => handleStatusChange(todo, e)}
            >
              <option value="notStarted">未着手</option>
              <option value="inProgress">作業中</option>
              <option value="done">完了</option>
            </select>
            <button onClick={() => handleOpenEditForm(todo)}>編集</button>
            <button onClick={() => handleDeleteTodo(todo)}>削除</button>
          </li>
        ))}
      </ul>
    </>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import ReactDOM from 'react-dom'
// 問題1. useEffectをインポートしよう
import React, { useState } from 'react'
// ここまで

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, title: '買い物に行く', status: 'done' },
    { id: 2, title: '子どものお迎え', status: 'notStarted' },
    { id: 3, title: '企画書の提出', status: 'inProgress' }
  ])
  const [todoTitle, setTodoTitle] = useState('')
  const [todoId, setTodoId] = useState(todos.length + 1)
  const [isEditable, setIsEditable] = useState(false)
  const [editId, setEditId] = useState('')
  const [newTitle, setNewTitle] = useState('')
  const [filter, setFilter] = useState('notStarted')
  const [filteredTodos, setFilteredTodos] = useState([])

  const handleAddFormChanges = (e) => {
    setTodoTitle(e.target.value)
  }

  const resetFormInput = () => {
    setTodoTitle('')
  }

  const handleAddTodo = () => {
    setTodos([...todos, { id: todoId, title: todoTitle, status: 'notStarted' }])
    setTodoId(todoId + 1)
    resetFormInput()
  }

  const handleDeleteTodo = (targetTodo) => {
    setTodos(todos.filter((todo) => todo !== targetTodo))
  }

  const handleOpenEditForm = (todo) => {
    setIsEditable(true)
    setEditId(todo.id)
    setNewTitle(todo.title)
  }

  const handleEditFormChange = (e) => {
    setNewTitle(e.target.value)
  }

  const handleCloseEditForm = () => {
    setIsEditable(false)
    setEditId('')
  }

  const handleEditTodo = () => {
    const newArray = todos.map((todo) =>
      todo.id === editId ? { ...todo, title: newTitle } : todo
    )
    setTodos(newArray)
    setNewTitle('')
    setEditId()
    handleCloseEditForm()
  }

  const handleStatusChange = (targetTodo, e) => {
    const newArray = todos.map((todo) =>
      todo.id === targetTodo.id ? { ...todo, status: e.target.value } : todo
    )
    setTodos(newArray)
  }

  useEffect(() => {
    // 問題2. Todoリストの変更とフィルター操作に連動して、useEffectが実行されるようにしよう
  }, [])
  // ここまで

  return (
    <>
      {isEditable ? (
        <div>
          <input
            type="text"
            label="新しいタイトル"
            value={newTitle}
            onChange={handleEditFormChange}
          />
          <button onClick={handleEditTodo}>編集を保存</button>
          <button onClick={handleCloseEditForm}>キャンセル</button>
        </div>
      ) : (
        <div>
          <input
            type="text"
            label="タイトル"
            value={todoTitle}
            onChange={handleAddFormChanges}
          />
          <button onClick={handleAddTodo}>作成</button>
          <select value={filter} onChange={(e) => setFilter(e.target.value)}>
            <option value="all">すべて</option>
            <option value="notStarted">未着手</option>
            <option value="inProgress">作業中</option>
            <option value="done">完了</option>
          </select>
        </div>
      )}

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.title}</span>
            <select
              value={todo.status}
              onChange={(e) => handleStatusChange(todo, e)}
            >
              <option value="notStarted">未着手</option>
              <option value="inProgress">作業中</option>
              <option value="done">完了</option>
            </select>
            <button onClick={() => handleOpenEditForm(todo)}>編集</button>
            <button onClick={() => handleDeleteTodo(todo)}>削除</button>
          </li>
        ))}
      </ul>
    </>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


フィルターの変化をuseEffectで検知しよう

追加・削除機能実装後の完成形を見てみよう

リストのレンダー

Todoリストを表示させる実装をしましょう

新規作成フォームの見た目を作ろう

useState

useStateを導入しよう

イベントハンドラ

inputに入力された値を制御しよう

stateの更新+スプレッド構文

作成ボタンを押した時の処理を実装しよう その１

作成ボタンを押した時の処理を実装しよう その２

引数

配列操作/filter(プリミティブ)

削除ボタンと削除機能を実装しよう

編集・絞り込み機能追加後の完成形を見てみよう

編集ボタンとフォームの見た目を作ろう

三項演算子

三項演算子を使って画面を切り替える実装をしよう

編集ボタンの押下時とキャンセル時に画面を切り替えよう

分割代入

 編集したいtodoを特定しよう その１

 編集したいtodoを特定しよう その２　

編集フォームのInputを制御しよう

配列操作/map

編集内容を保存しよう

<select>

セレクトボックスを設置しよう

進捗状況を表示するセレクトボックスで選択した値を保持しよう

フィルターの見た目を作ろう

絞り込み用フィルターで選択した値を保持しよう

switch文とcase節

switch文では、指定した$(1)の結果が各$(2)節に一致する場合、その$(2)節に記述されている処理をswitch文の$(3)、または$(4)文まで順に実行する。

todoを絞り込んで一覧に表示させよう

関数コンポーネントやuseState、useEffectなどのReact Hooksを利用し、実践的なTodoアプリを構築します。
state管理やイベント処理に関する知識が身につきます。

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます

Reactコース

【実践】アプリ開発に挑戦しよう💻

「ReactでTodoアプリを作ろう」レッスンの総復習クイズです。

ReactでTodoアプリを作ろうの総復習クイズ

ReactでTodoアプリを作ろう