DjangoとReactでタスク管理アプリ

DjangoとReactを使用してタスク管理アプリケーションを構築する完全ガイド

DjangoとReactを使ってタスク管理アプリケーションを作成するのは、現代的なフルスタック開発の学習に最適です。このガイドでは、Djangoをバックエンドとして、Reactをフロントエンドとして使用して、シンプルなタスク管理アプリケーションを構築する方法をステップバイステップで解説します。

目次

1. 環境設定
2. Djangoプロジェクトの作成
3. Django RESTフレームワークのセットアップ
4. Reactアプリケーションのセットアップ
5. DjangoとReactの連携
6. タスク管理機能の実装
7. デプロイ

1. 環境設定

まず最初に、DjangoとReactを使うための開発環境を設定します。

必要なツール：

• Python（Django）
• Node.js と npm（React）
• Git（コード管理）

インストール方法：

1. Pythonのインストール
   Pythonがインストールされていない場合は公式サイトからインストールします。

2. Node.jsのインストール
   Node.jsも公式サイトからインストールします：Node.js公式サイト

3. 必要なライブラリをインストール
   DjangoとReactを動かすためには、以下のパッケージをインストールします。

bash
CopyEdit
# Django
pip install django djangorestframework

# CORSの設定
pip install django-cors-headers

2. Djangoプロジェクトの作成

まずはDjangoのプロジェクトを作成します。

bash
CopyEdit
# Djangoプロジェクトの作成
django-admin startproject taskmanager

# プロジェクトディレクトリに移動
cd taskmanager

# アプリケーションの作成
python manage.py startapp tasks

次に、tasksアプリをDjangoプロジェクトの設定ファイルに追加します。

taskmanager/settings.pyを開いて、INSTALLED_APPSにtasksとrest_frameworkを追加します。

python
CopyEdit
INSTALLED_APPS = [
    # その他のインストール済みアプリ
    'rest_framework',
    'tasks',
]

3. Django RESTフレームワークのセットアップ

Reactと通信するために、Django RESTフレームワークを使用してAPIを構築します。

モデルの作成

タスクを管理するためのシンプルなモデルをtasks/models.pyに作成します。

python
CopyEdit
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

次に、データベースを作成します。

bash
CopyEdit
# マイグレーションを実行
python manage.py makemigrations
python manage.py migrate

シリアライザーの作成

REST APIを通じてタスクをやりとりするために、シリアライザーを作成します。tasks/serializers.pyを作成し、以下のコードを記述します。

python
CopyEdit
from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = '__all__'

ビューの作成

次に、タスクを操作するためのビューを作成します。tasks/views.pyに以下のコードを記述します。

python
CopyEdit
from rest_framework import generics
from .models import Task
from .serializers import TaskSerializer

class TaskListCreate(generics.ListCreateAPIView):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

class TaskDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

URLの設定

最後に、APIエンドポイントを設定します。tasks/urls.pyを作成し、以下のように記述します。

python
CopyEdit
from django.urls import path
from .views import TaskListCreate, TaskDetail

urlpatterns = [
    path('tasks/', TaskListCreate.as_view(), name='task-list'),
    path('tasks//', TaskDetail.as_view(), name='task-detail'),
]

そして、taskmanager/urls.pyにこれらのURLを追加します。

python
CopyEdit
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('tasks.urls')),
]

4. Reactアプリケーションのセットアップ

次に、Reactを使ってフロントエンドを構築します。まず、create-react-appを使って新しいReactアプリケーションを作成します。

bash
CopyEdit
# Reactアプリの作成
npx create-react-app task-manager-frontend

# 作成したReactアプリのディレクトリに移動
cd task-manager-frontend

必要なパッケージのインストール

DjangoとReactが通信できるようにするために、Axiosをインストールします。

bash
CopyEdit
npm install axios

5. DjangoとReactの連携

ReactからDjangoのAPIにアクセスするために、Axiosを使ってHTTPリクエストを送信します。

タスクの一覧を表示するコンポーネントの作成

src/components/TaskList.jsを作成し、以下のように記述します。

javascript
CopyEdit
import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

    useEffect(() => {
        axios.get('http://localhost:8000/api/tasks/')
            .then(response => {
                setTasks(response.data);
            })
            .catch(error => {
                console.log(error);
            });
    }, []);

    return (
        <div>
            <h1>タスクリストh1>
            <ul>
                {tasks.map(task => (
                    <li key={task.id}>{task.title}li>
                ))}
            ul>
        div>
    );
};

export default TaskList;

タスクの追加機能

タスクを追加するためのフォームを作成します。src/components/AddTask.jsを作成し、以下のように記述します。

javascript
CopyEdit
import React, { useState } from 'react';
import axios from 'axios';

const AddTask = () => {
    const [title, setTitle] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post('http://localhost:8000/api/tasks/', { title })
            .then(response => {
                setTitle('');
                alert('タスクが追加されました');
            })
            .catch(error => {
                console.log(error);
            });
    };

    return (
        <div>
            <h1>タスクを追加h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="タスクのタイトル"
                />
                <button type="submit">追加button>
            form>
        div>
    );
};

export default AddTask;

6. タスク管理機能の実装

タスクの編集や削除機能を実装します。これにより、アプリケーションは完全なタスク管理ツールになります。

7. デプロイ

開発が終わったら、DjangoとReactをHerokuやVercelにデプロイすることができます。これにより、アプリケーションはインターネット上でアクセス可能になります。

まとめ

DjangoとReactを使って、シンプルなタスク管理アプリケーションを作成する方法を学びました。このアプローチは、フルスタック開発の基礎を理解するのに非常に有効です。今後は、ユーザー認証やリアルタイム更新など、さらに機能を追加してアプリケーションを拡張していきましょう。