マイルストーン①達成 ― Django REST FrameworkのデータをReactへ表示する
はじめに
https://github.com/ki-hi-ro/react_todo#%E9%96%8B%E7%99%BA%E7%8A%B6%E6%B3%81
人生を経営するための行動管理システムの開発を進めている。
今回のマイルストーン①の目標は、
Django REST FrameworkのAPIからタスクを取得し、React画面へ表示する
ことである。
表示項目は以下。
- タスク名
- カテゴリ
- 完了状態
- 期限
最終的にReact画面へ表示することを目標に進めた。
マイルストーン①
まずは現在地を確認した。
React画面にはタスク一覧が表示されている。
しかし表示されているのはタスク名のみ。
READMEで定義したマイルストーン①では、
- カテゴリ
- 完了状態
- 期限
も表示する必要がある。
そこで、Django側から順番に確認していくことにした。
Taskモデルを確認する
まずはTaskモデルを確認した。
https://github.com/ki-hi-ro/django_todo/blob/main/myapp/models.py
from django.db import models
# Create your models here.
class Task(models.Model):
title = models.CharField(max_length=100)
description = models.TextField(blank=True)
completed = models.BooleanField(default=False)
def __str__(self):
return self.titlecategoryとdeadlineが存在していなかった。
categoryとdeadlineを追加する
Taskモデルへ以下の項目を追加した。
category = models.CharField(max_length=50, blank=True)
deadline = models.DateField(
null=True,
blank=True
)その後、
python manage.py makemigrations
python manage.py migrateを実行した。
無事マイグレーション完了。
https://github.com/ki-hi-ro/django_todo/commit/f6771d33927c5527df0a40d1f9424ba1e5be85d7
Serializerを確認する
続いてSerializerを確認。
https://github.com/ki-hi-ro/django_todo/blob/main/myapp/serializers.py
fields=’all‘となっていたため、
from rest_framework import serializers
from .models import Task
class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = '__all__'追加したcategoryとdeadlineも自動的にAPIへ含まれることが分かった。
修正は不要だった。
APIを確認する
ブラウザでAPIを確認した。
すると、
{
"id": 1,
"title": "Django REST API作成",
"description": "最初のタスク",
"category": "",
"completed": false,
"deadline": null
}のように、
- category
- completed
- deadline
が返ってきていることを確認できた。
つまり、
Django側は完成している。
残る作業はReact側のみとなった。
React側の型定義を修正する
TaskList.tsxを確認した。
import { useState, useEffect } from "react";
import axios from "axios";
const API_URL = "http://127.0.0.1:8000/api/tasks/";
interface Task {
id: number;
title: string;
}
const TaskList: React.FC = () => {
const [tasks, setTasks] = useState<Task[]>([]);
useEffect(() => {
axios.get<Task[]>(API_URL)
.then(response => setTasks(response.data))
.catch(error => console.error("Error fetching tasks:", error));
}, []);
return (
<div>
<h2>タスク一覧</h2>
<ul>
{tasks.map(task => (
<li key={task.id}>{task.title}</li>
))}
</ul>
</div>
);
};
export default TaskList;さらにcategoryとcompletedとdeadlineを画面へ表示するコードを追加した。
https://github.com/ki-hi-ro/react_todo/blob/master/src/components/TaskList.tsx
問題があった。
APIはcategoryやdeadlineを返しているが、
TypeScriptの型定義が古いままだった。
interface Task {
id: number;
title: string;
}そこで以下のように修正した。
interface Task {
id: number;
title: string;
description: string;
category: string;
completed: boolean;
deadline: string | null;
}
https://github.com/ki-hi-ro/react_todo/commit/31de0e2e5400544ab367716d51d17c7b6bf44fe2
React画面へ表示
最終的に、
- タスク名
- カテゴリ
- 完了状態
- 期限
が表示されるようになった。
これでマイルストーン①の完了条件である
React画面に初期データが表示されること
を達成した。
今回学んだこと
今回学んだことは、
「表示できない原因はフロントエンドにあるとは限らない」
ということである。
今回の流れは、
React
↓
API
↓
Serializer
↓
Modelではなく、
Model
↓
Serializer
↓
API
↓
Reactの順番で確認したことで原因を発見できた。
データが存在しないものは表示できない。
当たり前のようでいて、実際の開発では非常に重要な考え方だと思う。
次にやること
次はマイルストーン②。
目標は、
React画面からタスクを登録できるようにする
ことである。
- タスク登録フォーム
- POST API連携
- 登録後の自動再描画
を実装し、
Create（登録）機能を完成させていきたい。
コメントを残す