前回の記事では、タスクを追加する方法について学びました。
「DjangoでTODOリストを作ろう!その1」では、Djangoを使ってTODOリストのアプリケーションを作成し、タスクを表示する方法を学びました。 [sitecard subtitle=関連記事 url=https://freem[…]
今回は、追加したタスクの内容を編集する方法について解説します。
この記事を読んで取り組むことで、以下を習得することができます。
- DjangoクラスベースビューのUpdateViewの概要と使い方
- フォームのプリポピュレーション
- テンプレート内での編集の実装
本記事では、クラスベースビューを用いて、タスクの更新処理をさっくりと実装していきます。
それでは、早速始めていきましょう。
DjangoでTODOリストを作ろう!その3:タスクを更新しよう
タスク更新用にurls.pyを作成する
今回もModelは更新しないので、urls.py→View→Templateの順で作成していきます。
それではタスク更新用のコードをurls.pyに追記していきましょう。
djangotodo/urls.pyに以下のように追記してください。
1 2 3 4 5 6 7 8 |
from django.urls import path from .views import TaskList, TaskCreate,TaskUpdate urlpatterns = [ path('', TaskList.as_view(), name='task_list'), path('create/', TaskCreate.as_view(), name='task_create'), path('<int:pk>/edit/', TaskUpdate.as_view(), name='task_edit'), #追加 ] |
これでdjangotodo/<番号>/edit/というURLにアクセスしたときに、TaskUpdateというビュークラスが起動するようになります。
この番号は更新用のデータを特定するための鍵として使われます。intは数字という意味、pkはプライマリキーの略です。
データベースのデータはこのPKでユニーク(同じPKの値は存在しない)になります。
つまり、更新したいタスクを特定するために、URLの末尾にそのタスクのPKを付け加えます。
名前はtask_ceditとなっています。次に、Viewsにタスク更新処理を入れていきましょう。
タスク更新処理を、Djangoのviews.pyに追記する
続いてタスク更新処理を実装します。クラスベースビューでさっくりと実装しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
from django.views.generic import ListView,UpdateView from django.urls import reverse_lazy from django.forms import DateInput #1.UpdateViewで作成 class TaskUpdate(UpdateView): model = Task fields = ['title', 'due_date'] template_name = 'task_edit.html' #2.成功時URLを指定 success_url = reverse_lazy('task_list') def get_form(self, form_class=None): form = super().get_form(form_class) #3.due_dateフィールドのウィジェットを上書き form.fields['due_date'].widget = DateInput(attrs={'type': 'date'}) return form |
以下詳細です。
TaskUpdateクラスを、クラスベースビューのUpdateViewを継承することで作成しています。
クラスベースビューはDjangoに用意された便利な機能で、少ない記述量で表示や更新などの処理ができます。
このTODOリストでは既にListViewを使用しています。これら以外にも追加用のCreateViewや詳細ページを表示するDetailView、削除用のDeleteViewがあります。
modelやfield、template_nameの解説はリスト表示のTaskListクラスにて説明した通りです。
新しく出てきたsuccess_urlは、更新に成功した場合に遷移するURLを指定しています。
ここでは「task_list」を指定して、更新後にタスク一覧ページに遷移するようにしています。
reverse_lazy関数は指定されたURLからビュー名を取得します。lazyの名の通り、この関数は遅延評価されるために無駄なリソースの消費を削減することができ、パフォーマンス向上に役立ちます。
また、これだけでは更新画面にて、期限日の入力フィールドがテキストボックスになってしまいます。
そのためformのwidgetを少し修正しています。
これで見かけがタスク追加のフォームと同じになります。
それでは、このViewに対応したテンプレートも作成していきましょう。
タスク更新のためのテンプレートを作成する
それでは最後にテンプレートを作成します。djangotodo/templatesフォルダの中に「task_edit.html」というファイルを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
{% extends 'base.html' %} {% block title %}Edit Task{% endblock %} {% block content %} <h1>タスク編集</h1> <form method="post"> {% csrf_token %} <table class="table"> <thead> <tr> <th>タスク</th> <th>期日</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>{{ form.title }}</td> <td>{{ form.due_date }}</td> <td><button type="submit" class="btn btn-primary">編集完了</button></td> </tr> </tbody> </table> </form> {% endblock %} |
また、このhtmlに移動するためのリンクをtask_list.htmlに追記します。現在「編集」ボタンは押しても何もないので、リンクを設定しましょう。
1 2 |
<a href="{% url 'task_edit' task.id %}" class="btn btn-secondary">編集</a> <!-- <button class="edit-task btn btn-secondary">編集</button> --> |
タスクが更新できるか確認しよう!
ページにアクセスして、編集ボタンを押してみてください。
以下のような画面が表示されます。
タスク名を「タスク更新」、期日を適当な日付に変更して「編集完了」ボタンを押してみてください。
以下のようにタスクが更新されればOKです。
おわりに
更新処理を実装しようと思うと、すでにあるデータを表示したり(プリポピュレーション)、データベースの更新など複雑です。
しかしクラスベースビューのUpdateViewを使うと上記のように簡単に更新処理が実装できます。
リストを表示するListViewのときも説明しましたが、クラスベースビューはDjangoに用意されたとても使いやすい機能です。覚えておくのをオススメします。
前回と同じく、ここまでのソースはGithubに掲載しておくので、もしも見返したい場合は確認してみてください。
さて、次回は次のステップとして「タスクの削除」を扱っていきましょう。
前回の記事では、タスクを編集する方法について学びました。 [sitecard subtitle=関連記事 url=https://freemas.stepupkaraoke.com/python/django/making-todol[…]