React Hooksを使った簡単なToDoアプリの作り方

ReactはUIライブラリとして人気がありますが、その中でもHooksと呼ばれる機能を使うことで、よりシンプルかつ効率的にコードを書くことができます。今回はHooksを使って簡単なToDoアプリを作ってみましょう。

1. プロジェクトの作成

まずはプロジェクトを作成しましょう。コマンドラインから以下のように実行します。

npx create-react-app todo-app

これで、todo-appという名前のReactアプリが作成されます。

2. コンポーネントの作成

ToDoアプリを作るために、以下の3つのコンポーネントを作成します。

• TodoForm: 新しいToDoを入力するフォームを表示するコンポーネント
• TodoList: ToDoのリストを表示するコンポーネント
• Todo: 各ToDoを表示するコンポーネント

それでは、まずはTodoFormコンポーネントを作成しましょう。

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button className="button">Add</button>
    </form>
  );
}

export default TodoForm;

次に、TodoListコンポーネントを作成します。

import React from 'react';
import Todo from './Todo';

function TodoList({ todos, toggleTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        <Todo key={todo.id} todo={todo} toggleTodo={toggleTodo} />
      ))}
    </ul>
  );
}

export default TodoList;

最後に、Todoコンポーネントを作成します。

import React from 'react';

function Todo({ todo, toggleTodo }) {
  const handleCheckboxClick = () => {
    toggleTodo(todo.id);
  };

  return (
    <li>
      <input
        type="checkbox"
        checked={todo.complete}
        onChange={handleCheckboxClick}
      />
      <span>{todo.text}</span>
    </li>
  );
}

export default Todo;

3. ステートの管理

ToDoアプリでは、ToDoの追加や完了の状態を管理するために、ステートの管理が必要です。Appコンポーネントでステートを管理し、子コンポーネントに
渡していきましょう。

import React, { useState } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';

function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React Hooks', complete: false },
    { id: 2, text: 'Build a ToDo App', complete: false },
  ]);

  const addTodo = (text) => {
    const newTodos = [...todos, { id: todos.length + 1, text, complete: false }];
    setTodos(newTodos);
  };

  const toggleTodo = (id) => {
    const updatedTodos = todos.map((todo) =>
      todo.id === id ? { ...todo, complete: !todo.complete } : todo
    );
    setTodos(updatedTodos);
  };

  return (
    <div>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} toggleTodo={toggleTodo} />
    </div>
  );
}

export default App;

上記のコードでは、useStateフックを使って、todosステートを初期化しています。addTodo関数を定義して、フォームから送信されたToDoをtodosに追加しています。toggleTodo関数を定義して、チェックボックスがクリックされたときに、ToDoの完了状態を反転させています。

Appコンポーネントでは、TodoFormコンポーネントとTodoListコンポーネントを表示しています。TodoListコンポーネントには、todosとtoggleTodo関数をプロップスとして渡しています。

4. ToDoアプリの完成

最後に、Appコンポーネントを表示するために、index.jsファイルを更新しましょう。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

これで、ToDoアプリが完成しました！

まとめ

React Hooksを使って、簡単なToDoアプリを作成する方法について説明しました。ステートの管理や子コンポーネントへのプロップスの渡し方など、Reactの基本的な使い方を学ぶことができます。React Hooksは、コンポーネントの状態をシンプルかつ効率的に管理するための機能であり、開発者にとって非常に便利な機能です。