DjangoとReactを使って簡単なアプリを作成する方法

15分で読めます - 2025年11月28日

hero section cover
目次
共有

バックエンドにDjango、フロントエンドにReactを使用して、フルスタックWebアプリケーションを構築する方法を、ステップバイステップのガイドに沿って学びましょう。

目次

DjangoとReactを使ってシンプルなアプリを作成する方法

堅牢なバックエンドと動的なフロントエンドを備えたWebアプリを作成したいとお考えですか？PythonフレームワークであるDjangoと、JavaScriptライブラリであるReactを組み合わせることで、これを実現できます。Djangoはデータベース管理やAPI作成といったバックエンドのタスクを処理し、Reactはレスポンシブでインタラクティブなユーザーインターフェースを構築します。

主な手順：

  1. 環境のセットアップ：
    • Django用にPython 3.xを、React用にNode.jsをインストールします。
    • 仮想環境を使用して、Pythonの依存関係を管理します。
    • 以下のコマンドでインストールが正常に行われたか確認します： python --version, node --version、および npm --version.
  2. プロジェクトの構成:
    • DjangoのバックエンドとReactのフロントエンド用に、それぞれ別のフォルダを作成します。
    • 以下のコマンドを使用して django-admin startproject を使用してバックエンドを設定し、 npx create-react-app フロントエンドの初期化に使用します。
  3. バックエンドの構築:
    • Djangoアプリを作成し、モデルを定義し、マイグレーションを生成します。
    • Django REST Framework を使用して API エンドポイントを構築します。
    • 設定を行い django-cors-headers フロントエンドとバックエンド間の通信を有効にする。
  4. フロントエンドの開発:
    • Reactコンポーネントを使用して、タスクやユーザーとのやり取りを管理します。
    • APIリクエスト用にAxiosをインストールし、Djangoエンドポイントと統合します。
    • CSS を使用してアプリをスタイリングし、すっきりとしたユーザーインターフェースを実現します。
  5. 接続とテスト：
    • Djangoを localhost:8000 でDjangoを、 localhost:3000.
    • Postmanなどのツール、またはブラウザ上で直接、APIエンドポイントをテストします。
    • 円滑な通信のために、CORS設定が適切であることを確認してください。

この構成により、バックエンドとフロントエンドを明確に分離したフルスタックアプリケーションを効率的に構築できます。以下の手順に従って、スケーラブルでインタラクティブなWebアプリを作成してください。

初心者向けDjangoとReactプロジェクト - フルスタック型ノートアプリを構築する

セットアップ要件とインストール

DjangoおよびReactアプリの構築を始める前に、必要なツールや依存関係を備えた開発環境をセットアップすることが不可欠です。この基盤を整えておくことで、作業を進めるにつれて、DjangoおよびReactのコンポーネントをスムーズに作成、統合、テストできるようになります。

システム要件とツール

開発を始めるには、開発マシンにDjango用のPython 3.xとReact用のNode.jsが必要です。具体的には、Django 5.0にはPython 3.xが必要であり、ReactはNode.jsバージョン12以降で動作します。

Pythonのインストール：Pythonは公式ウェブサイトから直接ダウンロードするか、お使いのシステムのパッケージマネージャーを使用してインストールできます。macOSユーザーの場合は、Homebrewを使用すると簡単にインストールできます。 brew install python。Windowsユーザーはpython.orgからインストーラーを入手し、LinuxユーザーはUbuntuでは apt install python3 といったコマンドでインストールできます。

Node.js と npm のセットアップ：Node.js には npm（Node Package Manager）が同梱されています。npm バージョン 6 以降が必要で、バージョン 7.5.4 が安定した選択肢です。nodejs.org から Node.js をダウンロードすると、npm が自動的に含まれます。

Pythonの仮想環境：仮想環境を使用することは、プロジェクト固有の依存関係を競合なく管理するための鍵となります。組み込みの venv モジュールや、 pipenv や virtualenvwrapper などのツールを使用できます。Windows をお使いの場合は、 virtualenvwrapper-win パッケージが同様の機能を提供します。

インストール状況を確認するには、ターミナルで以下のコマンドを実行してください：

python --version
node --version
npm --version

プロジェクト構造の作成

バックエンドとフロントエンドのコードを分離し、管理しやすくするためには、整理されたプロジェクト構造が不可欠です。まず、プロジェクトのメインディレクトリを作成します：

mkdir django-react-app
cd django-react-app

このディレクトリ内に、Djangoのバックエンド用とReactのフロントエンド用の2つのフォルダを作成します。このように分離することで、各部分を個別にメンテナンスおよびデプロイできるようになります。

プロジェクトディレクトリ内にPythonの仮想環境を設定します：

python -m venv venv

仮想環境を有効にします:

  • macOS/Linuxの場合： source venv/bin/activate
  • Windowsの場合： venv\Scripts\activate

この手順により、プロジェクトに必要なすべてのPython依存関係が隔離されます。

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

環境の準備が整ったので、Django と React の両方に必要なパッケージをインストールしましょう。

Django バックエンドパッケージ:仮想環境がアクティブな状態で、pip を使用して Django およびそのサポートライブラリをインストールします:

pip install django
pip install djangorestframework
pip install django-cors-headers
  • Djangoは、サーバーサイドのロジック、データベース管理、およびURLルーティングを処理します。
  • Django REST Framework は、RESTful API の構築プロセスを簡素化し、React フロントエンド向けのエンドポイントの作成を容易にします。
  • Django-cors-headers は、クロスオリジンリソース共有（CORS）を有効にします。これは、（ポート 3000 で実行されている）React フロントエンドと（ポート 8000 で実行されている）Django バックエンド間の通信に不可欠です。

Reactフロントエンドの設定：React環境を設定するには、 create-react-app ツールを使用します。このコマンドにより、Reactプロジェクトが初期化され、必要な依存関係がすべてインストールされます：

npx create-react-app frontend

これにより、 frontend ディレクトリ内に新しいReactプロジェクトが作成され、必須のパッケージ、開発ツール、ビルドスクリプトがすべて揃います。

追加のフロントエンドパッケージ：Reactプロジェクトの設定が完了したら、 frontend ディレクトリに移動し、Django API への HTTP リクエストを行うためのライブラリである Axios をインストールします：

cd frontend
npm install axios

これで、開発環境には Python 3.x、Django、Node.js、React、および必要なすべてのツールが完備されました。Python の仮想環境によりバックエンドの依存関係が隔離され、npm が JavaScript パッケージを個別に管理します。これで、フルスタックアプリケーションの構築を始める準備が整いました！

Django を使用したバックエンドの構築

データベースモデル、APIエンドポイント、およびReactフロントエンドとの連携機能を備えたDjangoバックエンドを設定します。

Djangoプロジェクトとアプリの作成

まず、設定、データベース構成、およびアプリ固有のオプションを含む Django プロジェクトを作成します。このプロジェクト内で、ユーザーデータやコンテンツの管理といった特定のタスクのために設計された Python パッケージである Django アプリを構築します。

プロジェクトのルートディレクトリ（仮想環境がセットアップされている場所）に移動し、Djangoプロジェクトを作成します：

django-admin startproject backend .

このコマンドを実行すると、現在のディレクトリに直接プロジェクトファイルが生成されるため、余分なフォルダを作成する必要がありません。次のような新しいファイルが作成されます。 manage.py （Django コマンドの実行用）や、 backend ディレクトリ（中には settings.py, urls.py, asgi.pyや wsgi.py.

次に、特定の機能を扱うアプリを作成します。例えば、タスク管理システムの場合：

python manage.py startapp tasks

これにより、 tasks ディレクトリが作成され、そこには models.py, views.py, admin.pyといった必須ファイルと、 migrations フォルダが作成されます。「django」や「test」といった組み込みの名前との命名衝突には注意してください。

プロジェクト設定の INSTALLED_APPS リストに追加して、アプリをプロジェクト設定に登録してください。 backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

モデルとシリアライザの設定

Django モデルを使用してデータ構造を定義します。たとえば、タスク管理アプリ用のシンプルな Task タスク管理アプリ用のモデルは、次のように追加できます。 tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

このモデルには、次のようなフィールドが含まれています。 CharField 短いテキスト用、 TextField 長いコンテンツ用のフィールド、 BooleanField 真偽値用のフィールド、および DateTimeField タイムスタンプ用などです。 Meta クラスは、デフォルトの並べ替え順序などのオプションを指定します。

マイグレーションを実行して、モデルをデータベースに適用します：

python manage.py makemigrations tasks
python manage.py migrate

モデルデータをJSONに変換するには、Django REST Frameworkのシリアライザを使用します。 tasks/serializers.pyで、 Task モデル用のシリアライザを定義します：

from rest_framework import serializers
from .models import Task

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

Django REST Frameworkは、 ModelSerializer は、モデルに基づいてフィールドやメソッドを自動的に生成します。フィールドを明示的に列挙することで、意図せず機密データを公開してしまうことを防げます。

APIエンドポイントの構築

Django REST Framework を使用すると、API の作成が簡単になります。標準的な CRUD 操作については、 ViewSets を使用し、ルーターと組み合わせて、すっきりとしたRESTfulな構造を実現します。

また tasks/views.py、APIビューを作成します：

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

この ModelViewSet は、タスクの一覧表示、作成、取得、更新、削除を自動的に処理します。

でURLルーティングを設定します tasks/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

これらのURLをメインの backend/urls.py ファイルに以下のURLを含めてください：

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

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

CORSヘッダーの設定

ポート 3000 で実行されている React フロントエンドが、ポート 8000 の Django バックエンドと通信できるようにするには、Cross-Origin Resource Sharing (CORS) を設定します。これを設定しないと、セキュリティ上の理由からブラウザはクロスオリジンリクエストをブロックします。

CORS設定を含めるために backend/settings.py を更新して、CORSの設定を追加してください：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

簡単なテストを行う場合は、 CORS_ALLOW_ALL_ORIGINS = Trueを使用できますが、許可されるオリジンを指定する方が安全です。

APIエンドポイントのテスト

Reactフロントエンドを統合する前に、APIエンドポイントが期待通りに動作することを確認するためにテストを行ってください。Django開発サーバーを起動します:

python manage.py runserver

API にアクセスするには http://127.0.0.1:8000/api/tasks/にアクセスします。ブラウズ可能なAPIを使用して、GETやPOSTリクエストなどの操作をテストします。

あるいは、cURL や Postman を使用してテストすることもできます：

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

自動テストを行う場合は、 tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

バックエンドの準備が整ったら、Reactフロントエンドに接続する準備が整いました。

React を使用したフロントエンドの構築

Djangoバックエンド向けの魅力的なインターフェースを作成するには、Reactを使用して、タスクの表示から新規タスクの追加に至るまで、ユーザーとのやり取りを管理します。

Reactプロジェクトの設定

まず、Create React App を使用して React フロントエンドを設定します。プロジェクトのルートディレクトリ（Django バックエンドが配置されている場所）に移動し、次のコマンドを実行します。

npx create-react-app frontend
cd frontend

このコマンドを実行すると、次のような必須ファイルを含むReactアプリがセットアップされます package.json, src/App.js、および public/index.htmlといった必須ファイルを含むReactアプリを設定します。また、バンドリング用のwebpack、JavaScriptコンパイル用のBabel、テスト用の開発サーバーなどのツールも含まれます。

次に、Django API への HTTP リクエストを処理するために Axios をインストールします:

npm install axios

Axiosは、JSONの解析を管理し、組み込みの fetch() 関数よりも優れたエラー処理を提供することで、API呼び出しを簡素化します。また、リクエストやレスポンスのインターセプターといった機能もサポートしています。

これでフォルダ構造は次のようになります：

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

すべてが正常に動作していることを確認するために、Reactの開発サーバーを起動します：

npm start

これにより、アプリが http://localhost:3000でアプリが起動し、Reactのデフォルトのウェルカムページが表示されます。開発中は、このサーバーを稼働させたままにしておいてください。変更を加えると自動的に再読み込みされます。

Reactコンポーネントの作成

Django APIから取得したタスクを表示する TaskList Django API から取得したタスクを表示するコンポーネントを作成しましょう。以下のコードを src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

次に、 TaskForm 新しいタスクを追加するためのコンポーネントを作成します。これを src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

基本的なスタイルを設定するために、 src/App.css ファイルを作成し、以下を追加します：

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

状態の管理とAPIとの統合

次のようなReactフック useState や useEffect を使用すると、ステートの管理やDjangoバックエンドとの連携が容易になります。API呼び出しを一元化するには、serviceファイルを作成します src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

最後に、すべてを src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

この設定により、Reactフロントエンドは、Djangoバックエンドとシームレスに通信しながら、インタラクティブなタスクを処理できるようになります。

background image
御社のサーバーが成長の妨げになっていませんか？

導入の遅さや帯域幅の制限にお困りではありませんか？FDC Serversは、即座に利用可能な専用電力、グローバルな展開、あらゆる規模に対応した柔軟なプランを提供します。アップグレードの準備はできていますか？

今すぐパフォーマンスを解き放つ

DjangoとReactの連携

バックエンドとフロントエンドの稼働が確認できたので、次のステップは両者の間で円滑な通信を確保することです。これには、APIエンドポイントの設定、リクエストの管理、および統合に伴う問題の解決が含まれます。

ReactでのAPI URLの設定

Reactアプリは、DjangoのAPIエンドポイントがどこにあるかを認識する必要があります。これを実現するには、 src/services/api.js ファイルを環境固有の設定で更新します：

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

本番環境では、Reactプロジェクトのルートディレクトリに .env ファイルをReactプロジェクトのルートディレクトリに追加し、以下の内容を記述します：

REACT_APP_API_URL=https://your-production-domain.com/api

この設定により、ローカルの開発環境であっても本番環境にデプロイした場合であっても、React アプリが Django バックエンドとシームレスに連携できるようになります。API エンドポイントの設定が完了すれば、バックエンドデータの取得や操作の準備が整います。

バックエンドからのデータ取得

APIの設定が完了したら、CRUD操作を実行してReactとDjango間のデータを管理できます。これらの操作を処理するために src/App.js を更新して、これらの操作を処理できるようにします：

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

このコードは、タスクの作成、更新、削除、およびエラー処理を処理します。UIは即座に更新され、スムーズなユーザー体験が実現されます。また、変更を元に戻すか、適切なメッセージを表示することで、エラーは適切に処理されます。

接続のテストとデバッグ

DjangoとReactを連携させる際の最も一般的な課題の一つは、CORS（Cross-Origin Resource Sharing）エラーへの対処です。これらは、セキュリティ上の理由からブラウザが異なるオリジン間のリクエストをブロックするために発生します。開発中、Reactは通常 localhost:3000で実行されるのに対し、Djangoは localhost:8000で動作するため、クロスオリジンの状況が生じます。

CORSの問題に対処するには、「CORSヘッダーの設定」セクションで説明されているように、Djangoの設定でCORSヘッダーが正しく設定されていることを確認してください。変更を行った後は、Djangoサーバーを再起動して設定を反映させてください。

以下に、よくあるAPIリクエストエラーとその解決策をいくつか紹介します：

  • HTTP 400 (Bad Request)：これは通常、リクエストのペイロードに必須のデータが欠落しているか、形式が不正であることを意味します。例えば、2023年11月、FintanMiはDjango REST FrameworkとReactのプロジェクトでコミュニティを作成する際、リクエストに owner リクエストにフィールドが欠落していたため、400エラーが発生しました。フロントエンドから、Djangoモデルで期待されるすべての必須フィールドが送信されていることを常に再確認してください。
  • HTTP 405 (Method Not Allowed): これは、APIエンドポイントが使用されているHTTPメソッドをサポートしていない場合に発生します。例えば、FintanMiでは投稿を削除しようとした際に405エラーが発生しましたが、Djangoビューを generics.RetrieveUpdateAPIView から generics.RetrieveUpdateDestroyAPIView に変更し、 DELETE requestsのサポートを含めるように更新することで解決されました。

アプリの実行とテスト

DjangoのバックエンドとReactのフロントエンドが接続されたので、両方の開発サーバーを起動し、アプリケーションをテストする段階です。これには、2つのサーバーを同時に実行し、すべてがスムーズに連携して動作することを確認することが含まれます。

開発サーバーの起動

Django-Reactアプリケーションを実行するには、各サーバー用に1つずつ、計2つのターミナルウィンドウが必要です。この構成により、バックエンドとフロントエンドはAPI呼び出しを通じて通信しつつ、独立して動作することが可能になります。

Djangoバックエンドサーバーの起動：

  1. 最初のターミナルウィンドウを開き、Djangoプロジェクトのルートディレクトリに移動します。

  2. Pythonの仮想環境を有効にします：

    source venv/bin/activate

  3. Django開発サーバーを起動します:

    python manage.py runserver

    サーバーは次のURLで利用可能になります http://127.0.0.1:8000/.

Reactフロントエンドサーバーの起動:

  1. 2つ目のターミナルウィンドウを開き、Reactプロジェクトのディレクトリに移動します:

    cd frontend

  2. React開発サーバーを起動します:

    npm start

    これにより、自動的にブラウザウィンドウが開き、 http://localhost:3000/.

両方のサーバーが起動したら、アプリケーションの機能テストを開始できます。

アプリケーションの全機能のテスト

サーバーが起動し、CORS および API エンドポイントが適切に設定されたら、フロントエンドとバックエンド間のデータフローを検証します。

バックエンド API の検証:

  • 次のURLにアクセスして、Django APIエンドポイントを直接テストしてください：

    http://localhost:8000/api/tasks

    これにより、Django REST Frameworkのブラウズ可能なAPIインターフェースが表示され、CREATEおよびREAD操作を実行できます。

  • Djangoの管理画面に以下からアクセスしてください：

    http://localhost:8000/admin

    スーパーユーザーの認証情報でログインし、タスクの作成、編集、削除を行ってください。また、以下のURLにアクセスして、UPDATEおよびDELETE操作をテストすることもできます:

    http://localhost:8000/api/tasks/{id}

フロントエンドとバックエンドの統合テスト:

  • Reactアプリを http://localhost:3000 でReactアプリを開き、Djangoバックエンドからのタスクが正しく読み込まれ、表示されることを確認してください。
  • Reactインターフェースを通じて各CRUD操作をテストします：
    • 新しいタスクを追加し、React UIとバックエンドの両方に表示されることを確認します。
    • 既存のタスクを編集し、変更が保存されることを確認します。
    • タスクを削除し、フロントエンドとデータベースの両方から削除されていることを確認してください。

アプリにフィルターやその他の機能が含まれている場合は、それらを徹底的にテストし、タスクが期待どおりに表示されることを確認してください。

よくある問題の解決

テスト中に問題が発生した場合は、以下の一般的な解決策を試してみてください。

API接続エラー：

  • 両方のサーバーがそれぞれのポートで実行されていることを確認してください。Djangoは http://localhost:8000 、Reactは http://localhost:3000.
  • ブラウザの開発者ツール（ネットワークタブ）を使用して、404や500などのHTTPステータスコードを確認してください。

  • Reactプロジェクトの proxy Reactプロジェクトの package.json ファイル内の設定を確認してください：

    "proxy": "http://localhost:8000"

    変更を行った場合は、Reactサーバーを再起動してください。

サーバーの起動に関する問題：

  • Django サーバーが起動しない場合は、マイグレーションが欠落していないか確認してください:

    python manage.py makemigrations
python manage.py migrate

  • Reactサーバーに関する問題の場合は、依存関係を再インストールしてみてください：

    npm install

データフローの問題:

  • ブラウザの開発者ツールを使用して、ネットワークリクエストやコンソールのエラーを確認してください。
  • React内で console.log() React では print Djangoのビューにデバッグステートメントを追加して、データフローを追跡してください。
  • React アプリ内の API URL が、末尾のスラッシュを含め、Django の URL パターンと完全に一致していることを再確認してください（例： /api/tasks/).

まとめと今後の手順

DjangoとReactを組み合わせたWebアプリを作成し、フルスタック開発の基礎をしっかりと学びました。このプロジェクトでは、バックエンドとフロントエンドの分離、CRUD操作の実行、CORS設定を用いたクロスオリジンリクエストの管理といった重要な概念が取り上げられています。 その過程で、Django REST Framework を使用して API を構築し、React のフックを状態管理に活用しました。これらのスキルにより、これら 2 つの強力なツールをスムーズに統合することが可能になります。

アプリを次のレベルへ

アプリの機能を拡張する余地はまだまだあります。例えば、Django REST Framework を使用して JWT 認証を追加し、ユーザーデータや API へのアクセスを保護することができます。これにより、ユーザー固有の機能やパーソナライズされた体験を提供できるようになります。

アプリにリアルタイムの更新が必要な場合は、Django Channels を使用して WebSocket サポートを有効にすることを検討してください。これは、ライブダッシュボード、チャットシステム、通知などの機能に最適であり、アプリをよりダイナミックでインタラクティブなプラットフォームに変えることができます。

アプリが成長するにつれて、高度なデータ可視化が重要になってきます。Reactのレンダリング機能と効率的なバックエンドのデータ取得を組み合わせることで、複雑なデータセットを効果的に処理・表示できるようになります。

本番環境への準備

アプリを本番環境に投入する準備をする際は、デプロイ、セキュリティ、パフォーマンスに重点を置いてください。現在の設定はローカル開発には最適ですが、本番環境では追加の手順が必要となります。これには、環境変数の設定、データベースの最適化、堅牢なエラー処理メカニズムの実装などが含まれます。

これらの改善は、API設計、コンポーネントベースのアーキテクチャ、フルスタック統合など、すでに身につけたスキルを基盤としています。これらの高度な技術を習得することで、エンタープライズレベルのプロジェクトに取り組むための十分な準備が整い、Web開発者としてさらなる成長を遂げることができるでしょう。

よくある質問

Webアプリケーションの構築において、バックエンドにDjango、フロントエンドにReactを使用することの利点は何ですか？

バックエンドにDjango、フロントエンドにReactを使用することは、最新のWebアプリケーション開発において強力な組み合わせとなります。Djangoは、バックエンド開発を効率化するツールが充実した堅牢なフレームワークを提供し、一方Reactは、動的でインタラクティブなユーザーインターフェースの構築に優れています。

この組み合わせにより、責任の明確な分離が促進され、コードベースを整理しやすく、将来的な拡張も容易になります。 Reactのコンポーネントベースの構造はUI要素の再利用を促進し、DjangoのREST FrameworkはAPI構築のプロセスを簡素化し、フロントエンドとバックエンド間の円滑な通信を保証します。これらを組み合わせることで、アプリケーション開発において、高速かつ効率的で、ユーザー中心のアプローチが可能になります。

ReactフロントエンドとDjangoバックエンドを接続する際、CORSの問題をどのように解決すればよいですか？

ReactフロントエンドとDjangoバックエンド間のCORS問題を解決するには、 django-cors-headers パッケージが便利な解決策となります。まず、pip を使用してインストールします。次に、 settings.py ファイルに 'corsheaders' を INSTALLED_APPS リストに追加します。その後、 'corsheaders.middleware.CorsMiddleware' を MIDDLEWARE リストの先頭にを含めることで、ミドルウェアが正しい順序で実行されるようにします。

開発中は、 CORS_ORIGIN_ALLOW_ALL = True を settings.pyに設定することで、処理を簡略化できます。これにより、どのオリジンからのリクエストも許可されます。ただし、本番環境では、 CORS_ALLOWED_ORIGINS 設定を使用して、特定の信頼できるドメインを定義する方がはるかに安全です。このアプローチにより、より厳格なセキュリティを維持できます。

この設定により、ReactアプリはCORSの要件に準拠したまま、Django APIとスムーズに連携できるようになります。

本番環境へのデプロイに向けて、Django アプリと React アプリをどのように準備すればよいですか？

Django および React アプリを本番環境に備えるには、まず安全な設定を行うために Django の設定を調整することから始めます。これには、 DEBUG を False に設定し、 ALLOWED_HOSTS を指定して、アプリにアクセスできるドメインを制御します。これらの変更は、本番環境においてアプリケーションを保護するために不可欠です。

次に、Djangoのバックエンドと静的ファイル用に信頼性の高いホスティングプラットフォームを選択します。インフラストラクチャが本番レベルのトラフィックや需要に対応できるよう構築されていることを確認してください。Reactのフロントエンドについては、適切なビルドツールを使用して、最適化された本番用ビルドを生成します。

Reactアプリの準備が整ったら、NginxなどのWebサーバーを設定し、ReactフロントエンドとDjangoバックエンドの両方を配信できるようにします。適切なサーバー設定を行うことで、アプリが効率的に動作し、ユーザーにシームレスな体験を提供できます。

本番公開前に、本番環境でアプリを徹底的にテストしてください。このステップにより、問題を特定・解決し、アプリがリリースされた後も確実に安定して動作するようになります。

ブログ

今週の特集

その他の記事
専用サーバーでOllama AIモデルをホストする方法
#AI

専用サーバーでOllama AIモデルをホストする方法

データセキュリティの維持、スケーラビリティの確保、およびパフォーマンスの向上を図るために、専用サーバー上でOllama AIモデルをホストする方法について学びましょう。

5分で読めます - 2025年9月8日

#server-performance#vps

VPS での Redis のインストールと使用方法

9分で読めます - 2026年1月7日

その他の記事
background image

ご質問またはカスタムソリューションが必要ですか？

icon

柔軟なオプション

icon

グローバル・リーチ

icon

即時展開

icon

柔軟なオプション

icon

グローバル・リーチ

icon

即時展開