FlaskでTodoリストの作成その２~データベースの設定~ - Flask WebAcademy

こんにちは！

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

FlaskでTodoリストの作成その１~準備とアプリケーションの作成~
FlaskでTodoリストの作成その２~データベースの設定~
FlaskでTFlaskでTodoリストの作成その３~チェックと削除機能の追加~

データベースの設定

タスクを追加するということは、タスクの情報を保存しておく必要があります。

データを保存するためには、データベースが必要になります。

Flaskの開発環境でデータベースを使用するには、flask_SQLAlchemyを使うと簡単に実装できます。

以下のコマンドでモジュールをインストールします。python app.pyを実行中の場合は、[Ctrl + C ]で中断してから以下のコマンドを実行しましょう。

pip install Flask-SQLAlchemy Flask-Migrate

次に、app.pyでflask_SQLAlchemyを使用する設定を行います。

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)#←追加

追加した部分の解説は以下の通りです。

・app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///todo.db’ は、Flaskアプリケーションで使用するデータベースの接続先を設定しています。

・db = SQLAlchemy(app) という行は、FlaskアプリケーションでSQLAlchemyを使用するための準備を行っています。

・migrate = Migrate(app, db)という行は、データベースの管理を簡単にするためにマイグレーションを有効にしています。マイグレーションとは、データベースのスキーマ（構造）をバージョン管理し、変更を適用することです。

データベースのテーブルを定義

次にデータベースのテーブルを定義します。

テーブルとはデータベースの基本的な構造で、行（レコード）と列（フィールド）で構成されます。エクセルのシートのようなイメージです。

テーブルを定義は、テーブルにどのようなデータがどのような形で入るのかを定義します。

また、テーブル定義のことをモデルと呼びます。

app.pyに以下のように記述しましょう。

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)

これはTaskテーブルの定義をしています。

id、content(タスクの内容)、complete(タスク完了の有無)の3つの情報を格納する構造を作成しました。

データベースのテーブル定義については後ほど詳しく解説します。

ここまで変更した内容を反映した、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():
    return render_template('index.html')

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

データベースに反映

ここまでで、データベースの設定とテーブルの定義が完了しました。

しかし、まだデータベースは作成されておらず、何もない状態です。

作成するためには、以下のコマンドを実行します。

#dbの初期化(初回のみ実行)
flask db init

#dbのマイグレート
flask db migrate

#dbへ反映
flask db upgrade

flask db upgradeコマンドが正常に完了すると、データベースにテーブルが作成されます。

コマンド実行後、instanceディレクトリとmigrateionsディレクトリが作成されています。instanceディレクトリには、データベースのファイルが格納されており、migrationsファイルには、データベースの構造や変更履歴の情報などが格納されています。

今回app.pyにTaskモデルを作成したので、Taskのテーブルが作成されました。

タスクの追加機能の実装 – 追加画面の実装

データベースの作成が完了したら、次はタスクを追加する画面を作成します。

ルーティングの設定

タスクの追加する画面は、URL http://127.0.0.1:5000/add_taskにアクセスした際に表示させます。

app.pyに以下の内容を追加します。(indexの下に追加してください)

@app.route('/')
def index():
    return render_template('index.html')

# ↓以下を追加
@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')

コードの詳細については、後ほど解説しますが、/add_taskにアクセスした際にadd_task.htmlを表示させる機能と、タスクをデータベースへ保存する機能があります。

HTMLの作成

続いて、HTMLを作成します。

templatesディレクトリ配下に、add_task.htmlというファイルを作成しましょう。そして、以下の内容を記述します。

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

<!DOCTYPE html>
<html>
<head>
    <title>Add Task</title>
</head>
<body>
    <h1>Add Task</h1>
    <form action="add_task" method="POST">
        <input type="text" name="content" required>
        <button type="submit">追加</button>
    </form>
    <a href="./">Homeに戻る</a>
</body>
</html>

これは、タスクを追加するフォームのHTMLです。

http://127.0.0.1:5000/add_taskにアクセスすると、input画面が表示され、タスクの追加が可能になります。

TOPページの修正

タスクの追加が完成したら、TOPページも修正しましょう。

追加したタスクをデータベースから出力することと、追加ページへのリンクを加えます。

まず、app.pyを以下のように修正します。

@app.route('/')
def index():
    tasks = Task.query.all() #←追加
    return render_template('index.html', tasks=tasks) #←一部修正

Task.query.all()は、タスクのデーターをすべて取得してtasksという変数に代入しています。

tasksはHTMLで出力するために、render_template(‘index.html’, tasks=tasks)の設定をしています。

次に、templates/index.htmlを修正します。

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

<!DOCTYPE html>
<html>
<head>
    <title>Flask Todo App</title>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
        <!-- 以下の部分を変更 -->
        {% for task in tasks %}
         <li>{{ task.content }}</li>
        {% endfor %}
    </ul>
    <a href="add_task">タスクの追加</a>
</body>
</html>

これで、追加したタスクがTOPページの一覧にも表示できるようになりました。

現在の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')

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