【Django】ajaxを使ってお気に入り機能を作る①

djangoでtodoリストアプリを作成する際に、お気に入り機能を作った(こんな感じ↓の星をクリックしてお気に入りに追加したり削除したりする機能)ので、作り方のメモです。

作りたい機能

作りたいお気に入り機能は下記のような感じです。

① todoリストの一覧表示画面で、todoの項目ごとにお気に入りマーク(星の形)がついている。
② 対象のtodoがお気に入りに登録済みの時は、星マークは黄色で表示し、お気に入り未登録の場合は灰色で表示する。
③ 星マークが灰色の時にクリックすると、お気に入り登録されて、星マークが黄色になる。
④ 星マークが黄色の時にクリックすると、お気に入り登録が解除されて、星マークが灰色になる。

この機能をどのように実現するかもう少し詳しく見ていきます。

作りたい機能(少し詳しく)

① お気に入りの判定方法
todoがお気に入り登録されているか、未登録であるかは、フラグ値としてDBに登録する。下記のように、DBにfavoriteというフラグを作成し、このフラグがTrueの場合はお気に入り登録済み、Falseの場合はお気に入り未登録とする。

② todoリスト一覧ページでの表示
todoリスト一覧ページでは、各todoを表示する際に、上記のfavoriteフラグで判定を行い、フラグ値がTRUEであれば黄色、FALSEであれば灰色で、星マークを表示する。

③ favoliteフラグの更新
星マークがクリックされた場合、クリックされたtodoのデータに対して、favoriteフラグを更新する。更新は、favoliteフラグがTRUEの場合はFALSEに、FALSEの場合はTRUEに、というように行う。

④ 星マークの色を更新
③のフラグ更新が成功した場合は、星マークの色を変更する。灰色の場合は黄色に、黄色の場合は灰色に変更する。

こんな感じかと。①と②については単純にDjangoの話になってくるのでここではおいておきます。

問題は③と④です。ここはお気に入りボタンを押すたびに画面全てが更新されてしまっては、さすがに使いづらいので、ajaxによる非同期通信を使います。

つまり、お気に入りボタンをクリックしても画面は更新せず、裏でDBの更新だけを行い、DBの更新が問題なく完了したタイミングで、星マークの色だけを更新する、という形にします。

ということで、次回からajaxを使ったお気に入り登録・解除についてやっていきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です