Flaskでforループを使ってtableを表示させたい。
PythonのWEBアプリケーションフレームワークであるFlask。
Flaskを使うことで動的なWEBサイトを作ることができる。
動的に処理させたい内容の例としてテーブル（table）がある。
tableは表形式でデータを表現するためのHTMLタグで以下のような表現ができる。
| ヘッダー | ヘッダー |
|---|---|
| データ | データ |
| データ | データ |
| データ | データ |
しかし表示させるデータの個数がいつも同じとは限らない。
１個のときもあるかもしれないし１０個のときもあるかもしれない。
こんなときFlaskではどのようにHTMLを組めばよいのか。
そこで今回はFlaskでforループを使ってtableを表示する方法について解説する。
この記事を書いている人
記事を読むメリット
Flaskでforループを使ってtableを表示する方法がわかる
FlaskでHTMLに変数を渡す方法
FlaskでテンプレートのHTMLに変数を渡すには以下のように書く。
@app.route('/speech_bubble/')
def speech_bubble():
html = render_template('speech_bubble.html', title="吹き出しツール「フキツイ」")
return html
上の２行はURLにアクセスした際にどの処理を実行するかの指定である。
３行目の render_template() の最初の引数で使用するHTMLを指定して、後ろの title=... の部分で変数を渡している。
この場合はtitleという名前で変数を渡しているが、任意の名前で渡すことができる。
FlaskでHTMLで変数を受け取る方法
ではpyファイルから渡された変数をテンプレートView用のHTMLでどのように受け取るのか。
受け取るときは以下のような書き方になる。
<h1 class="h3 mb-2 text-gray-800">{{ title }}</h1>
２重の中括弧の中に変数名を指定して {{ 変数名 }} と記載する。
FlaskでHTMLでforループを実現する方法
変数を受け取ったら、そのデータを表示させる。
だが中身が複数のデータだった場合、中の数に応じてHTMLタグで括ってデータを表示する必要がある。
tableタグの中で複数のデータを表示させたい場合は、以下のような書き方となる。
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<tbody>
{% for row in calendar_list %}
<tr>
<td><a href="/calendar/?y={{ row[0] }}">{{ row[0] }}年</a></td>
<td><a href="/calendar/?y={{ row[1] }}&p=r">{{ row[1] }}</a></td>
<td><a href="/calendar/?y={{ row[2] }}&p=h">{{ row[2] }}</a></td>
<td><a href="/calendar/?y={{ row[3] }}&p=s">{{ row[3] }}</a></td>
<td><a href="/calendar/?y={{ row[4] }}&p=t">{{ row[4] }}</a></td>
<td><a href="/calendar/?y={{ row[5] }}&p=m">{{ row[5] }}</a></td>
</tr>
{% endfor %}
</tbody>
</table>
ここでは calendar_list という変数が渡されており、 {% for row in calendar_list %} の複数のデータ１つ１つに対してループの中の処理が実行される。
row in calendar_list の宣言で１つ１つのデータを row という変数に渡して trタグの中で rowの中の各要素を表示している。
forループの何回目の処理かindexを取得する方法
ループ中の特定の回だけ特殊な処理をしたいこともあるだろう。
そんなときは以下の処理でループのindexを取得する。
{% if loop.index==6 %}
特殊な処理
{% else %}
通常処理
{% endif %}
この場合はループが６回目の場合のみ特殊な処理を行う。
組み合わせた結果
これらを組み合わせるとこんなことができる。
 |
|---|
この例では指定した年の前後５年をforループで表示し、指定年だけtrタグのクラスを変更することで背景色を変更している。
まとめ
今回はFlaskでforループを使ってtableを表示する方法について紹介した。
FlaskのHTMLでは２重の中括弧の中に変数名を指定して {{ 変数名 }} と記載することでpythonからデータを受け取ることができる。
そして {% for row in 変数名 %} とすることで複数のデータを持った変数を１つ１つ要素に分解して、{% endfor %} との間で要素の数だけ処理を実行することができる。
なので以下のように記載することで、複数行のテーブルを表示することができる。
<table>
{% for 要素 in 変数名 %}
<tr>
<td>{{ 要素 }}</td>
</tr>
{% endfor %}
</table>
他にもエックスサーバーにFlaskを設定する方法や、レスポンシブCSSを設定する方法についての記事もあるので、動的なWEBサイトを作る対場合は見ておくといいかも知れない。
