Python

Flaskでforループを使ってtableを表示する方法


Flaskでforループを使ってtableを表示させたい


PythonのWEBアプリケーションフレームワークであるFlask。

Flaskを使うことで動的なWEBサイトを作ることができる。


動的に処理させたい内容の例としてテーブル(table)がある。

tableは表形式でデータを表現するためのHTMLタグで以下のような表現ができる。

ヘッダーヘッダー
データデータ
データデータ
データデータ


しかし表示させるデータの個数がいつも同じとは限らない。

1個のときもあるかもしれないし10個のときもあるかもしれない。

こんなときFlaskではどのようにHTMLを組めばよいのか

そこで今回はFlaskでforループを使ってtableを表示する方法について解説する。

この記事を書いている人


からさん
システムエンジニア、AIエンジニアと、IT業界で10年以上働いている中堅。PythonとSQLが得意。ジェネラリストタイプなのでHTMLやCSSもそこそこわかる

記事を読むメリット

Flaskでforループを使ってtableを表示する方法がわかる


FlaskでHTMLに変数を渡す方法


FlaskでテンプレートのHTMLに変数を渡すには以下のように書く。

@app.route('/speech_bubble/')
def speech_bubble():
    html = render_template('speech_bubble.html', title="吹き出しツール「フキツイ」")
    return html


上の2行はURLにアクセスした際にどの処理を実行するかの指定である。

3行目の render_template() の最初の引数で使用するHTMLを指定して、後ろの title=... の部分で変数を渡している。

この場合はtitleという名前で変数を渡しているが、任意の名前で渡すことができる。



FlaskでHTMLで変数を受け取る方法


ではpyファイルから渡された変数をテンプレートView用のHTMLでどのように受け取るのか。

受け取るときは以下のような書き方になる。

<h1 class="h3 mb-2 text-gray-800">{{ title }}</h1>


2重の中括弧の中に変数名を指定して {{ 変数名 }} と記載する。



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 %} の複数のデータ1つ1つに対してループの中の処理が実行される。

row in calendar_list の宣言で1つ1つのデータを row という変数に渡して trタグの中で rowの中の各要素を表示している。



forループの何回目の処理かindexを取得する方法


ループ中の特定の回だけ特殊な処理をしたいこともあるだろう。

そんなときは以下の処理でループのindexを取得する。

{% if loop.index==6 %}
特殊な処理
{% else %}
通常処理
{% endif %}

この場合はループが6回目の場合のみ特殊な処理を行う。



組み合わせた結果

これらを組み合わせるとこんなことができる。


令和2年は西暦何年? - 年号カレンダー


この例では指定した年の前後5年をforループで表示し、指定年だけtrタグのクラスを変更することで背景色を変更している



まとめ


今回はFlaskでforループを使ってtableを表示する方法について紹介した。

FlaskのHTMLでは2重の中括弧の中に変数名を指定して {{ 変数名 }} と記載することでpythonからデータを受け取ることができる。

そして {% for row in 変数名 %} とすることで複数のデータを持った変数を1つ1つ要素に分解して、{% endfor %} との間で要素の数だけ処理を実行することができる。

なので以下のように記載することで、複数行のテーブルを表示することができる。

<table>
{% for 要素 in 変数名 %}
<tr>
<td>{{ 要素 }}</td>
</tr>
{% endfor %}
</table>


WEBアプリケーションフレームワークがよくわからない場合は、本を買ってチュートリアル通りに作ってみると理解が深まりますよ
からさん

ひとつフレームワークを理解すると、次から別のフレームワークを学ぶときも理解が早くなります
からさん


他にもエックスサーバーにFlaskを設定する方法や、レスポンシブCSSを設定する方法についての記事もあるので、動的なWEBサイトを作る対場合は見ておくといいかも知れない。

役に立ったらシェアしてくれると励みになります。

にほんブログ村 IT技術ブログへ

-Python
-

Translate »

© 2021 ITips