プログラミングを学ぶ中で、実際に動くアプリケーションを作ることは非常に重要です。今回は、Pythonの人気Webフレームワーク「Flask」を使って、シンプルながら実用的なTodoリストアプリを作成する方法を解説します。
このプロジェクトは、Webアプリケーション開発の基本的な概念を学ぶのに最適です。データの表示、フォーム処理、ルーティングなど、Webアプリの核となる要素を含んでいます。また、HTMLテンプレートの使用方法や、Bootstrapを利用した簡単なスタイリングも学べます。
Flaskとは
まず、Flaskとは何かを理解しましょう。Flaskは、PythonでWeb開発を行うためのフレームワークです。Flaskは単なるライブラリやモジュールではなく、ライブラリが特定の機能を提供するコードの集まりであるのに対し、Flaskはアプリケーション全体の構造を定義し、HTTPリクエストの処理やルーティングなどのWeb開発に必要な基本機能を提供します。
他の主要なPython Webフレームワーク(例:Django)と比較すると、Flaskの特徴は以下の点にあります
軽量:最小限の機能から始められ、必要に応じて機能を追加できる。
柔軟性:開発者に多くの自由度を与え、プロジェクトの構造を自由に設計できる。
学習の容易さ:シンプルな構造のため、初心者でも比較的短時間で基本を習得できる。
今回作成するTodoリストアプリには、タスクの表示、追加、完了の3つの主要機能があります。シンプルな機能ですが、これらを実装することで、FlaskアプリケーションのMVC(Model-View-Controller)パターンや、Pythonでのデータ処理の基礎を理解できるでしょう。
完成イメージ
タスク一覧画面
作成したタスクがリストで表示されます。各タスクをクリックすると完了状態となり非表示になります。
「タスク追加」ボタンをクリックすると画面遷移します。スタイリングはBootstrap を使用しています。
![](https://www.heiyoshilog-business.com/wp-content/uploads/2024/07/image-1024x545.png)
タスク追加画面
タスク名とタスク詳細を入力し「登録」をクリックすると、タスクが登録されタスク一覧画面に遷移します。
![](https://www.heiyoshilog-business.com/wp-content/uploads/2024/07/image-1-1024x544.png)
ファイル構成
project/
│
├── main.py
├── templates/
│ ├── base.html
│ ├── index.html
│ └── add.html
└── static/
└── assets/
└── favicon.ico
main.py:ルーティングやデータ処理、flaskのメイン処理
templates:各ルートで描画するHTMLファイル
static:imgやcssファイル
main.py
flaskで必要なモジュールをインポートし、アプリの定義・起動、データの保存、各ルーティングの処理を設定しています。
from datetime import datetime
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
# 簡易的なデータ保存
todos = [
{'index':0,'task': "Pythonの基礎学習", 'detail': '変数、データ型、制御構造について学ぶ', 'time': '7/1 11:10', 'done': True},
{'index':1,'task': "Webスクレイピング", 'detail': 'BeautifulSoupを使ってWebページから情報取得', 'time': '7/10 13:13', 'done': False},
{'index':2,'task': "データベース連携", 'detail': 'SQLiteを使ったデータの保存と取得方法', 'time': '7/12 9:10', 'done': False},
{'index':3,'task': "GUIアプリ作成", 'detail': 'Tkinterを使って簡単なGUIアプリを作る', 'time': '7/13 10:30', 'done': False}
]
@app.route('/')
def index():
return render_template('index.html', todos=todos)
@app.route('/add', methods=["GET",'POST'])
def add():
if request.method=="POST":
task=request.form["task"]
detail=request.form["detail"]
now=datetime.now()
time=now.strftime('%m/%d %H:%M')
todos.append({'index':len(todos),'task': task, 'detail':detail , 'time': time, 'done': False})
return redirect(url_for("index"))
return render_template('add.html')
@app.route('/complete/<index>')
def complete(index):
todos[int(index)]['done'] = True
return redirect(url_for('index'))
if __name__ == '__main__':
app.run(debug=True)
・todos:タスク名、タスク詳細、作成時間、完了ステータスの値をリストで保持しています
・/:todosの値をindex.htmlへ渡し一覧表示します
・/add:フォームのmethodがPOSTだった場合、フォームの各要素を取得しtodosリストに追加します
・/complete:タスクのインデックスが一致するものを完了ステータスに変更して一覧画面(/)にリダイレクトします
templates
base.html-基本レイアウト
Bootstrap のCDNリンクを使用して、簡単にスタイリングを適用しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todoアプリ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="shortcut icon" href='{{ url_for('static', filename='assets/favicon.ico') }}' type="image/x-icon">
</head>
<body>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
{% block content %}
{% endblock %}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
・{% block content %}~{% endblock %}を設定することで、子HTMLはbase.htmlを継承しつつ、各ページ設定を行えます。
index.html – タスク一覧ページ
{% extends "base.html" %}
{% block content %}
{% for todo in todos %}
{% if not todo.done %}
<a href="{{url_for("complete",index=todo.index)}}" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<!-- <img src='{{ url_for('static', filename='assets/img/icon.png') }}' alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> -->
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">{{todo.task}}</h6>
<p class="mb-0 opacity-75">{{todo.detail}}</p>
</div>
<small class="opacity-50 text-nowrap">{{todo.time}}</small>
</div>
</a>
{% endif%}
{% endfor%}
<br>
<br>
<a href="{{url_for('add')}}" class="btn btn-primary">タスク追加</a>
{% endblock %}
・{% extends “base.html” %}でbase.htmlを継承し、{% block content %}~{% endblock %}に設定を入れます。
・{% for todo in todos %}~{% endfor%}でmain.pyから受け取ったtodosリストの各値を繰り返し処理します。
・{% if not todo.done %}~{% endif%}で未完了ステータスのタスクだけ処理し描画する
・{{todo.task}}、{{todo.detail}}、{{todo.time}}各タスクの要素を描画します
・{{url_for(“complete”,index=todo.index)}}で/completeルートにルーティングし、完了ステータス対象のタスクインデックスを渡します。
add.html – タスク追加ページ
{% extends "base.html" %}
{% block content %}
<form method="post" action="{{url_for("add")}}" >
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">タスク</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="task">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">タスク内容</label>
<input type="text" class="form-control" id="exampleInputPassword1" name="detail">
</div>
<button type="submit" class="btn btn-primary">登録</button>
</form>
{% endblock %}
・{% extends “base.html” %}でbase.htmlを継承し、{% block content %}~{% endblock %}に設定を入れます。
・フォームのmethodを”POST”に設定し、actionは{{url_for(“add”)}}で/addルートにルーティングにします。
・フォーム内のinput要素にname属性を設定し、main.py内の/addの処理で入力値が取得できるように紐づけを行います。
まとめ
本記事では、Pythonの軽量WebフレームワークであるFlaskを使用して、シンプルなTodoリストアプリケーションを作成する方法を紹介しました。このプロジェクトを通じて、Webアプリケーション開発の基本的な概念や、Flaskの特徴である軽量性と柔軟性を学ぶことができます。
アプリケーションの主要機能として、タスクの表示、追加、完了の3つを実装し、HTMLテンプレートやBootstrapを用いたUIデザインにも触れました。また、Flaskの基本的な使い方や、ルーティング、フォーム処理などの重要な要素についても解説しています。
ここで学んだ内容を基に、さらに機能を拡張したり、より複雑なアプリケーションの開発に挑戦したりすることができるでしょう。