はじめに

こんにちは。divxエンジニアの遠矢です。
私が開発に参画し始めた頃、どこから手を付ければ良いのか分からず悩むことが度々ありました。そんな時、先輩開発者からフロントエンドからバックエンドへのデータフローを教わりました。この流れを理解することで、開発プロジェクトがスムーズに進行しました。この背景から、実際に開発で使用したフロントエンド(jQuery)、バックエンド(Django)を例にして、データフローの流れや、DjangoのSerializerを使用してモデルを橋渡しする方法（Django REST framework）についても記述していきたいと思います。

基本的な概要

フロントエンドとバックエンドとは？　

まず、フロントエンドとバックエンドの基本的な概念と実装範囲について説明します。

フロントエンド（jQuery）:

ユーザーからの入力やアクションをトリガーとしてデータを収集します。
AJAXリクエストを使用して、バックエンド（Django）にデータを送信します。
実装範囲は、画面表示やその動作に関する役割です。

バックエンド（Django）:
受け取ったデータを処理し、必要に応じてデータベースとやり取りします。
処理結果やレスポンスデータを生成して、フロントエンドに戻します。
実装範囲は、データベースからどのような形式のデータを持ってくるのか、どのようにデータを取得するのかです。

Django REST frameworkとは？　

現在、このセクションではDjango REST frameworkのバージョン3.14.0に基づいて説明します。
Django REST framework（DRF）は、Djangoを利用して「RESTful」なAPIを効率的に実装できる強力なライブラリです。DRFを使用することで、柔軟で拡張性の高いAPIを構築ができます。

• RESTful APIの実装
  • DRFを使用することで、DjangoでRESTful APIを簡単に実装できます。RESTful APIは、クライアントとサーバー間のデータ通信を効率的に行う手法であり、HTTPメソッド（GET、POST、PUT、DELETEなど）を駆使したCRUD操作（作成、読み取り、更新、削除）が可能になります。
  • 例えば、APIエンドポイントを定義するビューセットを使用することで、プロジェクトの要件に合わせた柔軟なエンドポイントを簡単に作成できます。

• データのやり取りが簡単:

  • 複数のアプリケーション（例えば、フロントエンドフレームワークのVue.jsなど）間でのデータのやり取りが容易です。これにより、サーバーからクライアントへ必要なデータを簡単に提供できます。

• シリアライザの利用

  • DRFではシリアライザ（serializers.py）を使って、データの入出力を管理します。シリアライザは、データをPythonのオブジェクトとJSONなどの形式の間で変換する役割を果たします。特にModelSerializerを使用すると、モデルに基づいたシリアライザを自動的に生成でき、開発の生産性が向上します。

  • さらに、シリアライザはデータのバリデーションやネストされたデータ構造の扱いにも対応しているため、複雑なデータの取り扱いも簡単に行えます。

出典：Django REST framework

データフローまとめ

上記の基本的な概要を踏まえて、データフローの例を簡易的に説明します。

出典: Django REST Framework + Vue.js構築

1. フロントエンドからのリクエスト

   • フロントエンドがバックエンドにリクエストを送信します。

   • HTTPリクエスト（GET, POST, PUT, DELETEなど）を使用します。

2. urls.py

   • リクエストはurls.pyを使用して、適切なビュー関数にルーティングされます。

   • urls.pyファイルではURLパスとビュー関数やクラスを結びつけます。

3. views.py

   • views.pyはリクエストを処理し、必要に応じてmodels.pyの関数を呼び出し、データベースとやり取りを行います（データの取得・保存）。

4. models.py

   • データベースと通信して、必要なデータを取得または保存します。

5. serializers.py

   • データベースから取得したデータはserializers.pyに渡されます。

   • データはJSONフォーマットに変換され、レスポンスとして送信される準備が整います。

6. フロントエンドへのレスポンス

   • JSON形式のデータがバックエンドからフロントエンドに返され、フロントエンド側で表示されたり、さらに処理されたりします。

具体的なデータフロー

コードを交えて、具体的にデータフローを紹介します。

フロントエンド（jQuery）からのデータ送信

jQueryを使ってフォーム入力データを収集し、AJAXリクエストを送信する方法を説明します。

$.ajax({
  url: "{% url 'api_example' %}", // APIのエンドポイントURL
  type: 'POST', // HTTPメソッドをPOSTに指定
  dataType: 'json', // 期待するレスポンスデータ形式
  contentType: 'application/json', // 送信するデータ形式を指定
  data: JSON.stringify({ // 送信するデータ
    name: 'Tooya Divx',
    email: 'tooya@divx.com'
  })
});

1. url: APIのエンドポイントURLを指定します。
2. type: HTTPメソッド(GET、POST、PUT、DELETEなど)を指定します。（今回は'POST'を設定）

3. dataType: 期待するレスポンスデータの形式(json、xml、html、textなど)を指定します。(今回はjson)

4. contentType: 'application/json'を設定することで、送信データの形式をJSONと指定します。

5. dataオプションに送信するデータを設定します。オブジェクトをJSON形式の文字列に変換して渡します。

出典： 最新ガイド：jQueryでAJAXでGET/POST/PUT/DELETE送信を！

フロントエンドからリクエストがバックエンドに送られる

• フロントエンドからのリクエストは、Djangoのurls.pyで定義されたルーティングに基づいてバックエンドのviews.pyに送られます。
• urls.pyはリクエストとレスポンスを結びつけ、適切なビューを呼び出してリクエストを処理します。

#urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('api/example/', views.ApiExampleJson.as_view(),name='api_example'),
]

バックエンド（Django）の処理

• リクエストを受け取り、必要なデータを処理します。具体的には、リクエストから取得したデータをデータベースに保存するためにシリアライザを使用します。

• データをそのまま取得すると、オブジェクト形式で得られるため、フロントエンドに返す際には扱いにくい場合があります。そこで、シリアライザを使ってデータをJSON形式に変換します。

• Django REST Framework（DRF）では、ModelSerializerという便利なクラスが提供されており、モデルインスタンスのシリアライズ（オブジェクトをJSONなどの形式に変換するプロセス）とデシリアライズ（他の形式からオブジェクトに戻すプロセス）を簡単に行うことができます。

モデルを定義します：

#models.py
from django.db import models

class User(models.Model):
	name = models.CharField(max_length=100)
	email = models.EmailField()

シリアライザを定義します：

validate_emailメソッドを使用して、バリデーションを追加してます。
これにより、APIを通して不正なメールアドレスがデータベースに保存されるのを防ぐことができます。

出典：Django documentation

# serializers.py
from rest_framework import serializers
from .models import User
import re

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User  # シリアライザが対象とするモデル
        fields = ('name', 'email')  # シリアライズしたいフィールド
        
    def validate_email(self, value):
        # メールアドレスが正しい形式かどうかをチェック
        email_regex = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
        if not re.match(email_regex, value):
            raise serializers.ValidationError("Invalid email format.")
        return value

ビューを定義します：

# views.py
from rest_framework import status
from rest_framework.response import Response
from rest_framework.viewsets import ModelViewSet
from .models import User
from .serializers import UserSerializer

class ApiExampleJson(ModelViewSet):
    serializer_class = UserSerializer
    queryset = User.objects.all()  # モデル全体を取得するクエリセットを定義

    def create(self, request):
        serializer = self.get_serializer(data=request.data)  # リクエストデータをデシリアライズ
        if serializer.is_valid():  # バリデーションチェック
            serializer.save()  # データをデータベースに保存
            return Response(serializer.data, status=status.HTTP_201_CREATED)  # 保存したデータを返す
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)  # エラーがあれば返す

まとめ

この記事では、フロントエンドとバックエンド間のデータフローについて、特にjQueryを使用したフロントエンドとDjangoを利用したバックエンドの例を通じて説明しました。フロントエンドからバックエンドへデータを送信し、Djangoのシリアライザーを用いてモデルに保存、そしてレスポンスを返す一連の流れを理解していただければ幸いです。
フロントエンドとバックエンドがどのように連携し合うかを正しく理解することで、開発時にはどのデータが取得できているのか、どのデータをバックエンドに送信する必要があるのかを考えることができるようになります。この理解により、タスクの細分化が可能になり、結果として開発プロジェクトがよりスムーズに進行し、効率的に機能を実装できるようになったと感じています。
開発言語が変わっても、データの流れを把握することは非常に重要ですので、今後も理解を深めていく所存です。

お悩みご相談ください