Django REST framework(DRF) と React でTodoアプリ(SPA)を作る①

環境

• macOS Catalina 10.15.4
• Python 3.8.1
• Django 2.2
• Django REST framework 3.11.0
• node 12.16.3
• yarn 1.22.4

準備

まずはDjangoのプロジェクトやらアプリやらを作っていきます。任意のディレクトリ（僕はdrf-react-todoというディレクトリで作業していきます）に移動して以下のコマンドを実行します。

django-admin startproject todo_API
cd todo_API
django-admin startapp api

APIの作成

settings.py

settings.pyにアプリの追加を行っておきます。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework', #追加

    'api', #追加
]

これはどうでもいいですが日本語に設定しておきました。

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

models.py

モデルの作成をします。単純なTodoModelをmodels.pyに作っておきます。

class TodoModel(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

serializers.py

serializers.pyを新しくapiの中に作成しserializerを作ります。

from rest_framework import serializers
from .models import TodoModel

class TodoSerializer(serializers.ModelSerializer):
    created_at = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)
    updated_at = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)

    class Meta:
        model = TodoModel
        fields = ('id', 'title', 'content', 'created_at', 'updated_at')

views.py

次にviewを作っていきます。DRFのviewsetsを使うと簡単にviewを作ることができます。これで一覧取得、新規作成。それぞれのデータの詳細表示、更新、削除が行えます。

from rest_framework import viewsets

from .models import TodoModel
from .serializers import TodoSerializer


# Create your views here.

class TodoViewSet(viewsets.ModelViewSet):
    queryset = TodoModel.objects.all()
    serializer_class = TodoSerializer

urls.py

urls.pyを編集してpathとviewを対応させます。まずプロジェクトのtodo_API/urls.pyから編集します。

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

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

api/にリクエストが来た場合にはapiアプリの中のurls.pyの中にviewを探しにいきます。

次にapiアプリの中にurls.pyを新規作成して編集します。

from django.urls import path, include

from rest_framework import routers

from .views import TodoViewSet

router = routers.DefaultRouter()
router.register('todos', TodoViewSet)

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

今回はviewが１つしかないのであまり意味はありませんが、routerを使ってpathとviewを紐付けします。これでapi/todos/にリクエストが来たときにTodoViewSetで処理の内容を決めます。

CORS設定

reactアプリからAPIを叩けるように設定していきます。まず、terminal等で以下のコマンドを実行してください。

pip install django-cors-headers

コマンドを実行したらsettings.pyに少し追加の設定をします。追加しているのは3箇所です。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'corsheaders', #追加

    'api',
]

# 以下三行追加
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', #追加
    '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',
]

動作確認

動作確認をしてみます。

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

これでlocalhost:8000/api/todos/ にリクエストしてブラウザ上で確認できたらAPIの作成はひとまず完了です。

続き

Django REST framework(DRF) と React でTodoアプリ(SPA)を作る②

前回の記事に続いてReactでフロントエンドの実装を行います。準備前回に続いて今回はフロント側の実装をしていきます。前回作ったdrf-react-todoでreactアプリを作成します。npx ...

uha-blog.com

2020.06.14