Flaskを用いて別ページに変数を送りたいのですがうまくいきません

Question

いつもお世話になっております。

https://tech-diary.net/flask-introduction/
上記ページを参考に、FlaskとSQLAlchemyを用いて、[todo.db]の[Post]というテーブルの内容を別ページに送ろうとしております。

from flask import Flask, render_template, request, redirect
from datetime import datetime
from flask_sqlalchemy import SQLAlchemy

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

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(30), nullable=False)
    detail = db.Column(db.String(100))
    due = db.Column(db.String(20))


@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'GET':
        #↓↓↓ここでデータベースのデータを取り出し、postsという名前をつけてindex.htmlへ送っていると思っている
        posts = Post.query.all()
        return render_template('index.html', posts=posts)
        #↑↑↑
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        due = request.form.get('due')
        new_post = Post(title=title, detail=detail, due=due)

        db.session.add(new_post)
        db.session.commit()
        return redirect('/')

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

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

データを受け取って表示させたいindex.htmlは以下の通りです。

{% extends 'base.html' %}
{% block body %}
<h1>トップページ</h1>
{% for post in posts %}
    <h2>タイトル : {{ post.title }}</h2>
    <h2>詳細 : {{ post.detail }}</h2>
    <h2>期限 : {{ post.due }}</h2>
{% endfor %}
{% endblock %}

また、データベースは、テーブル名Postで、以下の4つの列が入っています。
id title detail due
データが入っていることは、DB Brouser for SQLite で確認しました。（idは全てNULLです）

以上の状況で、コマンドプロンプトから当該プログラムのある部分へ行き実行させ、ブラウザでhttp://localhost:5000/へアクセスした画面がこちらになります。

各項目の右にデータが表示されるだろうと考えましたが、これが表示されません。
create.htmlで書き込んだデータは正しくデータベースに入りましたので、表示のさせ方がおかしいのかと考えておりますが、どうにも分かりませんでした。修正すべき部分をご指摘頂きたく存じます。

Answer 1

【結論】テーブルにプライマリーキーが設定されていませんでした。

参考にしたサイトのdbの作成方法を無視し、慣れ親しんだ方法で作成した為、idの列にプライマリーキーを設定していませんでした。SQLITEでは、ある列をプライマリーキーかつINTEGER型としておくと、他の列にデータが入った時、自動的にidに連番が付与される仕組みのようです。これが入っていなかった為、データが読み込めずに表示されなかったというものでした。

この度もご指導誠に有難うございました。

Answer 2

動作させてみました。

データが入っていない時はその動作になります。
/createからデータを入力してみてください。

なお、/createから以下を登録した場合、表示は、画像の通りになりました。

title: aaa
detail: ddd
due: 2021-08-31

title: bbb
detail: ccc
due: 2021-09-01 

上記状態のDBのデータは以下の通りでした。(postテーブル。PyCharmで確認)

データ未入力(dueは入力)の場合は空白文字列が登録され、NULLにはなっていませんでした。
PyCharmでDDLを表示したところ、以下が取得できました。

-- auto-generated definition
create table post
(
    id     INTEGER     not null
        primary key,
    title  VARCHAR(30) not null,
    detail VARCHAR(100),
    due    VARCHAR(20)
);

このテーブルはcreate_all()で作成したものなので同じ物だと思いますが、idにNULLが入る要素が無いと思いますので、データ入力に失敗していたりしないか確認ください。

なお、私の環境はWindows 10 + PyCharm Professional + Python 3.8です。
環境が異なる場合、動作が異なる可能性があります。

2021/08/30 18:00追記

以下を設定すると発行されたクエリを見ることができます。

app.config['SQLALCHEMY_ECHO'] = True

実際のクエリを確認すると以下の通りです。

2021-08-30 17:16:14,864 INFO sqlalchemy.engine.Engine BEGIN (implicit)
2021-08-30 17:16:14,865 INFO sqlalchemy.engine.Engine INSERT INTO post (title, detail, due) VALUES (?, ?, ?)
2021-08-30 17:16:14,865 INFO sqlalchemy.engine.Engine [generated in 0.00034s] ('hhh', 'hhh', '2021-08-04')
2021-08-30 17:16:14,867 INFO sqlalchemy.engine.Engine COMMIT
2021-08-30 17:16:14,878 INFO sqlalchemy.engine.Engine BEGIN (implicit)
2021-08-30 17:16:14,879 INFO sqlalchemy.engine.Engine SELECT post.id AS post_id, post.title AS post_title, post.detail AS post_detail, post.due AS post_due 
FROM post
2021-08-30 17:16:14,879 INFO sqlalchemy.engine.Engine [cached since 12.17s ago] ()
2021-08-30 17:16:14,880 INFO sqlalchemy.engine.Engine ROLLBACK

INSERT INTO post (title, detail, due) VALUES (?, ?, ?)

この部分ですが、idが指定されていないINSERTが発行されている事がわかります。

sqliteでINTEGER Primary Keyのカラムに対して値を指定しないでINSERTを行った場合、自動的にrowidが使われるようです。
テーブルの中身が無い場合のrowidがいくつかが明確に書かれているドキュメントを見つけることができませんでしたが、全てのデータを消したテーブルにINSERTしてみると1が設定されたので1から始まるものと考えられます。
値がある場合は最小のrowid + 1が設定されるようです。

/createで値を登録する場合、上記クエリが発行されるので、idにNULLが入る事はなく、1から順番に並んだ値が入る事が分かります。
sqliteの場合primary Key設定をしていても、NULLが入れられるという記事があったので(おかしい気がしますが)、/createを使わず別のツールを使う等の方法で登録すればNULLが入ったデータを設定することが可能です。

Comments

[jyansinkai]

ご指導誠に有難うございます。
データベースのidに手動で数字を入力しました所、画面に表示されました。
create.htmlにidを入力する欄は設けていない（参考ページには『自動的に入力される』と書いてあった）のですが、どうしてそちらの環境では自動的にidが入ったのでしょうか…？

[FiroProchainezo]

追記しました。

すでに解決しているようですが。

[FiroProchainezo]

個人的な意見ですが、コメント追加しておいて回答待たずにすぐに自己解決するなら質問すべきではないと思います。
閉まらない質問よりは100倍マシですが。

また、自己解決の「データベースのidにオートインクリメントを設定しておらず、idがNULLとなったデータベースは読まないことが今回の原因でした。」ですが、primary key にNULLが設定できているのを不思議に思っていないのは問題と思います。

[jyansinkai]

ご指導誠に有難うございます。
>>sqliteでINTEGER Primary Keyのカラムに対して値を指定しないでINSERTを行った場合、自動的にrowidが使われるようです。
この仕様は存じませんでした。dbを見直しました所、id列がプライマリーキーに設定されていませんでした。これが設定されていれば、自ずとidが入り、入力内容が表示されたということですね。大変勉強になりました。テーブルを作成する際は必ずプライマリーキーを設定するように致します。
また、回答を待たずに自己解決、ご指導を無にする行為も教わる者としてあるまじき態度でございました。大変失礼致しました。今後とも何卒宜しくお願い申し上げます。