ReactでシンプルなTodoアプリを作ろう

Reactは、フロントエンド開発で最も人気のあるJavaScriptライブラリの一つです。本記事では、Reactを使用してシンプルなTodoアプリを作成する方法を説明します。

Reactとは？

Reactは、Facebookが開発したオープンソースのJavaScriptライブラリです。Reactは、仮想DOM（Virtual DOM）を使用して、高速かつ柔軟なUIを作成することができます。

Todoアプリの概要

このTodoアプリは、ユーザーがタスクを追加、編集、削除できるようにするものです。タスクは、完了したかどうかに関係なく表示されます。

プロジェクトのセットアップ

まず、プロジェクトをセットアップする必要があります。以下のコマンドを使用して、新しいReactアプリを作成します。

npx create-react-app my-todo-app

次に、必要なパッケージをインストールします。

npm install react-bootstrap bootstrap uuid

コンポーネントの作成

まず、App.jsファイルを開いて、以下のように更新します。

import { useState } from "react";
import { Container, Row, Col, Form, Button, ListGroup } from "react-bootstrap";
import { v4 as uuidv4 } from "uuid";

function App() {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text) {
      return;
    }
    const newTask = {
      id: uuidv4(),
      text,
    };
    setTasks([...tasks, newTask]);
    setText("");
  };

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

  return (
    <Container className="mt-5">
      <Row>
        <Col md={{ span: 6, offset: 3 }}>
          <h2 className="mb-4">Todoアプリ</h2>
          <Form onSubmit={handleSubmit}>
            <Form.Group className="mb-3" controlId="formTask">
              <Form.Label>タスクを入力してください。</Form.Label>
              <Form.Control type="text" value={text} onChange={handleChange} />
            </Form.Group>
            <Button variant="primary" type="submit">
              追加
            </Button>
          </Form>
          <ListGroup className="mt-4">
            {tasks.map((task) => (
              <ListGroup.Item key={task.id}>
                {task.text}
                <Button variant="danger" className="ms-3" onClick={() => handleDelete(task.id)}>

削除
                </Button>
              </ListGroup.Item>
            ))}
          </ListGroup>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

このコードでは、useStateフックを使用して、タスクリストとテキスト入力を管理しています。handleChange関数は、テキスト入力の変更を処理し、handleSubmit関数は、フォームの送信を処理して新しいタスクを追加します。handleDelete関数は、削除ボタンがクリックされたときにタスクを削除します。

アプリのテスト

最後に、アプリをテストしてみましょう。以下のコマンドを使用して、アプリを起動します。

npm start

ブラウザでhttp://localhost:3000/にアクセスすると、Todoアプリが表示されます。新しいタスクを追加し、削除してみてください。

まとめ

Reactを使用してシンプルなTodoアプリを作成する方法を紹介しました。Reactを使うと、コンポーネントベースのUIを作成することができ、そのユーザビリティや保守性が高くなるメリットがあります。このアプリをベースにして、より高度なアプリを作成することができるので、ぜひ試してみてください。