Reactで作るタスク管理アプリ

Reactを使った「タスク管理アプリ」の作成方法について、完全かつ包括的なガイドをお伝えします。タスク管理アプリは、日々の生活や仕事を効率的に進めるための強力なツールです。この記事では、Reactの基本を使い、タスクの追加、削除、完了管理ができるシンプルなアプリを作成する手順を順を追って解説します。

1. 環境構築

まずは、Reactアプリを作成するための開発環境を整えます。以下の手順で進めます。

Node.jsのインストール

ReactはNode.js環境で動作しますので、まずNode.jsをインストールします。公式サイトからインストーラーをダウンロードしてインストールしましょう。

• Node.js公式サイト

create-react-appでReactアプリを作成

次に、Reactの開発環境を簡単にセットアップするためのツール「create-react-app」を使います。以下のコマンドをターミナルに入力して、新しいReactアプリを作成します。

bash
CopyEdit
npx create-react-app task-manager
cd task-manager
npm start

これで、Reactアプリケーションがローカルサーバーで起動します。ブラウザでhttp://localhost:3000にアクセスすると、Reactの初期画面が表示されるはずです。

2. 必要なファイルと構成

Reactアプリは、コンポーネントベースで構成されます。今回は、以下のファイル構成を採用します。

css
CopyEdit
src/
  ├── components/
  │   ├── TaskList.js
  │   ├── TaskItem.js
  │   └── TaskForm.js
  ├── App.js
  └── index.js

各コンポーネントの役割は次の通りです。

• TaskList.js: タスクの一覧を表示するコンポーネント
• TaskItem.js: 各タスクを表示し、完了ボタンや削除ボタンを持つコンポーネント
• TaskForm.js: 新しいタスクを追加するためのフォーム
• App.js: アプリ全体の管理を行うメインコンポーネント

3. タスク管理ロジックの実装

3.1 App.jsの作成

App.jsはアプリ全体を管理します。タスクのリストや状態を管理し、他のコンポーネントにデータを渡します。

js
CopyEdit
import React, { useState } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';

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

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

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

  const toggleTask = (id) => {
    setTasks(
      tasks.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div className="App">
      <h1>タスク管理アプリh1>
      <TaskForm addTask={addTask} />
      <TaskList tasks={tasks} deleteTask={deleteTask} toggleTask={toggleTask} />
    div>
  );
}

export default App;

3.2 TaskForm.jsの作成

TaskForm.jsでは、新しいタスクを追加するためのフォームを作成します。

js
CopyEdit
import React, { useState } from 'react';

function TaskForm({ addTask }) {
  const [taskName, setTaskName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskName.trim() === '') return;

    const newTask = {
      id: Date.now(),
      name: taskName,
      completed: false,
    };
    addTask(newTask);
    setTaskName('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={taskName}
        onChange={(e) => setTaskName(e.target.value)}
        placeholder="新しいタスクを追加"
      />
      <button type="submit">追加button>
    form>
  );
}

export default TaskForm;

3.3 TaskList.jsの作成

TaskList.jsでは、タスクの一覧を表示し、タスクの削除や完了状態の切り替えができるようにします。

js
CopyEdit
import React from 'react';
import TaskItem from './TaskItem';

function TaskList({ tasks, deleteTask, toggleTask }) {
  return (
    <div>
      <ul>
        {tasks.map((task) => (
          <TaskItem
            key={task.id}
            task={task}
            deleteTask={deleteTask}
            toggleTask={toggleTask}
          />
        ))}
      ul>
    div>
  );
}

export default TaskList;

3.4 TaskItem.jsの作成

TaskItem.jsでは、個々のタスクを表示し、完了ボタンや削除ボタンを提供します。

js
CopyEdit
import React from 'react';

function TaskItem({ task, deleteTask, toggleTask }) {
  return (
    <li>
      <span
        style={{
          textDecoration: task.completed ? 'line-through' : 'none',
        }}
        onClick={() => toggleTask(task.id)}
      >
        {task.name}
      span>
      <button onClick={() => deleteTask(task.id)}>削除button>
    li>
  );
}

export default TaskItem;

4. スタイルの追加

アプリにスタイルを追加して、より見やすくします。以下のような簡単なCSSをsrc/App.cssに追加しましょう。

css
CopyEdit
.App {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

input {
  padding: 10px;
  margin: 10px 0;
  width: 80%;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

5. 結果の確認

ここまでのコードを実行すると、以下のような動作が確認できます。

• 新しいタスクの追加
• タスクの完了・未完了の切り替え
• タスクの削除

アプリの動作を確認し、必要に応じて改良を加えることができます。

6. まとめ

この記事では、Reactを使ってタスク管理アプリを作成する方法を紹介しました。タスクを追加、削除、完了にしたりする基本的な機能を実装しました。Reactのコンポーネントベースのアーキテクチャを活用し、アプリを分割して実装することで、保守性や拡張性の高いアプリを作成することができました。

今後は、ユーザー認証やデータベースとの連携など、さらに機能を追加していくこともできます。