Back to Blog

FlaskでTodoリストの作成その３~チェックと削除機能の追加~

flask

2024年10月1日

こんにちは！

今回の記事では、FlaskでTodoリストの作成を行います。Todoリストの作成は全３回の記事でお伝えします。今回は最後の第3回目です！

タスクのチェック機能の追加

ここまで、タスクの追加機能の実装を行いました。

次は、タスクのチェック機能を追加しましょう。

ルーティングの設定

タスクのチェック機能は、TOPページのタスクの横にチェックボックスをつけます。

新規に画面を作るわけではありませんが、データの変更を受け取る窓口を作ります。

app.pyに以下を追加します。

@app.route('/toggle_complete/<int:id>', methods=['POST'])
def toggle_complete(id):
    task = Task.query.get_or_404(id)
    task.completed = not task.completed
    try:
        db.session.commit()
        return redirect('/')
    except:
        db.session.rollback()
        return 'There was an issue completing the task'

http://127.0.0.1:5000/toggle_complete/[タスクid]へ、タスクの変更する情報を受け取ったら、タスクの状態を完了にします。

HTMLの修正

続いて、HTMLの修正を行います。<ul> ~ </ul>の部分を修正します。

<!-- templates/index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Flask Todo App</title>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
    <!-- 以下の部分を変更 -->
     {% for task in tasks %}
     <li>
        <form method="POST" action="{{ url_for('toggle_complete', id=task.id) }}">
            <label for="task_{{ task.id }}">{{ task.content }}</label>
            <input type="checkbox" id="task_{{ task.id }}" name="task_{{ task.id }}"
                   {% if task.completed %} checked {% endif %} onchange="this.form.submit()">
        </form>
     </li>
    {% endfor %}
    </ul>
    <a href="add_task">タスクの追加</a>
</body>
</html>

これで完了です。

以下のコマンドを実行して、Flaskを起動します。

python app.py

ブラウザにアクセスすると、タスクの横にチェックボックスが表示されます。

チェックボックスをON、OFFしてタスクの管理を行います。画面の更新などをしてもチェックの内容が保持されていることが分かります。

タスクの削除機能の実装

最後にタスクの削除機能を実装してみましょう。

削除用のルートを設定

まず、app.pyにタスクを削除する処理を記述します。

/delete_task/[タスクid]へ通信があった場合に、指定されたタスクidのタスクを削除する処理です。

### app.pyのtoggle_completeの下に追加 ###
@app.route('/delete_task/<int:id>', methods=['POST'])
def delete_task(id):
    task = Task.query.get_or_404(id)
    try:
        db.session.delete(task)
        db.session.commit()
        return redirect('/')
    except:
        db.session.rollback()
        return 'There was an issue deleting the task'

データベースのデータを削除する場合は、db.session.delete()を使用します。

app.pyの全文は以下のようになります。

# app.py
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
db = SQLAlchemy(app)
migrate = Migrate(app, db)

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.String(200), nullable=False)
    completed = db.Column(db.Boolean, default=False)

@app.route('/')
def index():
    tasks = Task.query.all()
    return render_template('index.html', tasks=tasks)

@app.route('/add_task', methods=['GET', 'POST'])
def add_task():
    if request.method == 'POST':
        task_content = request.form['content']
        new_task = Task(content=task_content)

        try:
            db.session.add(new_task)
            db.session.commit()
            return redirect('/')
        except:
            db.session.rollback()
            return 'There was an issue adding your task'

    return render_template('add_task.html')

@app.route('/toggle_complete/<int:id>', methods=['POST'])
def toggle_complete(id):
    task = Task.query.get_or_404(id)
    task.completed = not task.completed
    try:
        db.session.commit()
        return redirect('/')
    except:
        db.session.rollback()
        return 'There was an issue completing the task'

@app.route('/delete_task/<int:id>', methods=['POST'])
def delete_task(id):
    task = Task.query.get_or_404(id)
    try:
        db.session.delete(task)
        db.session.commit()
        return redirect('/')
    except:
        db.session.rollback()
        return 'There was an issue deleting the task'

if __name__ == "__main__":
    app.run(debug=True)

index.htmlの編集

次にtemplates/index.htmlファイルを編集します。

削除ボタンを作成して、ボタンを押したら、app.pyに作成した削除する処理を実行します。

<!-- templates/index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Flask Todo App</title>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
     {% for task in tasks %}
     <li>
        <form method="POST" action="{{ url_for('toggle_complete', id=task.id) }}"　>
            <label for="task_{{ task.id }}">{{ task.content }}</label>
            <input type="checkbox" id="task_{{ task.id }}" name="task_{{ task.id }}"
                   {% if task.completed %} checked {% endif %} onchange="this.form.submit()">
        </form>
　　　　      <!-- ↓ここから追加 -->
　　　　　<form method="POST" action="{{ url_for('delete_task', id=task.id) }}">
            <button type="submit">削除</button>
        </form>
     </li>
    {% endfor %}
    </ul>
    <a href="add_task">タスクの追加</a>
</body>
</html>

formの下に削除ボタンを追加します。buttonをクリックすると、actionで指定したURLへ通信を行います。

動作確認

最後に、動作確認をしてみましょう。

Flaskを起動して、ブラウザで確認してみると、削除ボタンがあります。

削除ボタンをクリックすると、タスクが消えることがわかります。

これで動作は完了です。

しかし、Webページとしては味気ないので、次はデザインも付けていきます。

CSSの追加

続いて、TodoリストアプリにCSSでデザインを付けましょう。

templates/index.htmlの末尾に以下を追加します。

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h1 {
        background-color: #333;
        color: white;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 20px 0;
    }
    
    .container {
        margin: 20px;
        padding: 20px;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        width: 300px;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    li {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
    }
    
    li:last-child {
        border-bottom: none;
    }
    
    button {
        background-color: #ff4d4d;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #ff1a1a;
    }
    
    a {
        display: block;
        text-align: center;
        background-color: #333;
        color: white;
        padding: 10px;
        text-decoration: none;
        border-radius: 4px;
        margin-top: 20px;
    }
    
    a:hover {
        background-color: #555;
    }
    
    </style>

HTML内の<style>タグが追加されて、Webページにデザインが付きました。

これでTodoリストアプリの作成が完了です。

まとめ

今回は、Todoリストアプリの作成を行いました。

Todoリストアプリを作成するためには、データベースの処理やPOSTやGETの処理などWebアプリの基本的な内容を理解する必要があります。

今回の記事では、これらのWebの基礎が理解できるように記述しました。基礎が理解できたら、さらに複雑なシステムを作ってみてください。

ここまでお読みいただきありがとうございました。

Share

             

Pythonの基礎から応用まで学べる
Python WebAcademy

Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。

無料で試す

インフラの学習はInfraAcademy

おすすめの記事

Flaskのテンプレートでリンクを指定するurl_for()の使い方解説
Flaskの.gitignoreはどうすればいいのか？
Flaskの入門講座
Gunicorn実行時にFailed to find attribute ‘app’ in ‘app’.というエラーが出た時の対処方法
Flaskで日時を日本標準時（JST）に変換する方法【Flask-Momentを使ってみよう】
FlaskでTodoリストの作成その３~チェックと削除機能の追加~
FlaskでTodoリストの作成その２~データベースの設定~
FlaskでTodoリストの作成その１~準備とアプリケーションの作成~
FlaskとOpenCVを組み合わせて画像処理アプリケーションを作成する
Linuxで簡単に始めるPythonプログラミング入門

サイト内検索

タグ一覧

AI CSS DB Docker flask Flask-Login gunicorn Jinja2 Linux Python Render TODOアプリ インフラ エラーの対処 テスト バックエンド フロントエンド ユーザー認証 学習