djangoで作るTodo管理アプリ入門⑦（ListView、DetailViewの使い方）

はじめに

前回は、djangoのアプリで扱うデータの定義する手順を整理しました。今回は、djangoのアプリでデータを参照する手順を整理しました。

最後まで読み進めることで、djangoのアプリでデータを参照する際に使用するListViewとDetailViewの使い方を確認することができます。

ListViewとDetailViewの基本

Webアプリケーションでデータベース内の情報を管理するための基本的な操作の概念として、CRUDと言う概念があります。CRUDのCはCreate（作成）、RはRead（読み取り）、UはUpdate（更新）、DはDelete（削除）です。これらの操作は、データベースとやり取りするための基本的なアクションを表しています。

C:Create（作成）
新しいデータをデータベースに追加します。Todoリストで言うと、新しいタスクの登録などが該当します。
R:Read（読み取り）
読み取り操作はデータベースからデータを検索して取得し、それをユーザーに表示するためのものです。登録したタスクの一覧や詳細の参照が挙げられます。この操作にはフィルタリングやソートなど、具体的な条件を指定して特定のデータを見つけるためのクエリが用いられます。
U:Update（更新）
既存データの内容を変更します。登録したタスクの更新が該当します。通常だと既存のデータを含んだフォームを表示し、変更を加えた上でそれを保存することでデータを更新します。
D:Delete（削除）
データベースから特定のデータを取り除く操作です。登録したタスクを削除することができます。

ListViewとDetailViewはCRUDのR(Read)で用いるViewです。
特定の条件に合ったレコードのリストを取得するか、あるいは特定のIDを持つレコードを取得して、リスト表示や個々のレコードの詳細表示を行います。

開発環境の構築

開発環境はVisual Studio Codeを使用します。djangoの実行環境はWindows上で動作させたUbuntuで実行します。WindowsにUbuntu環境を構築する手順は下記を参照してください。

djangoの入門①（djangoの基本と環境構築）

プロジェクトのディレクトリの作成からdjangoアプリの作成までを、下記のコマンドで行います。

$ sudo apt update
$ sudo apt upgrade
$ mkdir todo_tool
$ cd todo_tool
$ python3 -m venv venv
$ source venv/bin/activate
(venv)$ pip install django==4.2.6
(venv)$ django-admin startproject todo_project .
(venv)$ python manage.py startapp todolist
(venv)$ python manage.py startapp tododetail
(venv)$ python manage.py startapp common
(venv)$ mkdir templates

djangoのアプリは下記の3つ作成します。

todolist：登録したTodoの一覧を表示するためのアプリ
tododetail：登録した各Todoの詳細を表示するためのアプリ
common：複数の他のアプリケーション間で共有される機能やモデルを保持するアプリ

開発環境を構築するコマンドを実行すると、下記のファイルとディレクトリが作成されます。

(venv)$ ls -l
drwxr-xr-x 4 sakura sakura   4096 Dec 23 21:23 common
-rwxr-xr-x 1 sakura sakura    668 Dec 23 21:15 manage.py
drwxr-xr-x 2 sakura sakura   4096 Dec 23 22:01 templates
drwxr-xr-x 3 sakura sakura   4096 Dec 23 21:15 todo_project
drwxr-xr-x 4 sakura sakura   4096 Dec 23 21:58 tododetail
drwxr-xr-x 4 sakura sakura   4096 Dec 23 21:27 todolist
drwxr-xr-x 5 sakura sakura   4096 Dec 23 21:11 venv

Todo一覧を表示する際の動作フロー

Todoの一覧を表示するときの動作フローは下記となります。Todoの詳細を表示する際も同様の動作になります。

ユーザーがブラウザを通じて特定のURLにアクセスします。
Webサーバーが受け取ったHTTPリクエストをDjangoのルーティングシステム（urls.py）に渡します。
プロジェクトレベルのurls.pyがリクエストを適切なアプリケーション（この場合はtodolist）のurls.pyにルーティングします。
アプリケーションレベルのurls.pyはリクエストを関連するビュー（views.py）に渡します。
ビューは、必要に応じてデータベースからデータを取得するためのクエリをデータベースに送信します。
データベースからの情報と、テンプレートHTMLがビューによって組み合わせられます。
ビューは最終的なHTTPレスポンスを生成し、それをWebサーバーに返します。
WebサーバーはこのHTTPレスポンスをユーザーのブラウザに送信し、ユーザーは最終的なページを表示できます。

todo_project配下のファイル編集

todo_projectのsettings.pyを編集

プロジェクト(todo_todoprojectディレクトリ内)のsettings.pyに以下を追加してプロジェクトに「common,todolist,tododetail」アプリを追加したことを設定します。

settings.pyを編集し、33行目あたりにある「INSTALLED_APPS」の箇所に「’common’,’todolist’,’tododetail’」を追記します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'common',
    'todolist',
    'tododetail',
]

テンプレートhtmlを配置している場所について、BASE_DIRで設定します。

settings.pyを編集し、57行目あたりにある「TEMPLATES」の箇所の「’DIRS’」に「[BASE_DIR / ‘templates’]」を記載します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

todo_projectのurls.pyを編集

HTTPリクエストオブジェクトのURLパターンに応じたviewの設定を行います。

記載するURLパターンは下記です。

「http://127.0.0.1:8000/admin」であった場合、djangoの管理者ページを表示する
「http://127.0.0.1:8000/list/」であった場合、todolistのurls.pyにリクエストを投げる
「http://127.0.0.1:8000/detail/」であった場合、tododetailのurls.pyにリクエストを投げる

上記の内容をurls.pyに記載します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('list/', include('todolist.urls')),
    path('detail/', include('tododetail.urls'))
]

common配下のファイル編集

commonのmodels.pyを編集

commonアプリでは、複数の他のアプリケーション間で共有される機能やモデルを保持します。今回はモデルのみを保持します。

from django.db import models

class TodoModel(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()

    def __str__(self):
        return self.title

commonのadmin.pyを編集

管理者ページで管理するモデルを登録します。

from django.contrib import admin
from .models import TodoModel

admin.site.register(TodoModel)

todolist配下のファイル編集

todolistのurls.pyを編集

HTTPリクエストオブジェクトのURLパターンに応じたviewの設定を行います。

記載するURLパターンは下記です。

「http://127.0.0.1:8000/list/top/」であった場合、todolistの一覧を表示する

上記の内容をurls.pyに記載します。

from django.urls import path, include
from .views import TodoListTop

urlpatterns = [
    path('top/', TodoListTop.as_view())
]

todolistのviews.pyを編集

クラスベースビューを使用します。
commonアプリのTodoModelを一覧表示するためのビューを定義します。
TodoListTopクラスはListViewを継承しています。
TodoModelのオブジェクトリストをlist.htmlテンプレートに渡して表示するためのビューを作成しています。
クラス変数template_nameには、このビューで使用されるテンプレートの名前が指定しています。
modelには表示したいオブジェクトのリストを提供するモデルが指定されています。

from django.shortcuts import render
from django.views.generic import ListView
from common.models import TodoModel

class TodoListTop(ListView):
    template_name = 'list.html'
    model = TodoModel

tododetail配下のファイル編集

tododetailのurls.pyの編集

HTTPリクエストオブジェクトのURLパターンに応じたviewの設定を行います。

記載するURLパターンは下記です。

「http://127.0.0.1:8000/detail/(プライマリキー)/」であった場合、プライマリキーに該当するtodoの詳細を表示する。

上記の内容をurls.pyに記載します。

from django.urls import path, include
from .views import TodoDetail

urlpatterns = [
    path('<int:pk>/', TodoDetail.as_view())
]

「<int:pk>/」URLからキャプチャされた整数値をpkという名前のキーワード引数としてビューに渡すことを意味します。
通常、pk(プライマリキー)はデータベースのレコードを一意に識別するために使われます。
pk（プライマリキー）には、/1/や/2/の数字が入ります。
それぞれの数字はレコードのIDとして扱われます。

pk(プライマリキー)の確認方法は、後述する「Todoの登録」で説明します。

tododetailのviews.pyの編集

クラスベースビューを使用します。
commonアプリのTodoModelを一覧表示するためのビューを定義します。
TodoDetailクラスはListViewを継承しています。
TodoModelのオブジェクトリストをdetail.htmlテンプレートに渡して表示するためのビューを作成しています。
クラス変数template_nameには、このビューで使用されるテンプレートの名前が指定しています。
modelには表示したいオブジェクトのリストを提供するモデルが指定されています。

from django.shortcuts import render
from django.views.generic import DetailView
from common.models import TodoModel

class TodoDetail(DetailView):
    template_name = 'detail.html'
    model = TodoModel

templates配下のファイル編集

templatesのlist.htmlを編集

djangoテンプレート言語を使用し、object_listというコンテキスト変数に含まれる項目のリストをHTMLのリストとして表示します。

<ul>
{% for task in object_list %}
    <li>{{ task.title }}</li>
{% endfor %}
</ul>

{% for task in object_list %}は、object_listという変数からアイテムを1つずつ取り出し、それをtaskという名前の変数として利用できるようにするループを開始します。
object_listは、通常、ビューからテンプレートに渡されるクエリセット（モデルのインスタンスのリスト）です。
{{ itask.title }}は、現在のアイテム（task変数）のtitle属性の値を出力します。これにより、TodoModelのインスタンスのタイトルが各リストアイテムに表示されます。
{% endfor %}: forループの終わりを示します。

templatesのdetail.htmlの編集

djangoテンプレート言語を使用し、object_descriptionというコンテキスト変数に含まれる項目を表示します。

<p>{{ object.description }}</p>

{{ object.description }}: djangoのテンプレート変数の記法です。
objectという変数からdescription属性の値を取得して出力します。
objectはDetailViewによって自動的にコンテキストに追加されるオブジェクトです。
<p>…</p>: HTMLのパラグラフを定義するタグです。

データベースの作成

下記のコマンドを実行し、設定したモデルからデータベースを作成します。

(venv)$ python manage.py makemigrations common
(venv)$ python manage.py migrate

管理ユーザの作成

下記のコマンドを実行し、管理者ページにログインするユーザを作成します。

(venv) $ python manage.py createsuperuser
Username (leave blank to use 'sakura'): 
Email address: 
Password: 
Password (again): 
The password is too similar to the username.
This password is too short. It must contain at least 8 characters.
This password is too common.
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.

下記のコマンドでdjangoを起動します。