VS CodeとFlaskで作成するToDoリストアプリ：Visual Studio Codeで始めるPythonプログラミング（3/3 ページ）

» 2018年07月31日 05時00分公開

デバッグ実行

　以下のGIFアニメは、今回作成したアプリをデバッグ実行しているところだ。

［delete］リンクをクリックしても、項目が削除されない

　見ると分かる通り、［submit］ボタンによる項目の追加、［done!］リンクによる完了状態の変更、［delete all done items］ボタンによる完了した項目の削除はうまくいっている。しかし、［delete］リンクをクリックしても項目が削除されないようだ。

　［delete］リンクをクリックしたときには、「/deleteitem/XX」URLがリクエストされる（XXは項目のID）。実際に呼び出されるビュー関数は「delete_todoitem」だ。そして、最終的にはToDoListクラスのdeleteメソッドが呼び出される。

　そこで、まずtodo.pyファイルにあるdeleteメソッドを次のように変更する。pass文は「何もしない文」だが、ここではdel文での要素の削除がうまくいっていることを確認するために記述してある。

def delete(self, item_id):
item = [x for x in self.todolist if x.item_id == item_id]
del item[0]
pass

pass文を追加

　そして、app.pyファイルのdelete_todoitem関数にブレークポイントを設定して、動作を確認してみよう。

delete_todoitem関数にブレークポイントを設定

　何か項目を入力して、［submit］ボタンをクリックし、ToDoリストに項目を追加したところで、［delete］リンクをクリックしてみよう。

［delete］リンクをクリック

　これにより、デバッグ実行が中断される。

デバッグ実行が中断したところ

　デバッグ用のツールバーで［ステップインする］ボタンをクリックすると、先ほどコードを修正したToDoListクラスのdeleteメソッドに制御が移る。

ToDoList.deleteメソッドに制御が移ったところ

　ここで［デバッグ］ビューの［変数］ペーンを展開しておこう。ここにはローカル変数やパラメーター、インスタンスのメンバなどが一覧されている。

［デバッグ］ビューで各種変数の値を展開して表示したところ

　この状態では、self.todolistに追加した項目が存在し、ローカル変数のitemは未定義だ。ここではリストの内包表記を使って、リスト内から特定の要素を検索している。「x for x in self.todolist」に続く「if x.item_id == item_id」でメソッドに渡されたIDと各要素のitem_idメンバの値を比較するようにしているので、実際に取得するのは常に1つの要素で構成されるリストとなる（そのため、「del item[0]」として要素を削除している）。この辺の値の移り変わりに注意しながら、［ステップインする］ボタンを何度かクリックし、pass文まで実行を進めてみる。

ローカル変数「item」は空のリストになるが、self.todolistからは要素が削除されていない

　［デバッグ］ビューで変数を展開して一覧表示してみると分かるが、「del item[0]」でローカル変数itemは空のリストになるが、そもそもの削除対象のself.todolistからは要素が削除されていない。これは、一時的に作成したリストの要素からToDoItemインスタンスへの参照を削除しただけで、self.todolistにはその参照が残されたままということだ。つまり、削除できていない。

　どうしようか考えたのだが、ここでは次のようにdeleteメソッドを変更することにした。

def delete(self, item_id):
self.todolist = [x for x in self.todolist if x.item_id != item_id]
# delとpassの行は削除する

修正後のdeleteメソッド

　これは何をしているのかというと、「指定されたIDではない要素で構成される」（指定されたIDの要素が削除された）リストをself.todolistに代入している。デバッグ実行を中止して、上のようにコードを修正してから、（ブレークポイントを解除して）デバッグ実行をしているところを以下に示す。

きちんと要素が削除できるようになった

　今回はデータベースなどを使わずに、独自クラスを作成して、そこで項目を管理する形のToDoリストアプリを作成した。次回は、データベースを利用したものに、これを書き換えてみよう。なお、今回の記事ではGitHubで公開されている「flask-simple-todo」を参考にさせていただいている。ライセンス表記はこちら。