【Restful】Django+Reactビギナーが40分でCRUD掲示板アプリ(SPA)を作る方法【FetchAPI】

作成日時：2024年4月28日 08時46分
最終更新日時：2024年4月28日 08時46分
Categories：サーバーサイド
Tags： django react SPA Restful

本記事は、【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】のFetchAPI版である。

axiosを別途インストールせず、FetchAPIを使っている。

流れ

React、Djangoの各プロジェクトを作る
Djangoの必要なライブラリをインストール
Djangoのsettings.pyの編集
Djangoのmodels.pyの編集
Djangoのserializers.pyの編集
Djangoのviews.pyの編集
Djangoのurls.pyの編集
Reactの必要なライブラリをインストール
Reactのpackage.jsonの編集
Reactのindex.jsの編集
Reactのsrc/App.jsの編集
Reactのsrc/components/Modal.jsの編集
Reactのsrc/App.cssの編集
DjangoとReactの開発用サーバーをそれぞれ起動

React、Djangoの各プロジェクトを作る

mkdir django_react_todo
cd django_react_todo

mkdir backend

npx create-react-app frontend

Djangoの必要なライブラリをインストール

cd backend
virtualenv venv 

source ./venv/bin/activate 

pip install django djangorestframework django-cors-headers
django-admin startproject config .

Djangoのsettings.pyの編集

アプリを作る。

python3 manage.py startapp bbs

インストールする。

"""
Django settings for config project.

Generated by 'django-admin startproject' using Django 4.1.5.

For more information on this file, see
https://docs.djangoproject.com/en/4.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.1/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-8%$blv$7^^$pm(s#r(!tr94k9ch7p@wissbgbz!jep%@xlsced'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    "bbs.apps.BbsConfig",
    'corsheaders',
    'rest_framework',

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    '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',

    'corsheaders.middleware.CorsMiddleware',
]
CORS_ORIGIN_WHITELIST = [
     'http://localhost:3000'
]


ROOT_URLCONF = 'config.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'config.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Djangoのmodels.pyの編集

from django.db import models

class Topic(models.Model):

    comment     = models.CharField(verbose_name="コメント",max_length=2000)

マイグレーションしておく

python3 manage.py makemigrations 
python3 manage.py migrate

Djangoのserializers.pyの編集

from rest_framework import serializers
from .models import Topic

class TopicSerializer(serializers.ModelSerializer):
    class Meta:
        model = Topic
        fields = ("id","comment")

Djangoのviews.pyの編集

from django.shortcuts import render
from rest_framework import viewsets
from .serializers import TopicSerializer
from .models import Topic

class TopicView(viewsets.ModelViewSet):
    serializer_class    = TopicSerializer
    queryset            = Topic.objects.all()

Djangoのurls.pyの編集

"""config URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path,include


from rest_framework import routers
from bbs import views

router = routers.DefaultRouter()
router.register(r"topics", views.TopicView, "topic")

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

Reactの必要なライブラリをインストール

npm install bootstrap@5.2.3
npm install reactstrap@9.1.9

Reactのpackage.jsonの編集

proxyを追加する。

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Reactのindex.jsの編集

bootstrapを読み込むように編集する。

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.css'; // ←追加
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Reactのsrc/App.jsの編集

import React, { Component } from "react";

import Modal from "./components/Modal";
//import axios from "axios";

// リクエスト送信用のaxiosとモーダルをimport
class App extends Component {

    // Stateの設計からやり直す。
    constructor(props) {
        super(props);
        this.state = {
            topicList: [],
            modal: false,
            activeItem: {
                comment: "",
            },
        };
    }
    componentDidMount() {
        this.refreshList();
    }

    refreshList     = () => {

        const url       = "/api/topics/";
        const method    = "GET";
        const headers   = { "Content-Type": "application/json" };

        fetch(url, { method, headers })
        .then( (res) => {
            if (!res.ok) {
                throw new Error("Network response was not ok");
            }
            return res.json();
        })
        .then( (data) => {
            this.setState({ topicList: data })
        })
        .catch( (error) => {
            console.log(error);
        });

    };

    handleSubmit    = (item) => {
        const url       = item.id ? `/api/topics/${item.id}/` : "/api/topics/";
        const method    = item.id ? "PUT" : "POST";
        const headers   = { "Content-Type": "application/json" };
        const body      = JSON.stringify(item);

        fetch(url, { method, headers, body })
        .then( (res) => {
            if (!res.ok) {
                throw new Error("Network response was not ok");
            }
            return res.json();
        })
        .then( (data) => {
            this.refreshList();
        })
        .catch( (error) => {
            console.log(error);
        });

        this.closeModal();
    };

    handleDelete    = (item) => {

        const url       = `/api/topics/${item.id}/`;
        const method    = "DELETE";
        const headers   = { "Content-Type": "application/json", };

        fetch(url, { method, headers })
        .then( (res) => {
            if (!res.ok) {
                throw new Error("Network response was not ok");
            }

            // レスポンスのボディは空なので、.then( data => {} ) につなげる必要はない。
            this.refreshList();
        })
        .catch( (error) => {
            console.log(error);
        });

    };


    openModal       = (item) => {
        // 編集時はコメントをセット
        if (item.id){
            this.setState({ activeItem: item, modal: true });
        }
        else{
            this.setState({ activeItem: { comment:"" }, modal: true });
        }
    };

    closeModal      = () => {
        this.setState({ activeItem: { comment:"" }, modal: false });
    };


    // 改行をする
    linebreaksbr    = (string) => {

        // React.Fragment は <></> と同じであるが、今回はkeyを指定する必要があるため、React.Fragmentとする 
        return string.split('\n').map((item, index) => (
            <React.Fragment key={index}>
                {item}
                {index !== string.split('\n').length - 1 && <br />}
            </React.Fragment>
        )); 
    };

    renderItems     = () => {
        return this.state.topicList.map((item) => (
            <div className="border" key={ item.id }>
                <div>{ item.id }</div>
                <div>{ this.linebreaksbr(item.comment) }</div>
                <div className="text-end">
                    <input type="button" className="mx-1 btn btn-success" value="編集" onClick={ () => this.openModal(item) } />
                    <input type="button" className="mx-1 btn btn-danger" value="削除" onClick={ () => this.handleDelete(item) } />
                </div>
            </div>
        ));
    };
    render() {
        return (
            <>
                <h1 className="bg-primary text-white text-center">簡易掲示板</h1>
                <main className="container">

                    <input className="btn btn-primary" type="button" onClick={ () => this.openModal(this.state.activeItem) } value="新規作成" />
                    { this.state.modal ? ( <Modal activeItem    = { this.state.activeItem }
                                                  handleSubmit  = { this.handleSubmit }
                                                  closeModal    = { this.closeModal } /> ): null }
                    { this.renderItems() }

                </main>
            </>
        );
    };
}

export default App;

deleteメソッドで送信する際には、レスポンスは空になるため、中身を取り出さずにそのままrefreshList()を実行する。

Reactのsrc/components/Modal.jsの編集

import React, { Component } from "react";

export default class CustomModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeItem: this.props.activeItem,
        };
    }

    handleChange    = (e) => {
        let { name , value }    = e.target;
        const activeItem        = { ...this.state.activeItem, [name]: value };
        this.setState({ activeItem });
    }

    render() {
        const { handleSubmit, activeItem, closeModal } = this.props;

        return (
            <>
            <div className="modal_area" >
                <div className="modal_bg_area" onClick={closeModal}></div>
                <div className="modal_content_area">
                    <form>
                        
                        { activeItem.id ? ( <h2>編集</h2> ) : ( <h2>新規作成</h2> ) }
                        <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea>
                        <input className="btn btn-success" type="button" onClick={ () => handleSubmit(this.state.activeItem) } value="保存" />
                    </form>
                </div>
            </div>

            </>
        );
    }
}

Reactのsrc/App.cssの編集

/* モーダルダイアログの装飾 */
.modal_area{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
}

.modal_bg_area{
    position:absolute;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0, 0.5);
}
.modal_content_area{

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    background: bisque;
    padding:2rem;

    z-index:100;

    border-radius:1rem;
}

DjangoとReactの開発用サーバーをそれぞれ起動

python3 manage.py runserver

npm start

動かすとこうなる。

新規作成用のボタンを押して、モーダルダイアログが表示される。テキストに入力をして投稿する。

結論

ご覧の通り、fetchではインストールが不要になる反面、リクエスト処理のコードが長くなってしまう。

fetch(url, { method, headers, body })
.then( (res) => {
    if (!res.ok) {
        throw new Error("Network response was not ok");
    }
    return res.json();
})
.then( (data) => {
    this.refreshList();
})
.catch( (error) => {
    console.log(error);
});

axios
    .post("/api/topics/", item)
    .then((res) => {
        this.refreshList();
    })
    .catch((err) => console.log(err));

投稿処理(fetchは変数を使って編集も兼ねているが)ひとつを考えても、レスポンスを受け取ったときの挙動が少し煩雑になっている。

もっとも、fetchの場合は2つ目のthenを省略できるので、書き方によっては大差ない。

しかし、1つ目のthenで、ステータスコードが200番台以外のレスポンスも受け取ってしまう。これを防ぐために

    if (!res.ok) {
        throw new Error("Network response was not ok");
    }
    return res.json();

このようにifで分岐をしなければならない。(ステータスコードが200番台以外の場合は、res.okがfalseになる。)

一方、axiosの場合はステータスコードが200番台の場合のみ、1つ目のthenを通るようになっている。

    .then((res) => {
        // この処理が実行されている時点で、すべてステータスコードは200番台
        this.refreshList();
    })

故に、余計な分岐を用意する必要がなくなり、ネストが浅くなる。少なくともコードの視認性ではaxiosのほうが有利のようだ。

ソースコード

https://github.com/seiya0723/react-django-startup-bbs-fetchapi

シェアボタン

Twitter LINEで送る Facebook はてなブログ

自動化無しに生活無し