初心者の決定版アプリ: Flask と SQLite で TODO アプリを作る！

何事もまずは真似ることから！

ということで、はじめてのアプリ作成ではこの YouTube を参考にしました。

初心者向けにたくさんの動画を公開しているので、これからもまずは真似て勉強していこうと思います！

ちなみにこちらの画像が全体像です。(分わかりやすいですかね？笑)
Todo Flow

実行環境とファイル構成

こちらが利用した環境とファイル構成になります。

実行環境

基本的には Python が動く環境であれば、問題ないはずです。
念のために、私の環境はこちらです。

Windows 7 SP1 x64
VS Code 1.23.0
Python 3.6.5
Flask 1.0.2
Sqlite 3.21.0

ファイル構成

アプリを構築中には、徐々にファイルやフォルダを増えていきます。
こちらが最終的に出来上がるファイル構成です。

[]
├─ app.py
│　(Flask アプリのメインファイル)
│
├─ todo.sqlite
│　(SQLite データベース)
│
└─[] templates
　　　└─ index.html (jinja テンプレート)

学んだこと

初めてってこともあり、なかなか勉強になりました。

Jinja テンプレートの使い方: render_template()

Python スクリプト側で利用している変数を、jinja テンプレート側に渡し、jinja テンプレート側でその変数を利用した for ループや if ステートメントの処理ができます。

こちらが実際の Python コード

#app.py
from flask import render_template

@app.route('/')
def index():
    todos_incomplete = Todo.query.filter_by(complete=False).all()
    todos_complete = Todo.query.filter_by(complete=True).all()
    return render_template('index.html',
                           todos_incomplete=todos_incomplete,
                           todos_complete=todos_complete)

Todo は SQLAlchemy のDB クラスで、クエリを投げて、返ってきたオブジェクトを jinja テンプレート側に渡しています。

こちらがその jinja テンプレート

<ul>
    {% for todo in todos_incomplete %}
      <li>{{ todo.text }} | <a href="{{ url_for('complete', id=todo.id) }}">DONE</a></li>
    {% endfor %}
</ul>

“<li>” をループで回してリストを作っています。
リンクも同時に生成して、一意の URL を生成しています。

内部リンクの設定方法: url_for(‘関数名’))

関数名を指定することで、その関数に紐付いている @app.route の URL にリンクすることができます。

Flask では動的に URL 生成することもできるので、その際に動的な部分を “変数” として第二引数に渡すだけで良いので結構使えそうですね。

例えば、このコードの場合、”id” 部分が動的に生成されています。

#app.py
from flask import url_for

@app.route('/complete/<id>')
def complete(id):
    todo = Todo.query.filter_by(id=int(id)).first()
    todo.complete = True
    db.session.commit()
    return redirect(url_for('index'))

リダイレクトの使い方: redirect()

こういう使い方をするんだと勉強になった部分です。

ある機能を index.html 側で実行する(例えば「ToDo 項目の追加」機能)
関連する form 情報を、指定した URL に送信(例: “/add”)
サーバー側のスクリプトが “/add” に送られてきた form 情報を処理
index.html を再読込みし、更新した情報を表示

ステップ 2, 3 は瞬足サーバーサイドの処理なので、ユーザーからみると 1 & 4 しか見えず、index.html が再読込みされていることは気づかないですね。

ページ全体が更新されているので、重たいページだとどうかと思いますね。。。いつか AJAX を実装して、必要な項目だけを更新できるようにしたいです。

こちらが実際のコードです。

#app.py
from flask import redirect

@app.route('/add', methods=['POST'])
def add():
    todo = Todo(text=request.form['todo-item'], complete=False)
    db.session.add(todo)
    db.session.commit()
    return redirect(url_for('index'))

SQLAlchemy の使い方

以外に簡単でびっくりしました。
簡単にまとめると、

ひとまずの設定(db = SQLAlchemy(app))
テーブルごとにクラスを作成
作成したテーブルの列を定義
列の型を定義

他にも色々な型があるので、公式ページで必要に応じて確認しましょ。

んで、こちらが実際のコード

#app.py
from flask_sqlalchemy import SQLAlchemy

class Todo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    text = db.Column(db.String(200))
    complete = db.Column(db.Boolean)

まとめ

簡単なアプリということもあり、シンプルに少しずつ学べてる感じがしますね。

少しずつ改善しながら、このアプリも “使えるもの” にしていきたいですね！