【React超入門】ToDoリストアプリの作り方を完全解説！初心者OK

Reactで「ToDoリストアプリ」を作ることは、Reactの基礎を学びながら実際に使えるアプリを作る最高の学習方法です。
「Reactの勉強を始めたけど、何を作ればいいかわからない」「propsやstateの使い分けが難しい」と悩む方は多いでしょう。
本記事では、初心者でもReactの仕組みをしっかり理解しながら、ゼロからToDoアプリを作れる手順を紹介します。
誰でも実装できるよう、コードつき・見やすい構成・注意点まで網羅しています。

React ToDoリストアプリ作成ガイド
1. 結論：ToDoアプリはReact学習の最適解
Reactでの準備と環境構築
1. Node.jsとnpmのインストール
2. Create React Appでアプリ作成
ToDoアプリに必要な機能設計
完成後の改善ポイント
まとめ：React ToDoで実力アップ

React ToDoリストアプリ作成ガイド

結論：ToDoアプリはReact学習の最適解

Reactの学習では、props・state・コンポーネント・イベント処理などをバランス良く身につける必要があります。
ToDoアプリはそれらをすべて活用する代表的な題材であり、初心者が最短でReactを理解できる構成です。
作りながら「使えるReact」が身につく点が最大のメリットです。

Reactでの準備と環境構築

Node.jsとnpmのインストール

Reactを使うためには、まずNode.jsとnpm（パッケージ管理）が必要です。
以下の公式サイトからインストールしてください。

https://nodejs.org/ja/

確認方法：

node -v
npm -v

Create React Appでアプリ作成

Reactの雛形を自動生成するには、Create React Appが便利です。

npx create-react-app react-todo-app
cd react-todo-app
npm start

この時点で、Reactアプリの土台が動作しているはずです。

ToDoアプリに必要な機能設計

基本機能の洗い出し

ToDoアプリには最低限、以下の機能が必要です。

タスクの追加
タスクの削除
タスクの完了・未完了の切り替え
未完了と完了の表示切り替え（任意）

実際に作る前に、どの機能をどのコンポーネントで処理するかを簡単に整理しておくと、実装がスムーズになります。

コンポーネントの分け方

以下のように分割すると管理が楽になります。

Appコンポーネント：全体の管理
TodoInputコンポーネント：入力欄とボタン
TodoListコンポーネント：リスト表示
TodoItemコンポーネント：1件ごとのタスク表示と削除ボタン

このように機能単位で小さく分けることで、コードが読みやすく、後で拡張もしやすくなります。

タスクを追加する機能

TodoInputコンポーネントを作成し、入力フォームとボタンを配置します。

import { useState } from "react";

const TodoInput = ({ onAdd }) => {
  const [text, setText] = useState("");

  const handleAdd = () => {
    if (!text.trim()) return;
    onAdd(text);
    setText("");
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="タスクを入力してください"
      />
      <button onClick={handleAdd}>追加</button>
    </div>
  );
};

タスクを一覧表示・削除する

TodoItemとTodoListを用いてリスト表示と削除機能を実装します。

const TodoItem = ({ task, onDelete }) => (
  <li>
    {task.text}
    <button onClick={() => onDelete(task.id)}>削除</button>
  </li>
);

const TodoList = ({ tasks, onDelete }) => (
  <ul>
    {tasks.map((task) => (
      <TodoItem key={task.id} task={task} onDelete={onDelete} />
    ))}
  </ul>
);

Appコンポーネントで状態を管理する

import { useState } from "react";
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";

const App = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = (text) => {
    const newTask = {
      id: Date.now(),
      text,
    };
    setTasks([...tasks, newTask]);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div>
      <h1>ToDoリスト</h1>
      <TodoInput onAdd={addTask} />
      <TodoList tasks={tasks} onDelete={deleteTask} />
    </div>
  );
};

export default App;