Reactで簡単に作れるTODOアプリの作り方

Reactを学んでいる人ならば、TODOアプリを作ってみたいと思う人も多いでしょう。今回は、Reactで簡単に作れるTODOアプリの作り方をご紹介します。

Reactとは

Reactは、Facebookが開発したJavaScriptのライブラリです。Reactは、ユーザーインターフェースを構築するためのもので、特にWebアプリケーションに向いています。Reactは、仮想DOMを使って、パフォーマンスの向上を図っています。

TODOアプリの概要

TODOアプリは、タスクを管理するためのアプリケーションです。ユーザーは、TODOリストにタスクを追加したり、タスクを削除したり、完了したタスクをマークすることができます。

TODOアプリの作り方

まずは、Reactの開発環境を整えます。Reactを使用するためには、Node.jsとnpmが必要です。Node.jsとnpmがインストールされていることを確認したら、次のコマンドを実行して、Reactアプリの雛形を作成します。

npx create-react-app my-todo-app

次に、TODOアプリのコンポーネントを作成します。まずは、TODOリストを表示するコンポーネントを作成します。

import React from 'react';

function TodoList(props) {
  const todos = props.todos.map((todo) => (
    <li key={todo.id}>
      <input type="checkbox" checked={todo.completed} onChange={() => props.toggleCompleted(todo.id)} />
      {todo.title}
      <button onClick={() => props.deleteTodo(todo.id)}>削除</button>
    </li>
  ));

  return (
    <ul>{todos}</ul>
  );
}

export default TodoList;

次に、TODOリストを管理するための状態を作成します。

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

function App() {
  const [todos, setTodos] = useState([]);

  function addTodo() {
    const newTodo = {
      id: todos.length + 1,
      title: '新しいTODO',
      completed: false,
    };

    setTodos([...todos, newTodo]);
  }

  function toggleCompleted(id) {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      } else {
        return todo;
      }
    });

    setTodos(updatedTodos);
  }

  function deleteTodo(id) {
    const updatedTodos = todos.filter((todo) => todo.id !== id);

    setTodos(updatedTodos);
  }

  return (
    <div>
      <h1>TODOアプリ</h1>
      <button onClick={addTodo}>新規作成</button>
      <TodoList todos={todos} toggleCompleted={toggleCompleted} deleteTodo={deleteTodo} />
    </div>
  );
}

export default App;

最後に、アプリケーションをレンダリングするためのコードを作成します。

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

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

これで、TODOアプリが完成しました。

まとめ

Reactを使って、簡単にTODOアプリを作ることができました。Reactは、仮想DOMを使って、パフォーマンスの向上を図っているため、高速にアプリケーションを構築することができます。TODOアプリを作ってみることで、Reactの基礎を学ぶことができます。