📝【Flask × SQLite】インフラエンジニアがゼロから作る ToDo アプリ①

IT、仕事

〜DB 作成からタスク追加機能までの実装と、実際に遭遇したエラーまとめ〜

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

この記事では、データベースの作成とタスク追加機能の実装までの流れを、
実際に遭遇したエラーも含めてまとめています。

📁 プロジェクト構成（この段階）

まずは最低限のフォルダ構成を準備しました。

ToDoApp/
├── app.py
├── models.py
├── requirements.txt
├── templates/
│   ├── index.html
│   └── add.html
├── static/
└── instance/

instance/ は SQLite の DB を置くためのフォルダで、Git 管理から除外されます。

🧱 1. 仮想環境の作成と Flask のインストール

インフラエンジニアとして Python を触る機会はありましたが、
Web アプリ開発は初めてなので、まずは環境構築から。

python -m venv venv
source venv/Scripts/activate
pip install flask flask_sqlalchemy
pip freeze > requirements.txt

⚠️【エラー①】ModuleNotFoundError: No module named 'flask_sqlalchemy'

最初に遭遇したのがこれ。

ModuleNotFoundError: No module named 'flask_sqlalchemy'

原因：Flask-SQLAlchemy をインストールしていなかった

解決：

pip install flask_sqlalchemy

開発初心者あるあるだけど、こういう小さなエラーを一つずつ潰していくのが楽しい。

🗂️ 2. DB モデル（Task モデル）の作成

ToDo アプリに必要な情報はシンプルなので、
以下の 3 つの項目を持つ Task モデルを作成しました。

  • title：タスク名
  • done：完了フラグ
  • created_at：作成日時

models.py：

from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

db = SQLAlchemy()

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    done = db.Column(db.Boolean, default=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

🧭 3. app.py に DB 設定を追加

from flask import Flask, render_template, request, redirect, url_for
from models import db, Task

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db.init_app(app)

🛠️ 4. DB の初期化

Python シェルから DB を作成します。

python
from app import app, db
with app.app_context():
    db.create_all()

成功すると instance/todo.db が生成されます。

⚠️【エラー②】NameError: name 'request' is not defined

タスク追加機能を作っているときに遭遇。

NameError: name 'request' is not defined

原因：request を import していなかった

修正：

from flask import Flask, render_template, request, redirect, url_for

Flask の基本だけど、初めてだと忘れがち。

⚠️【エラー③】can't open file '...templates/app.py'

python app.py

を実行したら、なぜか templates フォルダの中の app.py を探しに行くエラーが発生。

原因：カレントディレクトリが templates/ になっていた

解決：

cd ~/ToDoApp
python app.py

インフラエンジニアとしては「パスの問題」はすぐ気づけたけど、
開発ではこういうミスも起きるんだなと実感。

📝 5. タスク追加フォームの作成（/add）

app.py にルートを追加

@app.route('/add', methods=['GET', 'POST'])
def add():
    if request.method == 'POST':
        title = request.form['title']
        new_task = Task(title=title)
        db.session.add(new_task)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('add.html')

add.html を作成

<!DOCTYPE html>
<html>
<head>
    <title>タスク追加</title>
</head>
<body>
    <h1>タスク追加</h1>

    <form method="POST">
        <input type="text" name="title" placeholder="タスク名" required>
        <button type="submit">追加</button>
    </form>

    <a href="/">戻る</a>
</body>
</html>

📄 6. タスク一覧ページの作成（/）

app.py に一覧表示ルートを追加

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

index.html を作成

<!DOCTYPE html>
<html>
<head>
    <title>ToDo一覧</title>
</head>
<body>
    <h1>タスク一覧</h1>

    <a href="/add">タスク追加</a>

    <ul>
        {% for task in tasks %}
            <li>{{ task.title }}</li>
        {% endfor %}
    </ul>
</body>
</html>

🚀 7. 動作確認

python app.py

ブラウザでアクセス：

http://127.0.0.1:5000/
  • 一覧ページが表示
  • 「タスク追加」からフォームに移動
  • タスクを追加すると一覧に戻り、表示される

ここまで動けば DB → 追加 → 一覧表示 が完成。

🎉 まとめ：

アプリ開発は未経験でしたが、
Flask と SQLite のシンプルさのおかげで、
思っていたよりスムーズに ToDo アプリの基礎を作れました。

途中でいくつかエラーも出ましたが、
一つずつ原因を調べて解決していく過程は、
インフラのトラブルシューティングと似ていて楽しかったです。

次は 完了機能 と 削除機能 を追加して、
より実用的な ToDo アプリに仕上げていきます。

タイトルとURLをコピーしました