1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. 【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~
【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~

【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~

【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~

前回は、ListView と DetailView を利用して、日記の一覧画面と詳細画面を作成しました。

今回は、投稿した日記を編集する画面と、日記の削除を実行する画面を作りましょう!

上記機能の作成を通して、以下の内容を新しく学んでいきます。

  1. UpdateView を用いた編集画面の実装方法
  2. DeleteView を用いた削除画面の実装方法

それでは早速、編集画面から作っていきましょう!

UpdateViewを用いた編集画面の作成

ではまず、日記の編集画面を作成していきましょう。

Django が提供する UpdateView を利用すると、編集画面に対応するビューは簡単に実装できます。

ただ今回は、少しオリジナルの UpdateView に、工夫を施してみます。

ユーザーからの入力が正常値であった場合、日記オブジェクトが持つ updated_at フィールドに、編集時の時刻を代入してデータベースに保存してみます。

これは、UpdateView が持つ form_valid メソッドを、オーバーライドすることで実現できます。

UpdateViewを使ってビューを実装

では、UpdateView を用いて、編集画面に対応するビューを実装しましょう。

diary ディレクトリの views.py に、下記のコードを追加しましょう!

このとき、djando.views.generic モジュールから、UpdateView を import して下さい。

編集画面に対応するテンプレートは、diary_update.html としました(後ほど作成しましょう)。

ポイント1:「model」と「fields」

今回追加した、DiaryUpdateView のポイントは大きく2つ。

まず1つ目は、「model」と「fields」というフィールドです。

これにより、diary_update.html の中で、

  1. date
  2. title
  3. text

という、3つのフィールドを持った、diary フォームオブジェクトを利用することができます。

このフォームを通して、ユーザーから日記データ書き換え用のデータを受け取るわけですね!

ポイント2:form_valid メソッド

2つ目のポイントが、form_valid メソッドです。

ユーザーから受け取ったフォーム値は、fields 変数の定義に従って、自動的にバリデーションを受けます。

バリデーションを通過し型や、データ長などに違反がなければ、form_valid 呼び出される仕様です。

このメソッドの中では、まず  form.save(commit=False) というコードにより、日記データに対応したフォームオブジェクトを入手します。

フォームオブジェクトが持つ save メソッドは、データベースにデータを保存するメソッドです。

ですが、 commit = False という引数により、データベースには保存処理がされません。

フォームオブジェクトを入手した後、updated_at フィールドに、現在時刻 timezone.now() を代入します。

最後に、  diary.save() により、データベースに保存処理を実行しているわけです。

テンプレートの作成

diary_update.html」を、templates ディレクトリの中に作成し、下記のようなテンプレートを作成しましょう。

{{ form.as_p }} により、diary フォームオブジェクトが持つ「date」「titile」「text」フィールドが、p タグで囲まれたフォームとしてテンプレートに埋め込まれます。

urls.pyで設定

続いて、urls.py の編集を行います。

diary ディレクトリ内の urls.py に、DiaryUpdateView に対応する、url の設定を行いましょう!

詳細画面の作成と同じで、編集したい日記データの id を受けるために、<uuid:pk>を url の中に仕込んでおきます

最後に、編集画面へのリンクを、日記の詳細画面の中に追加しましょう。

diary_update.htmlを編集

diary_detail.html を、下記のように編集します。

a タグの href に与える url の中に、 diary.pk を記述するのをお忘れなく!

編集画面の動作確認

ここまで実装できたら、一度プロジェクトを立ち上げて、編集画面が上手く動作するか確かめてみましょう!

日記の詳細画面に「編集」リンクが追加され、編集画面は以下のようになるはずです。

編集画面の動作確認

CreateView を利用した場合とは違い、フォームの初期値には、元の日記データの値が入っています。

DeleteViewを用いた削除画面の作成

続いて、DeleteView を用いて、削除画面を作成しましょう。

以下のコードを、diary アプリの views.py に追記しましょう。

DeleteView の import をお忘れなく!

DeleteView を継承していますが、これまで利用してきた View クラスと、利用方法は大きく変わりません。

template_name フィールドに対応するテンプレートを設定し、削除するデータに対応するモデルを、model フィールドに与えます。

削除確定ボタンを押した後は、一覧画面(diary_list)に遷移するように設定しましょう。

削除画面のビューは、自体は上記コードだけで実現します。

今回は、この DeleteView クラスが持つ、データ削除メソッドをザッと見てみましょう。

DeletionMixinクラスのdeleteメソッド

DeleteView クラスは、数多くのクラスを継承して成り立っています。

そして、その内の一つ DeletionMixin クラスが、実際のデータ削除に関する機能を担っています。

以下のコードは、DeletionMixin クラスが持つ、delete メソッドです。

このメソッドが指定した、データの削除を実行します。

このコードの中身は、かなりシンプル。

削除対象のオブジェクト(日記データ)を入手した後、そのオブジェクトが持つ delete メソッドを呼び出し、データベースから削除しています。

削除後は、return 処理として、success_url に指定された画面にリダイレクトします。

今回の連載では、削除命令が下るとデータベースから、完全にデータが削除される仕様となっています。

もし論理削除したい場合には、DeleteView の delete メソッドをオーバーライドして、その中でロジックを記述すればOKです。

テンプレートの作成

それでは、次の工程を進めていきましょう!

  1. DiaryDeleteView に対応するテンプレートの作成
  2. urls.py の設定
  3. 日記の詳細画面に削除画面へのリンク貼り

まずは、テンプレート作成からです。

削除画面に対応するテンプレートを「diary_detele.html」とし、以下のように記述しましょう。

DeleteView を使用した場合、削除対象のデータがテンプレート内部で利用できるように、自動で処理がなされます。

urls.pyで設定

続いて、urls.py を以下のように編集しましょう。

削除対象の日記データの id を指定するために、url の中に<uuid:pk>を記述するのをお忘れなく!

リンクの貼り付け

最後に、diary_detail.html を以下のように編集し、削除画面へのリンクを貼りましょう。

削除画面の動作確認

ここまで実装が完了したら、Django プロジェクトを立ち上げて、機能を確認しましょう。

日記の詳細画面にある、削除画面へのリンクを辿ると、以下のような画面が表示されるはずです。

削除画面の動作確認

削除ボタンを押すと、削除が実行され、日記一覧画面に遷移します。

また、Django 管理サイトにアクセスすると、日記データが削除されていることが確認できます。

第6回へつづく!

今回の記事では、日記の編集画面と削除画面を実装しました。

今回の記事のポイントは、以下の2つです。

  1. 編集画面の作成では UpdateView が便利
  2. 削除画面の作成では DeleteView が便利

次回は、Django テンプレート言語について学び、アプリの画面デザインを少し整えましょう。

それでは、次回もお楽しみに!

第6回はこちら!

こちらの記事もオススメ!


書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア