DjangoとReactで顧客管理

最終更新： 04/03/2025

1 分の読み

わかりました。以下は、DjangoとReactを使用して顧客情報を管理するための完全かつ包括的なウェブアプリケーションの構築ガイドです。

DjangoとReactで顧客情報管理アプリを構築する方法

現代のウェブアプリケーション開発において、DjangoとReactは非常に人気のあるフレームワークです。Djangoはバックエンドのための強力なフレームワークで、Reactはフロントエンドのためのライブラリとして広く使用されています。このガイドでは、DjangoとReactを使用して、顧客情報を管理するためのウェブアプリケーションを構築する方法を説明します。

1. 開発環境のセットアップ

まず、DjangoとReactを使用するために、必要な開発環境を整えます。

必要なツール

Python（Django用）
Node.js（React用）
npm（Node.jsのパッケージ管理ツール）
PostgreSQL（または任意のデータベース）

1.1 PythonとDjangoのインストール

まずは、PythonとDjangoをインストールします。DjangoはPythonのパッケージマネージャであるpipを使用してインストールできます。

bash
# Pythonがインストールされていることを確認
python --version

# Djangoのインストール
pip install django

1.2 Reactのインストール

次に、Reactのセットアップを行います。Reactのプロジェクトを作成するには、create-react-appを使用します。

bash
# create-react-appのインストール
npm install -g create-react-app

# Reactアプリの作成
npx create-react-app client

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

次に、Djangoのプロジェクトを作成します。

bash
# 新しいDjangoプロジェクトの作成
django-admin startproject crm_project
cd crm_project

# Djangoアプリの作成（顧客管理アプリ）
python manage.py startapp customer_management

これで、Djangoプロジェクトとアプリが作成されました。

2.1 モデルの作成

顧客情報を保存するために、customer_managementアプリにモデルを作成します。models.pyファイルを以下のように編集します。

python
from django.db import models

class Customer(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)
    phone_number = models.CharField(max_length=15)
    address = models.TextField()

    def __str__(self):
        return f"{self.first_name} {self.last_name}"

2.2 マイグレーションの実行

モデルを作成した後、データベースに反映させるためにマイグレーションを実行します。

bash
# マイグレーションの作成
python manage.py makemigrations

# マイグレーションの適用
python manage.py migrate

2.3 管理画面の設定

Djangoの管理画面で顧客情報を簡単に操作できるようにするために、admin.pyファイルを編集します。

python
from django.contrib import admin
from .models import Customer

admin.site.register(Customer)

これで、Djangoの管理画面で顧客情報を確認・編集できるようになります。

3. Django REST Frameworkの導入

ReactとDjangoの間でデータをやり取りするためには、Django REST Frameworkを使ってAPIを構築します。まず、djangorestframeworkをインストールします。

bash
pip install djangorestframework

次に、settings.pyのINSTALLED_APPSに追加します。

python
INSTALLED_APPS = [
    # 他のアプリ
    'rest_framework',
    'customer_management',
]

3.1 シリアライザーの作成

DjangoのモデルからデータをJSON形式で返すために、シリアライザーを作成します。serializers.pyファイルを作成し、以下の内容を追加します。

python
from rest_framework import serializers
from .models import Customer

class CustomerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Customer
        fields = '__all__'

3.2 ビューの作成

顧客データを返すAPIのビューを作成します。views.pyファイルを以下のように編集します。

python
from rest_framework import viewsets
from .models import Customer
from .serializers import CustomerSerializer

class CustomerViewSet(viewsets.ModelViewSet):
    queryset = Customer.objects.all()
    serializer_class = CustomerSerializer

3.3 URLの設定

次に、作成したビューにアクセスするためのURLを設定します。urls.pyファイルを以下のように編集します。

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

router = DefaultRouter()
router.register(r'customers', CustomerViewSet)

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

4. Reactフロントエンドの作成

ReactアプリケーションでDjango APIから顧客情報を表示するために、clientディレクトリ内で作業を行います。

4.1 Axiosのインストール

DjangoのAPIと通信するために、axiosをインストールします。

bash
# axiosのインストール
npm install axios

4.2 顧客情報の取得と表示

Reactコンポーネントを作成し、Djangoから顧客情報を取得して表示します。src/App.jsを以下のように編集します。

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

function App() {
  const [customers, setCustomers] = useState([]);

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

  return (
    <div>
      <h1>顧客情報h1>
      <ul>
        {customers.map(customer => (
          <li key={customer.id}>
            {customer.first_name} {customer.last_name} - {customer.email}
          li>
        ))}
      ul>
    div>
  );
}

export default App;

4.3 CORS設定

DjangoとReactは異なるポートで動作するため、CORS（クロスオリジンリソース共有）の設定が必要です。django-cors-headersをインストールして設定します。

bash
pip install django-cors-headers

settings.pyに次のように追加します。

python
INSTALLED_APPS = [
    # 他のアプリ
    'corsheaders',
    'rest_framework',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # 他のミドルウェア
]

CORS_ALLOW_ALL_ORIGINS = True

5. アプリケーションの起動

すべてが設定されたら、Djangoサーバーを起動して、Reactのフロントエンドをビルドして実行します。

5.1 Djangoサーバーの起動

bash
python manage.py runserver

5.2 Reactサーバーの起動

bash
cd client
npm start

これで、http://localhost:3000でReactアプリケーションが動作し、DjangoのAPIから顧客情報が表示されるはずです。

結論

このガイドでは、DjangoとReactを使用して顧客情報管理アプリを構築する方法を説明しました。バックエンドにはDjango、フロントエンドにはReactを使用し、Django REST Frameworkを使ってAPIを作成し、ReactからそのAPIを呼び出してデータを表示しました。これにより、顧客情報を管理するシンプルで効率的なウェブアプリケーションを作成できました。

最終更新： 04/03/2025

1 分の読み

DjangoとReactで顧客情報管理アプリを構築する方法

1. 開発環境のセットアップ

必要なツール

1.1 PythonとDjangoのインストール

1.2 Reactのインストール

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

2.1 モデルの作成

2.2 マイグレーションの実行

2.3 管理画面の設定

3. Django REST Frameworkの導入

3.1 シリアライザーの作成

3.2 ビューの作成

3.3 URLの設定

4. Reactフロントエンドの作成

4.1 Axiosのインストール

4.2 顧客情報の取得と表示

4.3 CORS設定

5. アプリケーションの起動

5.1 Djangoサーバーの起動

5.2 Reactサーバーの起動

結論

次を読む

Laravel マイグレーション完全ガイド

Node.js と Express でブログ作成

HTMLをWordPressテーマに変換

JavaScriptコード設計の基本

Expressでユーザー管理システム

Express ルーティングの基本

Expressでのセッション管理

Node.js アプリのデプロイガイド

Expressで実装するコメント機能

Express入門ガイド

子どもの育成と環境

妊娠中に避けるべき食品