【初めてのDjango】（発展編 #08）DeleteViewを用いてDBのレコード削除

2023年2月13日2023年2月14日

本記事では「初めてのDjango（発展編）」として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーションを作成しながら基本的な知識をご紹介していきます。

本シリーズの全容はこのようになっております。

今回の内容

・DeleteViewを使用して、データベースの１レコード分の情報を削除する

本記事単体でご覧になる方へ

本記事は連作となっており、こちら（GitHub）のコードの続きとしてご紹介させていただきます。本記事単体でもご覧いただけますが、もし上記のコードを引用して学びたい方は下記の流れに沿って準備を行なってください。

STEP

コードのダウンロード

こちらにアクセスしましょう。

「Download ZIP」をクリックし、コードをダウンロード。

STEP

settings.json

先ほどダウンロードしたファイル群を任意のディレクトリに配置します。

その後、プロジェクトのルートディレクトリ（manage.pyがあるとこ）に settings.json を新規作成し、下記の内容を記述してください。

{
    "SECRET_KEY":"<djangoのシークレットキー>",
    "EMAIL_HOST":"<Googleアカウントのメールアドレス>",
    "EMAIL_HOST_PASS":"<Googleのアプリパスワード>",
    "DB_USER": "<PostgreSQLのユーザー名>",
    "DB_PASSWORD": "<PostgreSQLのパスワード>"
}

STEP

データベース設定

下記の記事を参考にデータベースの設定を行います（既にお済みの方は不要です）。

何を実装するか

今回は DeleteView というビューを使用して、テーブルデータの１レコード分の情報を削除する方法をご紹介いたします。

実際の流れはこんな感じです。

このように、詳細ページにある「削除」ボタンを押して確認画面に遷移したあと、再度「削除」ボタンを押すと実際にメニューが削除され、メニュー一覧ページに戻ります。

それでは実際にこの機能を実装していきます。

メニュー削除機能を実装する

DeleteViewを使用してメニューを削除する機能を実装するために作成・編集するファイル群は下記の通りです。

ファイル名	役割
urls.py	ルーティング
views.py	DeleteViewを用いて１レコード情報を削除
menu_delete.html	メニューを削除するボタンを設置
menu_detail.html	メニュー削除ページへのリンクを設置

それでは１つずつ編集していきます。

ルーティングの設定

まずルーティング設定を行います。アプリケーション内の urls.py を下記のように編集します。

from django.urls import path
from . import views

app_name = 'cafe_app'
urlpatterns = [
    # ... 略 ...
    path('menu-detail/<int:pk>/', views.MenuDetailView.as_view(), name="menu_detail"), 
    path('menu-update/<int:pk>/', views.MenuUpdateView.as_view(), name="menu_update"), 
    path('menu-delete/<int:pk>/', views.MenuDeleteView.as_view(), name="menu_delete"), 
]

冒頭でも述べましたが、今回は１レコード分のみの情報を特定して削除する必要があります。したがって、URLに対象のレコードを特定できるような情報を含め、紐づける必要があります。

もう少し噛み砕いて話すと、「https://<ホスト名>/menu-delete」のみでは「どのレコード情報を削除したいの？？」となってしまいますので、「https://<ホスト名>/menu-delete/<int:pk>/」としてレコードを特定するような情報を含めています。

「pk」はDjangoでデフォルトでモデルの主キーを表しています。学校における出席番号のようなもので、あるデータベース（学校）内のテーブル（教室）から主キー（出席番号）を用いて１レコード（生徒）を特定することができるものです。

ビューの作成

１レコード分のデータを削除するために、データベース削除機能を行うDeleteViewを継承して新たにビューを作成していきます。アプリケーションディレクトリ内の views.py を下記のように編集しましょう。

from django.urls import reverse_lazy
from django.views import generic
from django.contrib import messages
from django.contrib.auth.mixins import LoginRequiredMixin

from .models import CafeMenu

# ... 略 ...

class MenuDeleteView(LoginRequiredMixin, generic.DeleteView):
    model = CafeMenu
    template_name = 'menu_delete.html'
    success_url = reverse_lazy('cafe_app:original_menu_list')

    def delete(self, request, *args, **kwargs):
        messages.success(self.request, 'メニューを削除しました')
        return super().delete(request, *args, **kwargs)

削除実行後のページ遷移先を、クラス変数である success_url をオーバーライドすることにより設定しています。

# 削除実行後、メニュー一覧ページに遷移
success_url = reverse_lazy('cafe_app:original_menu_list')

また削除が成功した時の処理をdelete()メソッド内に記述しています。messagesについてはこちらで解説しております。

これだけで削除を行ってくれます。

テンプレートの作成

先ほど作成した MenuDeleteView を用いてメニューの削除を行うテンプレートを作成します。

「cafe_app/templates/」ディレクトリに menu_delete.html を新規作成し、下記のように編集してください。

{% extends 'base.html' %}

{% load static %}

{% block title %}メニュー削除{% endblock title %}

{% block contents %}
<section class="sectionMenu">
    <div class="wrapperHeader">
        <h2>MENU DELETE</h2>
        <p class="notion">メニューを削除します。よろしいですか？</p>
    </div>
    <div class="wrapperMenu">
        <form method="post">
            {% csrf_token %}

            <div class="wrapperEditBtns">
                <a class="btn-cancel" href="{% url 'cafe_app:menu_detail' object.pk %}">キャンセル</a>
                <button class="btn-delete" type="submit">削 除</button>
            </div>
        </form>
    </div>
    <a class="backToHome" href="{% url 'cafe_app:index' %}">＜＜＜ホームに戻る</a>
</section>
{% endblock contents %}

キャンセルした場合の遷移先

メニューを削除したときの遷移先はviews.py内のクラス変数success_urlを用いて設定しましたが、「キャンセル」ボタンを押した時の遷移先はこのテンプレート内で設定してあげる必要があります。

<a class="btn-cancel" href="{% url 'cafe_app:menu_detail' object.pk %}">キャンセル</a>

このように<a>タグを使用しています。このように記述することで「~/menu-detail/<object.pk>/」というURLを生成してくれます。

すなわち、削除しようとしたメニューの詳細ページへのリンクを作成してくれます。

CSSの適用

見た目を整えるために、CSSを適用させましょう。

mystyle.css

.wrapperEditBtns a, .wrapperEditBtns button {
    padding: 10px 30px;
    font-size: 16px;
    margin: 0 5px;
    color: var(--dark-color);
    transition-duration: .2s;
}

.wrapperEditBtns a:hover, .wrapperEditBtns button:hover {
    cursor: pointer;
    opacity: .9;
    transform: translateY(-2px);
}

.btn-update, .btn-cancel {
    background-color: var(--accent-color);
    border: none;
}

.btn-delete {
    background-color: #e83745;
    border: none;
}

リンクを作成

メニュー削除ページは作成できたので、そのページへ移動するための「削除」ボタンを詳細ページに作成しましょう。メニュー詳細ページである menu_detail.html に次の１行を追加しましょう。

{% extends 'base.html' %}

{% load static %}

{% block title %}メニュー詳細{% endblock title %}

{% block contents %}
<section class="sectionMenu">
    <div class="wrapperHeader">
        <h2>MENU DETAIL</h2>
    </div>
    <div class="wrapperMenu">
        <ul class="ulMenu">
            <li class="menuContent">
                {% if object.photo %}
                    <img src="{{ object.photo.url }}" alt="{{ object.name }}">
                {% endif %}
                <h3>{{ object.name }}</h3>
                <p class="price">{{ object.price }}円</p>
                <p class="description">{{ object.description }}</p>
                <hr>
                <p class="created_at">作成日時：{{ object.created_at }}</p>
                <p class="updated_at">更新日時：{{ object.updated_at }}</p>
            </li>
        </ul>
        <div class="wrapperEditBtns">
            <a class="btn-update" href="{% url 'cafe_app:menu_update' object.pk %}">編 集</a>
            <a class="btn-delete" href="{% url 'cafe_app:menu_delete' object.pk %}">削 除</a>
        </div>
    </div>
    <a class="backToHome" href="{% url 'cafe_app:index' %}">＜＜＜ホームに戻る</a>
</section>
{% endblock contents %}

28行目を追加しました！

<a>タグをボタンのように見せてリンクを配置しました。