はじめに
前回は、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アプリの作成までを、下記のコマンドで行います。
$ 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 templatesdjangoのアプリは下記の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 venvTodo一覧を表示する際の動作フロー
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.titlecommonの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 = TodoModeltododetail配下のファイル編集
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 = TodoModeltemplates配下のファイル編集
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を起動します。
(venv)$ python manage.py runserver
「http://127.0.0.1:8000/admin」にWebブラウザでアクセスしてください。
管理ページのログイン画面で作成した管理ユーザでログインできることを確認します。
Todoの登録
今回は、djangoの管理ページからTodoを登録する手順を記載します。
次回、CRUDのC:Createを用いてTodoを登録する方法を整理します。
本手順は、ファイルを一通り編集を終えたあとに実施してください。
管理ページにログイン
djangoを起動します。
(venv)$ python manage.py runserver- 「http://127.0.0.1:8000/admin」にWebブラウザでアクセスするとログイン画面が表示されます。
- createsuperuserで作成したアカウントで管理者ページにログインできます。
データの登録
確認用のデータを登録します。
- 「Todo list models」の「＋Add」をクリックします。
- 「Add todo list model」のページが表示されるので「Title」と「description」を入力して「SAVE」をクリックします。
- 下記のように表示されたらデータ登録は完了です。
pk(プライマリキー)の確認方法
追加したTodoのリンクをクリックすると、URLバーに表示された数値がプライマリキーです。
Todoのリストと詳細を表示
ファイルの編集と管理ページでTodoの登録を実施したあとに、Webブラウザで下記URLにアクセスすると、Todoのリストと詳細を表示することができます。
「http://127.0.0.1:8000/list/top」
「http://127.0.0.1:8000/detail/1/」
以上でListViewとDetailViewの整理は終了です。
コメント