💨

# 2.1 Django 単体と API ドリブン構成の違い

に公開
Django
Vue.js
tech

業務システムを Django × Vue で構築する中で大きく変わったのは、Django を「API サーバ」として割り切った点。
これは拡張性や保守性の観点だけでなく、AI を活用してコードを生成してもらうときの相性にも影響する。

ここでは Django 単体で作った場合と、Django × Vue に分けた場合の違いを整理し、実際に AI に依頼する際のプロンプト例を交えて解説する。

Django 単体の場合（テンプレート直描画型）

Django 単体でよくある構成は、サーバサイドで HTML を生成して返す方式。

  • URL にアクセスすると Django の view が呼ばれる
  • view 内で DB からデータを取得
  • テンプレート（HTML）をレンダリングして返す
  • ユーザーはサーバ生成の HTML をそのままブラウザで見る
ブラウザ → Django View → DB
          ← HTML（テンプレートで生成）

特徴

  • シンプルで学習コストが低い
  • 小規模なアプリなら効率的
  • ただし画面遷移ごとにリロードが発生する
  • フロントとバックエンドの責務が曖昧になりやすい

AI プロンプト例（Django 単体）

Django で受注一覧画面を作りたいです。
Order モデルの一覧を表示するビューとテンプレートを生成してください。

AI の出力イメージ

# views.py
from django.shortcuts import render
from .models import Order

def order_list(request):
    orders = Order.objects.all()
    return render(request, "order_list.html", {"orders": orders})

<!-- templates/order_list.html -->
<h1>受注一覧</h1>
<ul>
  {% for order in orders %}
    <li>{{ order.id }} - {{ order.customer_name }}</li>
  {% endfor %}
</ul>

👉 この方式は動くが、フロントとロジックが混ざって出力されやすく、AI が生成したコードの責務分担も曖昧になりがち。
結果として、保守しづらいコードになるリスクが高い。

Django × Vue（API ドリブン構成）

今回の刷新では Django 側は REST API 提供に特化。
Vue 側は API からデータを取得して画面描画 を行う。

ブラウザ（Vue） → Django API → DB
                 ← JSON（データのみ）

特徴

  • Django は「データとルール」を管理
  • Vue は「画面と体験」を実装
  • ページ全体のリロードが不要（SPA）
  • モバイルや他システムからも API を再利用可能

AI プロンプト例（Django 側）

Django REST Framework を使って Order モデルの一覧を返す API を作ってください。
フィールドは id, customer_name, total_amount を返してください。

AI 出力イメージ

# serializers.py
from rest_framework import serializers
from .models import Order

class OrderSerializer(serializers.ModelSerializer):
    class Meta:
        model = Order
        fields = ["id", "customer_name", "total_amount"]

# views.py
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import Order
from .serializers import OrderSerializer

@api_view(["GET"])
def order_list_api(request):
    orders = Order.objects.all()
    serializer = OrderSerializer(orders, many=True)
    return Response(serializer.data)

AI プロンプト例（Vue 側）

Vue 3 + Axios で /api/orders/ にアクセスして受注一覧を表示するコンポーネントを作ってください。

AI 出力イメージ

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const orders = ref([]);

onMounted(async () => {
  const res = await axios.get("/api/orders/");
  orders.value = res.data;
});
</script>

<template>
  <h1>受注一覧</h1>
  <ul>
    <li v-for="order in orders" :key="order.id">
      {{ order.id }} - {{ order.customer_name }} (¥{{ order.total_amount }})
    </li>
  </ul>
</template>

👉 API ドリブン構成では、AI に Django 用と Vue 用を別々に依頼できるため、出力結果の責務が明確になる。
「バックエンドは JSON を返すところまで」「フロントは JSON を受け取って描画するところまで」と切り分けられるので、整合性チェックがしやすい。

違いのまとめ

観点 Django 単体（テンプレート描画） Django × Vue（API ドリブン）
データ形式 HTML JSON
描画処理 サーバサイド クライアント（Vue）
役割分担 画面とロジックが一体 バックエンド＝ロジック / フロント＝UI
画面遷移 ページごとにリロード SPA で高速に切り替え
AI プロンプト 画面＋ロジックが混ざる 役割ごとに分けて依頼できる
拡張性 Web アプリ前提 モバイル・外部連携にも対応可

まとめ

Django 単体での構成は「小規模・シンプル」に強いが、複雑な要件では破綻しやすい。
一方、業務システムのように 複雑で長期運用を前提とする場合 は、
バックエンドを API 専用にしてフロントと責務を分けることで、拡張性・保守性・生産性が向上する。

さらに AI 活用の観点では、
責務が明確に分かれる Django × Vue 構成の方が、AI が出力したコードを判別・修正しやすい。
結果として、AI を「正しく活かせる開発体制」を作れるのは API ドリブン構成である。

Discussion