現代の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.pyにrest_frameworkとapiアプリを追加し、データベースマイグレーションを実行します。
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アプリケーションを構築できます。本記事で紹介した基本的な連携手法をマスターすれば、さらに複雑な機能を持つアプリケーションにも対応できるようになります。
