Reactを使って、基本的なTo-Doリストアプリを作成する手順を紹介します。
このプロジェクトでは、Reactの基礎を学びながら、動的なリストの管理方法を理解することができます。
Reactプロジェクトの作成
まず、以下のコマンドで新しいReactプロジェクトを作成します。
npx create-react-app todo-app
cd todo-app
npm startこれでReactの開発環境が準備できました。
基本のコンポーネントを作成
App.js ファイル内で基本的なTo-Doリストのコンポーネントを作成します。
まず、状態（state）を管理し、ユーザーが入力したタスクをリストに追加できるようにします。
import React, { useState } from 'react';
function App() {
const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
setTasks([...tasks, task]);
setTask('');
};
return (
<div className="App">
<h1>To-Do List</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={
(e) => setTask(e.target.value)
}
placeholder="Add a new task"
/>
<button type="submit">Add Task</button>
</form>
<ul>
{tasks.map((task, index) => (
<li
key={index}
>
{task}
</li>
))}
</ul>
</div>
);
}
export default App;機能の解説
- 状態の管理
useStateフックを使用して、現在のタスク（task）と追加されたタスクのリスト（tasks）を管理しています。 - タスクの追加
フォームが送信されると、入力されたタスクが既存のリストに追加されます。 - タスクの表示
map()メソッドを使って、tasksリスト内の各タスクを<li>要素として表示しています。
タスクの削除機能の追加
次に、タスクを削除する機能を追加しましょう。
タスクをクリックすると、そのタスクがリストから削除されるようにします。
import React, { useState } from 'react';
function App() {
const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
setTasks([...tasks, task]);
setTask('');
};
// 追加 start
const removeTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
};
// 追加 end
return (
<div className="App">
<h1>To-Do List</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={
(e) => setTask(e.target.value)
}
placeholder="Add a new task"
/>
<button type="submit">Add Task</button>
</form>
<ul>
{tasks.map((task, index) => (
<li
key={index}
{/* 追加 */}
onClick={() => removeTask(index)}
>
{task}
</li>
))}
</ul>
</div>
);
}
export default App;これにより、クリックしたタスクがリストから削除されます。
まとめ
このシンプルなTo-Doリストアプリを作成することで、Reactの基本であるコンポーネント、状態管理、イベント処理を学ぶことができました。
さらに、アプリに機能を追加したり、スタイリングを強化して、より完成度の高いアプリに発展させることが可能です。
