【Django】DetailViewの使い方【クラスベースビュー】

アイキャッチ画像
  • 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にある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 = FruitsModel

template_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画面①

すると、以下のように詳細ページが確認できます。
↓↓↓

DetailView画面②

以上DetailViewを使うと、データの詳細ページを作成することができます。

なお、テンプレートは見やすいようにHTML・CSSファイルを好きなようにアレンジしてみてください！

ListViewの使い方はこちら↓

関連記事
【Django】ListViewの使い方【クラスベースビュー】

DjangoにあるListViewの使い方とは？データの一覧ページを作るには？ 本記事ではこのような疑問を解決します。Djangoではビュー（views.py）を記述する際に、「汎用ビュー」と呼ばれるものがあらかじめ用意されています[…]

アイキャッチ画像

CreateViewの使い方はこちら↓

関連記事
【Django】CreateViewの使い方【クラスベースビュー】

DjangoにあるCreateViewの使い方とは？投稿画面のページを作るには？ 本記事ではこのような疑問を解決します。Djangoではビュー（views.py）を記述する際に、「汎用ビュー」と呼ばれるものがあらかじめ用意されていま[…]

アイキャッチ画像

LoginViewの使い方はこちら↓

関連記事
【Django】ログイン機能の実装方法【LoginView】

Djangoでログイン機能を実装するには？LoginViewの使い方とは？ 本記事ではこのような疑問を解決します。Django開発に限らずログイン機能はWebアプリケーションにおいて頻繁に実装される機能です。そんなログイン機能をDj[…]

アイキャッチ画像

LogoutViewの使い方はこちら↓

関連記事
【Django】ログアウト機能の実装方法【LogoutView】

Djangoでログアウト機能を実装するには？LogoutViewの使い方とは？ 本記事ではこのような疑問を解決します。Django開発に限らずログアウト機能はWebアプリケーションにおいて頻繁に実装される機能です。そんなログアウト機[…]

アイキャッチ画像

Djangoの最新記事8件