〜完了機能・削除機能の実装と、実際に遭遇したエラーまとめ〜

普段はインフラエンジニアとして、
仮想デスクトップ（VDI）運用、Windows 環境構築、CI/CD、Redmine 運用などを担当しています。
アプリ開発はほぼ未経験ですが、Flask を使って自分専用の ToDo アプリを作っています。

前回の記事では、
DB 作成 → タスク追加 → 一覧表示
まで実装しました。

今回は、ToDo アプリに欠かせない
完了機能 と 削除機能 を追加していきます。

途中でいくつかエラーにも遭遇したので、
その内容も含めて記録として残しておきます。

✅ 完了機能の実装

タスクを「完了」状態にするために、
Task モデルの done フラグを True に変更するだけのシンプルな機能です。

app.py にルートを追加

@app.route('/complete/<int:id>')
def complete(id):
    task = Task.query.get(id)
    task.done = True
    db.session.commit()
    return redirect(url_for('index'))

index.html に完了リンクを追加

{% if task.done %}
    <s>{{ task.title }}</s>
{% else %}
    {{ task.title }}
    <a href="/complete/{{ task.id }}">完了</a>
{% endif %}

完了済みタスクには取り消し線をつけ、
「完了」リンクは表示しないようにしました。

⚠️【エラー①】ルートの重複による AssertionError

完了機能を追加したときに遭遇したエラーがこちら。

AssertionError: View function mapping is overwriting an existing endpoint function: complete

原因：complete() 関数が app.py に 2 回書かれていた

コピペで重複してしまっていたのが原因でした。

解決：重複した関数を削除

Flask は同じ関数名のルートを許可しないため、
関数名の重複には注意が必要です。

🗑️ 削除機能の実装

削除機能は完了機能よりさらにシンプルです。
タスクを DB から削除するだけ。

app.py に削除ルートを追加

@app.route('/delete/<int:id>')
def delete(id):
    task = Task.query.get(id)
    db.session.delete(task)
    db.session.commit()
    return redirect(url_for('index'))

index.html に削除リンクを追加

<a href="/delete/{{ task.id }}">削除</a>

⚠️【エラー②】削除機能はすでに動いていた

実は削除機能を実装しようとした時点で、
すでに削除リンクが動いていました。

理由はシンプルで、

index.html に削除リンクがあり
app.py に削除ルートがすでに書かれていた

ためです。

開発未経験だと「どこまで実装したか」を忘れがちですが、
こういう“気づき”も含めて学びになりました。

🚀 動作確認

完了・削除機能を追加した後、以下を確認しました。

完了リンクを押すと取り消し線がつく
完了済みタスクには「完了」リンクが表示されない
削除リンクを押すと一覧から消える
DB からも正しく削除されている

どれも問題なく動作しました。

🎉 まとめ：インフラエンジニアでも Web アプリは作れる

アプリ開発は未経験でしたが、
Flask のシンプルさと、
インフラエンジニアとしての「原因切り分け力」が役に立ち、
完了・削除機能まで実装できました。

今回の学び：

Flask のルートは重複するとエラーになる
関数名の重複にも注意
UI の制御（完了済みタスクの表示切り替え）はテンプレートで簡単にできる
削除機能は非常にシンプル
小さなエラーを一つずつ解決していくのが開発の醍醐味

次は UI の改善 や Render へのデプロイ に挑戦していく予定です。