DjangoでTODOリストを作ろう!その3:タスクを更新しよう

前回の記事では、タスクを追加する方法について学びました。

関連記事

「DjangoでTODOリストを作ろう!その1」では、Djangoを使ってTODOリストのアプリケーションを作成し、タスクを表示する方法を学びました。 [sitecard subtitle=関連記事 url=https://freem[…]

IMG

今回は、追加したタスクの内容を編集する方法について解説します。
この記事を読んで取り組むことで、以下を習得することができます。

  • DjangoクラスベースビューのUpdateViewの概要と使い方
  • フォームのプリポピュレーション
  • テンプレート内での編集の実装

本記事では、クラスベースビューを用いて、タスクの更新処理をさっくりと実装していきます。
それでは、早速始めていきましょう。

DjangoでTODOリストを作ろう!その3:タスクを更新しよう

タスク更新用にurls.pyを作成する

今回もModelは更新しないので、urls.py→View→Templateの順で作成していきます。

それではタスク更新用のコードをurls.pyに追記していきましょう。
djangotodo/urls.pyに以下のように追記してください。

これでdjangotodo/<番号>/edit/というURLにアクセスしたときに、TaskUpdateというビュークラスが起動するようになります。

この番号は更新用のデータを特定するための鍵として使われます。intは数字という意味、pkはプライマリキーの略です。
データベースのデータはこのPKでユニーク(同じPKの値は存在しない)になります。

つまり、更新したいタスクを特定するために、URLの末尾にそのタスクのPKを付け加えます。

名前はtask_ceditとなっています。次に、Viewsにタスク更新処理を入れていきましょう。

タスク更新処理を、Djangoのviews.pyに追記する

続いてタスク更新処理を実装します。クラスベースビューでさっくりと実装しましょう。

以下詳細です。

1.UpdateViewで作成

TaskUpdateクラスを、クラスベースビューのUpdateViewを継承することで作成しています。
クラスベースビューはDjangoに用意された便利な機能で、少ない記述量で表示や更新などの処理ができます。

このTODOリストでは既にListViewを使用しています。これら以外にも追加用のCreateViewや詳細ページを表示するDetailView、削除用のDeleteViewがあります。

2.成功時URLを指定

modelやfield、template_nameの解説はリスト表示のTaskListクラスにて説明した通りです。

新しく出てきたsuccess_urlは、更新に成功した場合に遷移するURLを指定しています。
ここでは「task_list」を指定して、更新後にタスク一覧ページに遷移するようにしています。

reverse_lazy関数は指定されたURLからビュー名を取得します。lazyの名の通り、この関数は遅延評価されるために無駄なリソースの消費を削減することができ、パフォーマンス向上に役立ちます。

また、これだけでは更新画面にて、期限日の入力フィールドがテキストボックスになってしまいます。
そのためformのwidgetを少し修正しています。

3.due_dateフィールドのウィジェットを上書き
widgetは入力フィールドを制御します。ここでは期限日のフィールドをDateInput、つまり日付入力フィールドにしています。
attrs={‘type’: ‘date’}でカレンダー機能を持った入力フィールドが出来上がります。
これで見かけがタスク追加のフォームと同じになります。

それでは、このViewに対応したテンプレートも作成していきましょう。

タスク更新のためのテンプレートを作成する

それでは最後にテンプレートを作成します。djangotodo/templatesフォルダの中に「task_edit.html」というファイルを作成しましょう。

task_edit.html
ファイルの中身はこれまで説明した内容で作成できる、シンプルなものです。

また、このhtmlに移動するためのリンクをtask_list.htmlに追記します。現在「編集」ボタンは押しても何もないので、リンクを設定しましょう。

task_list.html
それでは、開発環境を起動して更新ができるかどうか確認してみましょう。

タスクが更新できるか確認しよう!

ページにアクセスして、編集ボタンを押してみてください。
以下のような画面が表示されます。

タスク名を「タスク更新」、期日を適当な日付に変更して「編集完了」ボタンを押してみてください。
以下のようにタスクが更新されればOKです。

おわりに

更新処理を実装しようと思うと、すでにあるデータを表示したり(プリポピュレーション)、データベースの更新など複雑です。

しかしクラスベースビューのUpdateViewを使うと上記のように簡単に更新処理が実装できます。

リストを表示するListViewのときも説明しましたが、クラスベースビューはDjangoに用意されたとても使いやすい機能です。覚えておくのをオススメします。

前回と同じく、ここまでのソースはGithubに掲載しておくので、もしも見返したい場合は確認してみてください。

Githubリンク(TODOリストータスク更新)

さて、次回は次のステップとして「タスクの削除」を扱っていきましょう。

関連記事

前回の記事では、タスクを編集する方法について学びました。 [sitecard subtitle=関連記事 url=https://freemas.stepupkaraoke.com/python/django/making-todol[…]

IMG