Django REST Framework「実践入門」Part２

Posted at 2024-09-25

はじめに

今回は、Next.jsとDRFを用いて簡単なAPIを作成します。

DRFの基本的な使い方と、CORSについて説明します。

Next.jsについての説明は省きます。

制作物概要

イベントを追加できるカレンダーアプリを作ります。
カレンダーには、FullCalendarを使用します。

環境構築

DRFの準備

仮想環境に入る

$ python3 -m venv venv
$ source venv/bin/activate

必要なものをinstall

$ pip install django
$ pip install djangorestframework

プロジェクトとアプリケーションを作成

$ django-admin startproject config .
$ python3 manage.py startapp model # モデル用
$ python3 manage.py startapp api # Api用

初期設定

config/setting.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework', # 追加
    'api.apps.ApiConfig', # 追加
    'model.apps.ModelConfig', # 追加
]

LANGUAGE_CODE = 'ja' # 修正

TIME_ZONE = 'Asia/Tokyo' # 修正

Next.jsの準備

Next.jsの構築

$ npx create-next-app calendar
$ npm run dev　# サーバが立ち上がる

TypeScriptなどは追加していません
fullcalendar install

$ npm install --save \
  @fullcalendar/core \
  @fullcalendar/react \
  @fullcalendar/daygrid \
  @fullcalendar/interaction

fullcalendarの基本的なコード

これを参考にして下さい。

page.js

"use client"
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"

export default function Home() {
  const handleDateClick = (arg) => {
    alert(arg.dateStr)
  }
  return (
    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      locale={"ja"}
      weekends={false}
      events={[
        { title: 'event 1', date: '2019-04-01' },
        { title: 'event 2', date: '2019-04-02' }
      ]}
      dateClick={handleDateClick}
    />
  );
}

DRF

今回は使用するDRFの機能は、大きく４つに分けられます。

models.py （モデル）
serializer.py （シリアライザ）
views.py （ビュー）
urls.py （URL）

models.py　（モデル）

DRFには「ORM」という機能が備わっています。
「ORM」とはオブジェクトとリレーショナルデータベースをうまく対応付けてくれる機能です。
Djangoではmodel.pyにclassを作り、マイグレーションすることでデータベースが自動的に作成されます。
また、このおかげでSQL文を書く必要なく直感的な操作が可能となります。

model/models.py

import uuid
from django.db import models

class Event(models.Model):
    class Meta:
        db_table = 'event'
        
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    title = models.CharField(verbose_name='タイトル', max_length=20)
    date = models.DateField(verbose_name='開催日')
    created_at = models.DateField(verbose_name='投稿日', auto_now_add=True)
    
    def __str__(self):
        return self.title

マイグレーション

$ python3 manage.py makemigrations
$ python3 manage.py migrate

makemigrationで設計図を作成して
migrateで実際にテーブルを作成するイメージです
管理画面からモデルを登録しましょう

model/admin.py

from django.contrib import admin
from .models import Event

admin.site.register(Event)

これにより、管理者画面でモデルの管理ができます。

$ python3 manage.py createsuperuser

で管理者を作成してサーバを起動して(http://127.0.0.1:8000/admin/)にアクセスしましょう

モデル作成がうまくいったと分かりました。
実際に何個か適当なイベントを追加しておいてください。

serializer.py （シリアライザ）

次にシリアライザについて説明します。これはDRF固有のもので、JSON文字列と、オブジェクトの相互変換をしてくれる機能になります。
今回は、自動で変換やバリデーションを行ってくれるModelserializerについてのみ説明します。
詳しく知りたい場合は以下を参照。

api/serializer.py

from rest_framework import serializers
from model.models import Event

class EventSerializer(serializers.ModelSerializer):
    class Meta:
        model = Event
        fields = ['id', 'title', 'date']

このように、ModelSerializerではほとんどを自動で行ってくれます。

views.py （ビュー）

これも、Djangoとあまり機能は変わりません。

api/views.py

from rest_framework import viewsets

from model.models import Event
from .serializers import EventSerializer

class EventViewSet(viewsets.ModelViewSet):
    queryset = Event.objects.all()
    serializer_class = EventSerializer

ModelViewSetを使うと、Modelに関連したCRUDを自動で実装してくれます。

urls.py （URL）

これもDjangoとほとんど変わりません。

config/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/urls.py

from django.urls import path, include
from rest_framework import routers

from . import views

router = routers.DefaultRouter()
router.register('event', views.EventViewSet)

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

apiの確認

http://127.0.0.1:8000/api/event/
にアクセスするとapiを作成できたことが分かります。

これで、DRFの作成は終了です。

Next.js

コードのみで説明は省略します。

page.js

"use client"
import React, { useState, useEffect } from 'react'
import AddEvent from './components/addEvent'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"

export default function Home() {
  const [events, setEvents] = useState([])
  const [showForm, setShowForm] = useState(false)
  const [selectedDate, setSelectedDate] = useState(null)

  useEffect(() => {
    const fetchEvents = async () => {
      try {
        const response = await fetch("http://127.0.0.1:8000/api/event/")
        const json = await response.json()
        setEvents(json.map((item) => ({
          title: item.title,
          date: item.date,
        })))
      } catch (error) {
        alert('データが取得できませんでした')
      }
    }
    fetchEvents()
  }, [])

  const handleDateClick = (arg) => {
    setSelectedDate(arg.dateStr)
    setShowForm(true)
  }

  return (
    <div>
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin]}
        dateClick={handleDateClick}
        initialView="dayGridMonth"
        weekends={false}
        locale="ja"
        events={events}
      />
      {showForm && <AddEvent setShowForm={setShowForm} selectedDate={selectedDate} />}
    </div>
  )
}

components/addEvent.js

"use client"
import React, { useState, useEffect } from 'react'

export default function AddEvent({setShowForm, selectedDate}) {
    const [title, setTitle] = useState('')
    // const [user, setUser] = useState()
    const handleSubmit = async() => {
        try{
            const response = await fetch("http://127.0.0.1:8000/api/event/",{
                method: "POST",
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    title: title,
                    date: selectedDate,
                })
            })
            setShowForm(false)
        }catch{
            alert("登録し直してください")
        }
    }

    const handleCancelClick = () => {
        setShowForm(false)
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input value={title} onChange={(e) => {
                    setTitle(e.target.value)
                }} type="text" name="title" placeholder="イベント名" required />
                <button>イベント追加</button>
            </form>
            <button onClick={handleCancelClick}>キャンセル</button>
        </div>
    )
}

ここまでで、プログラムは完成です。実際にサーバーを起動して操作を実行してみてください。
コンソールにcorsエラーが出ると思います。

CORS(Cross-Origin Resource Sharing)

ブラウザにはサンドボックスという考え方があり、同一オリジンポリシーという制約があります。
この制約により、異なるオリジン（ホスト・スキーム・ポート番号）間からのアクセスが規制されます。
しかし、この制限を超えたデータのやり取りのニーズに対応するために「CORS」が策定されました。
「CORS」ではheaderに情報を追加したりなどの作業が必要となりますが、Djangoでは、django-cors-headersを使用すると簡単に実装できます。

$ pip install django-cors-headers

を実行してから
setting.pyに以下を追加してください