- DjangoにあるDetailViewの使い方とは？
- 詳細ページを作るには？
本記事ではこのような疑問を解決します。
Djangoではビュー（views.py）を記述する際に、「汎用ビュー」と呼ばれるものがあらかじめ用意されています。
汎用ビューとはクラスベースで作られた”キット”のようなものです。
汎用ビューは目的に応じていくつか用意されていますが、
今回はその汎用ビューの中から「DetailView」の使い方について解説していきます。
手順は簡単4ステップです！
DetailViewとは？
DetailViewとは単体のデータを扱う際に用いられるクラスベースビューです。
例えば、カフェ店のメニューページにおいて、コーヒーやカフェラテなどの価格やサイズを別ページで詳しく表示させたい時に使います。
スタバのドリンクメニューの個別ページをイメージするとわかりやすいでしょう。
DetailViewの使い方
最初にDetailViewの使い方について全体の流れを確認しましょう。
①URLの設定をする
②クラスベースビューで処理を記述する
③テンプレートを作成する
④詳細ボタンを作成する
※models.pyのマイグレートは完了済みであることが前提
なお、本記事では以下のモデル（models.py）を使用します。
from django.db import models
CATEGORY = (('北海道', '北海道'), ('東北', '東北'), ('関東', '関東'), ('中部', '中部'), ('近畿', '近畿'), ('中国', '中国'), ('四国', '四国'), ('九州', '九州'), ('沖縄', '沖縄'))
class FruitsModel(models.Model):
name = models.CharField(max_length=100)
producing_area = models.CharField(max_length=50, choices=CATEGORY)そして、DetailViewを使った詳細ページを作るにあたり、下の記事内で扱ったlist.htmlを一覧ページとして使用していきます。
DjangoにあるListViewの使い方とは？データの一覧ページを作るには？ 本記事ではこのような疑問を解決します。Djangoではビュー（views.py）を記述する際に、「汎用ビュー」と呼ばれるものがあらかじめ用意されています[…]
それでは具体的な手順を次から見ていきましょう。
①URLの設定をする
まずはurls.pyにてURLの設定を行います。
ここではurls.pyに以下のような記述をします。
from django.urls import path
from .views import FruitsListView, FruitsDetailView
urlpatterns = [
path('list/', FruitsListView.as_view(), name="list"),
path('detail/<int:pk>/', FruitsDetailView.as_view(), name="detail"),
]ちなみに<int:pk>とはプライマリーキーのことです。
Djangoではモデルテーブルにレコードが追加される時に、自動でレコードに対してプライマリーキー（pk）が付加されます。
つまり、プライマリーキーはデータを識別する番号のことで、
‘detail/<int:pk>/’は、そのpkを持つデータの詳細ページ（detail.html）のリンクを表しているということです。
②クラスベースビューで処理を記述する
次にviews.pyにてクラスベースビューで処理を記述していきます。
ここではviews.pyに以下のような記述をします。
from django.shortcuts import render
from .models import FruitsModel
from django.views.generic import ListView, DetailView
class FruitsListView(ListView):
template_name = 'list.html'
model = FruitsModel
class FruitsDetailView(DetailView):
template_name = 'detail.html'
model = FruitsModeltemplate_nameには表示するHTMLファイルを指定し、modelにはデータを作成するモデルテーブルを指定します。
③テンプレートを作成する
ここでは詳細ページのテンプレートを作成します。
ここではテンプレート（detail.html）に以下のような記述をします。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>{{ fruitsmodel.name }}</h2>
<p>{{ fruitsmodel.producing_area }}</p>
</body>
</html>{% %}はテンプレートタグと呼ばれ、{{ }}はテンプレート変数と呼ばれます。
{% %}には主にユーザー画面に表示させないPythonの処理を記述し、
{{ }}には主にユーザー画面に表示させるデータを記述します。
④詳細ボタンを作成する
最後に一覧ページ（list.html）の中に詳細ボタン（detail.htmlへ遷移）を作成します。
一覧ページ（list.html）に以下のような記述をします。
<!DOCTYPE html>
<html>
<head></head>
<body>
{% for item in object_list %}
<h2><a href="{% url 'detail' item.pk %}">{{ item.name }}</a></h2>
{% endfor %}
</body>
</html>今回の一覧ページ（list.html）ではFruitsModelのnameだけを表示させ、そのnameを詳細ボタンとします。
つまり、一覧ページ（list.html）ではフルーツ名だけ表示させ、フルーツ名をクリックすると、それぞれのフルールの詳細ページ（detail.html）を確認できるという仕組みになります。
最後にサーバーを起動して画面を確認してみよう！
これまでのステップが完了したら、runserverコマンドでサーバーを起動して画面を確認してみましょう。
※今回はCSSやJavaScriptでの装飾は考慮外のため、白黒テキストのみ
まず一覧ページ（list.html）にアクセスして、「りんご」ボタン（detail.htmlへ遷移）をクリックします。
↓↓↓
すると、以下のように詳細ページが確認できます。
↓↓↓
以上DetailViewを使うと、データの詳細ページを作成することができます。
なお、テンプレートは見やすいようにHTML・CSSファイルを好きなようにアレンジしてみてください！
ListViewの使い方はこちら↓
DjangoにあるListViewの使い方とは？データの一覧ページを作るには？ 本記事ではこのような疑問を解決します。Djangoではビュー（views.py）を記述する際に、「汎用ビュー」と呼ばれるものがあらかじめ用意されています[…]
CreateViewの使い方はこちら↓
DjangoにあるCreateViewの使い方とは？投稿画面のページを作るには？ 本記事ではこのような疑問を解決します。Djangoではビュー（views.py）を記述する際に、「汎用ビュー」と呼ばれるものがあらかじめ用意されていま[…]
LoginViewの使い方はこちら↓
Djangoでログイン機能を実装するには？LoginViewの使い方とは？ 本記事ではこのような疑問を解決します。Django開発に限らずログイン機能はWebアプリケーションにおいて頻繁に実装される機能です。そんなログイン機能をDj[…]
LogoutViewの使い方はこちら↓
Djangoでログアウト機能を実装するには？LogoutViewの使い方とは？ 本記事ではこのような疑問を解決します。Django開発に限らずログアウト機能はWebアプリケーションにおいて頻繁に実装される機能です。そんなログアウト機[…]
