【Python】第8章第10回：Webアプリ開発プロジェクト例

2025年1月23日 a-mun

本記事では、PythonとFlaskを使用した簡単なWebアプリ開発プロジェクトの例を解説します。タスク管理アプリの実装を通して、実際のアプリケーション開発の流れを学びましょう。

Table of Contents

0. 記事の概要

この記事を読むメリット

Webアプリ開発の基礎を理解：実践的なプロジェクトを通して学べます。
Flaskの応用力を習得：ルーティングやデータベース操作を活用したアプリ開発を体験できます。
ポートフォリオ作成に役立つ：開発したアプリを活用して実績をアピールできます。

この記事で学べること

Webアプリ開発の基本的な流れ
Flaskを使ったタスク管理アプリの作成
アプリケーション設計の実践例

1. Webアプリ開発の基本的な流れ

1.1 Webアプリ開発の主要なステップ

Webアプリ開発の基本的な流れは以下の通りです。

要件定義: どのような機能が必要かを決定
設計: アプリケーションの構造を設計
実装: コードを記述して機能を実装
テスト: 動作確認とバグ修正
デプロイ: インターネット上で公開

1.2 Flaskを使った開発の特徴

Flaskは以下の特徴を持つため、初心者に最適なフレームワークです。

軽量で柔軟性が高い
直感的なルーティングとテンプレートエンジン
豊富な拡張機能

2. プロジェクト例：タスク管理アプリ

2.1 必要な機能の設計

今回作成するタスク管理アプリには以下の機能を実装します。

タスクの追加
タスクの一覧表示
タスクの削除

2.2 コード例

# app.py
from flask import Flask, request, redirect, url_for, render_template

app = Flask(__name__)

# タスクを保存するためのリスト
tasks = []

@app.route("/")
def index():
    return render_template("index.html", tasks=tasks)

@app.route("/add", methods=["POST"])
def add_task():
    task = request.form["task"]
    tasks.append(task)
    return redirect(url_for("index"))

@app.route("/delete/")
def delete_task(task_id):
    if 0 <= task_id < len(tasks):
        tasks.pop(task_id)
    return redirect(url_for("index"))

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

動作解説

タスクの追加: フォームから受け取ったデータをリストに追加。
タスクの一覧表示: テンプレートでリストをループして表示。
タスクの削除: URLパラメータを基に指定されたタスクを削除。

3. テンプレートとスタイルの実装

3.1 テンプレートのコード例

# templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タスク管理アプリ</title>
</head>
<body>
    <h1>タスク管理アプリ</h1>
    <form action="/add" method="POST">
        タスク: <input type="text" name="task">
        <button type="submit">追加</button>
    </form>
    <ul>
        {% for task in tasks %}
        <li>{{ loop.index }}. {{ task }} <a href="/delete/{{ loop.index0 }}">削除</a></li>
        {% endfor %}
    </ul>
</body>
</html>

4. 練習問題

以下の課題に挑戦してみましょう。

タスクに完了フラグを追加し、完了したタスクをリストから移動する機能を実装してください。
Bootstrapを使用して、アプリケーションのデザインを改善してください。
データを永続化するために、SQLiteデータベースを導入してください。

5. 練習問題の解答と解説

問1の解答例

# タスクに完了フラグを追加
@app.route("/complete/")
def complete_task(task_id):
    if 0 <= task_id < len(tasks):
        completed_task = tasks.pop(task_id)
        tasks.append(f"{completed_task} (完了)")
    return redirect(url_for("index"))

問3の解答例

# SQLiteデータベースの導入例
from flask_sqlalchemy import SQLAlchemy

app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///tasks.db"
db = SQLAlchemy(app)

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)

6. まとめ

本記事では、Flaskを使用した簡単なWebアプリ開発プロジェクトを学びました。次は、より高度な機能を取り入れたアプリケーションを作成してみましょう。