Tailwind CSSでスタイリングを効率化：ReactJSとDjangoで美しいUIを構築

ReactJSとDjangoを使ってリアルなウェブアプリケーションを構築する方法

ReactJSとDjangoは、それぞれ単独でも強力なツールですが、組み合わせることで、ユーザーインターフェースとバックエンドをシームレスに連携させた、高度なウェブアプリケーションを構築することができます。このチュートリアルでは、ReactJSとDjangoを使ってリアルなウェブアプリケーションを構築する方法を、分かりやすく説明していきます。

ステップ1：プロジェクトのセットアップ

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

   • django-admin startproject myproject コマンドを実行して、Djangoプロジェクトを作成します。
   • cd myproject コマンドで、プロジェクトディレクトリに移動します。
   • python manage.py startapp myapp コマンドを実行して、Djangoアプリを作成します。

2. Reactアプリケーションの作成
   

   • npx create-react-app myreact コマンドを実行して、Reactアプリケーションを作成します。
   • cd myreact コマンドで、Reactアプリケーションディレクトリに移動します。

ステップ2：APIエンドポイントの作成

1. Django REST Frameworkのインストール
   

2. シリアライザーの作成
   

3. ビューの作成
   

4. URLルーティングの設定
   

5. プロジェクトのURLルーティングにmyappのURLルーティングを追加
   

   • myproject/urls.py ファイルを開き、myapp アプリのURLルーティングを urlpatterns リストに追加します。

ステップ3：ReactアプリケーションとDjango APIの接続

1. Axiosのインストール
   

2. ReactコンポーネントでAxiosを使用してAPIエンドポイントにアクセス
   

   • Reactコンポーネント内で、Axiosを使用してDjango APIエンドポイントにアクセスし、データを取得します。

3. 取得したデータをReactコンポーネントのUIに表示
   

ステップ4：デプロイ

1. Djangoアプリケーションをデプロイ
   

   • HerokuやAWSなどのプラットフォームにDjangoアプリケーションをデプロイします。

3. ビルドされたReactアプリケーションを静的ファイルホスティングサービスにデプロイ
   

   • S3やNetlifyなどの静的ファイルホスティングサービスにビルドされたReactアプリケーションをデプロイします。

• このチュートリアルは、あくまで基本的な手順を説明しています。実際のアプリケーション開発では、より多くの設定や機能が必要になる場合があります。

models.py

from django.db import models

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

serializers.py

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'completed']

views.py

from django.shortcuts import render
from .models import Task
from .serializers import TaskSerializer
from rest_framework import viewsets

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

urls.py

from django.urls import path, include
from .views import TaskViewSet

urlpatterns = [
    path('tasks/', TaskViewSet.as_view({'get': 'list', 'post': 'create'}), name='task-list'),
    path('tasks/<int:pk>/', TaskViewSet.as_view({'get': 'retrieve', 'put': 'update', 'delete': 'destroy'}), name='task-detail'),
]

React部分

App.js

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

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

  useEffect(() => {
    const fetchTasks = async () => {
      const response = await axios.get('http://localhost:8000/tasks/');
      setTasks(response.data);
    };

    fetchTasks();
  }, []);

  const addTask = async (title) => {
    const response = await axios.post('http://localhost:8000/tasks/', { title: title });
    setTasks([...tasks, response.data]);
  };

  const toggleTaskCompletion = async (id, completed) => {
    await axios.put(`http://localhost:8000/tasks/${id}/`, { completed: completed });
    setTasks(tasks.map((task) => task.id === id ? { ...task, completed: completed } : task));
  };

  const deleteTask = async (id) => {
    await axios.delete(`http://localhost:8000/tasks/${id}/`);
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div>
      <h1>Todo App</h1>
      <form onSubmit={(e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        if (title) {
          addTask(title);
          e.target.elements.title.value = '';
        }
      }}>
        <input type="text" name="title" placeholder="タスクを追加" />
        <button type="submit">追加</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <input type="checkbox" checked={task.completed} onChange={() => toggleTaskCompletion(task.id, !task.completed)} />
            {task.title}
            <button onClick={() => deleteTask(task.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

APIフレームワーク

認証・認可