マイルストーン①達成 ― 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.title

categoryと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

の順番で確認したことで原因を発見できた。

データが存在しないものは表示できない。

当たり前のようでいて、実際の開発では非常に重要な考え方だと思う。

次にやること

次はマイルストーン②。

https://github.com/ki-hi-ro/react_todo#%E3%83%9E%E3%82%A4%E3%83%AB%E3%82%B9%E3%83%88%E3%83%BC%E3%83%B3%E7%99%BB%E9%8C%B2

目標は、

React画面からタスクを登録できるようにする

ことである。

• タスク登録フォーム
• POST API連携
• 登録後の自動再描画

を実装し、

Create（登録）機能を完成させていきたい。