第15回：React基礎編・総まとめ：ToDoアプリで全知識を繋げよう

前回：カスタムフック自作入門：ロジックを共通化してコードをスッキリさせるでは、自分専用のオリジナル・フックを作る高度なテクニックを学びました。

全25回のカリキュラムのうち、今回で「基礎編」が完結します。これまでに学んだ「JSX」「Props」「State」「Hooks」というバラバラのピースを、1つの実用的なアプリとして完成させましょう！

1. 基礎知識の「全部盛り」パズル
2. 【実践】集大成の「ToDoアプリ」
1. App.jsx（基礎編・完結版）
3. コードのポイント解説
1. JavaScript：データの不変性（イミュータビリティ）
2. React：単方向データフロー
4. 基礎を終えたあなたへ
1. 今回のまとめ
2. 次回予告：ページが切り替わる魔法「ルーティング」

1. 基礎知識の「全部盛り」パズル

Reactの学習は、よく「パズル」に例えられます。

JSX (第3回): 見た目を作る。
Props (第5回): 部品に情報を渡す。
useState (第6回): データを記憶する。
useEffect (第11回): タイミングを計る。
カスタムフック (第14回): 仕組みを共通化する。

これらが組み合わさることで、本物のアプリが動き出します。

2. 【実践】集大成の「ToDoアプリ」

学んだ技術を総動員して、実用的なToDoアプリを作成します。第2回の環境で作成した App.jsx を以下のコードに書き換えてください。

App.jsx（基礎編・完結版）

JavaScript

import React, { useState } from 'react';

// [第4回] コンポーネントの分割
function TodoItem({ task, onDelete }) {
  return (
    <li>
      {task} 
      <button onClick={onDelete} style={{ marginLeft: '10px' }}>削除</button>
    </li>
  );
}

export default function App() {
  // [第6回・第10回] 状態管理とフォームの制御
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = (e) => {
    e.preventDefault(); // [第10回] リロード防止
    if (input === "") return;
    
    // [第8回] リストに新しいデータを追加（スプレッド構文）
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput(""); 
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>React基礎の集大成：ToDoアプリ</h1>
      
      <form onSubmit={addTodo}>
        <input 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          placeholder="新しいタスク..."
        />
        <button type="submit">追加</button>
      </form>

      {/* [第9回] 条件付きレンダリング */}
      {todos.length === 0 && <p>タスクはありません。自由な時間です！</p>}

      {/* [第8回] map関数によるリスト表示 */}
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {todos.map((todo) => (
          <TodoItem 
            key={todo.id} 
            task={todo.text} 
            onDelete={() => setTodos(todos.filter(t => t.id !== todo.id))} 
          />
        ))}
      </ul>
    </div>
  );
}

CodeSandboxで基礎編まとめのToDoアプリを動かす