【フロントエンド入門15】VueとDjango REST APIの連携|バックエンドとフロントエンドをつなぐ方法

現代のWebアプリケーション開発では、フロントエンドとバックエンドを分離し、効率的にデータをやり取りする構成が一般的です。フロントエンドにはVue.js、バックエンドにはDjango REST Frameworkを使用することで、強力で拡張性のあるWebアプリケーションを構築できます。本記事では、VueとDjango REST APIを連携する方法を、初心者向けにわかりやすく解説します。

Vue.jsとDjango REST APIを組み合わせる理由

フロントエンドとバックエンドの分離のメリット

  • 開発効率の向上:フロントエンドとバックエンドの開発を別々に進められるため、チーム開発が効率化します。
  • 再利用性の向上:バックエンドで提供するAPIは、モバイルアプリなど他のクライアントからも利用できます。
  • スケーラビリティ:バックエンドとフロントエンドを独立してスケールさせることができます。

Vue.jsとDjangoの強力な組み合わせ

  • Vue.js:軽量でリアクティブなUIを構築するためのフレームワーク。
  • Django REST Framework:簡単にRESTfulなAPIを構築するためのDjango用ライブラリ。

この組み合わせにより、データの取得や送信を効率的に行いながら、ユーザーに快適な体験を提供できます。

Django REST APIのセットアップ

1. Djangoプロジェクトの作成

まず、Djangoをインストールして新しいプロジェクトを作成します。

pip install django djangorestframework
django-admin startproject myapi
cd myapi

2. アプリケーションの作成

API用のアプリケーションを作成します。

python manage.py startapp api

3. モデルの定義

簡単なタスク管理APIを構築するため、Taskモデルを定義します。

api/models.py

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

4. シリアライザの作成

モデルをJSON形式に変換するためのシリアライザを作成します。

api/serializers.py

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'completed']

5. ビューセットとルーターの設定

Django REST Frameworkのビューセットを使用して、CRUD操作を実装します。

api/views.py

from rest_framework import viewsets
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

api/urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

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

6. 設定ファイルの更新とマイグレーション

myapi/settings.pyrest_frameworkapiアプリを追加し、データベースマイグレーションを実行します。

python manage.py makemigrations
python manage.py migrate

7. 開発サーバーの起動

python manage.py runserver

APIエンドポイントにアクセスして、正しく動作しているか確認しましょう。

http://127.0.0.1:8000/tasks/

Vue.jsでのフロントエンド開発

1. Vueプロジェクトの作成

Vue CLIを使って新しいプロジェクトを作成します。

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

2. Axiosのインストール

Django REST APIとの通信にはAxiosを使用します。

npm install axios

3. API通信の実装

タスク一覧を取得し、表示するコンポーネントを作成します。

src/components/TaskList.vue

<template>
  <div>
    <h1>タスク一覧</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }} - <span>{{ task.completed ? '完了' : '未完了' }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tasks: []
    };
  },
  created() {
    this.fetchTasks();
  },
  methods: {
    fetchTasks() {
      axios.get('http://127.0.0.1:8000/tasks/')
        .then(response => {
          this.tasks = response.data;
        })
        .catch(error => {
          console.error('APIエラー:', error);
        });
    }
  }
};
</script>

4. アプリの起動

npm run serve

ブラウザでhttp://localhost:8080にアクセスし、タスク一覧が表示されるか確認します。

タスクの追加機能を実装する

入力フォームの追加

タスクを新規追加するためのフォームを追加します。

src/components/TaskList.vue(更新版)

<template>
  <div>
    <h1>タスク一覧</h1>

    <form @submit.prevent="addTask">
      <input v-model="newTask" placeholder="新しいタスクを追加">
      <button type="submit">追加</button>
    </form>

    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }} - <span>{{ task.completed ? '完了' : '未完了' }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tasks: [],
      newTask: ''
    };
  },
  created() {
    this.fetchTasks();
  },
  methods: {
    fetchTasks() {
      axios.get('http://127.0.0.1:8000/tasks/')
        .then(response => {
          this.tasks = response.data;
        })
        .catch(error => {
          console.error('APIエラー:', error);
        });
    },
    addTask() {
      if (this.newTask.trim() === '') return;

      axios.post('http://127.0.0.1:8000/tasks/', { title: this.newTask, completed: false })
        .then(response => {
          this.tasks.push(response.data);
          this.newTask = '';
        })
        .catch(error => {
          console.error('APIエラー:', error);
        });
    }
  }
};
</script>

このフォームを使って新しいタスクを追加できるようになります。

結論

VueとDjango REST APIを連携させることで、効率的なデータの取得・送信が可能になり、スケーラブルなWebアプリケーションを構築できます。本記事で紹介した基本的な連携手法をマスターすれば、さらに複雑な機能を持つアプリケーションにも対応できるようになります。