【Python】Flask入門 Jinjaを使用してhtml側でif文やfor文を使用する

Flask

はじめに

しげっち
しげっち

Flaskに付随するテンプレートエンジン、Jinjaを使用してhtmlにif文for文を記載する方法について
解説するよ。

にゃーすけ
にゃーすけ

Jinjaの名前の由来は神社から来てるみたいだにゃ。
template→temple→神社→Jinjaという流れだにゃ。

Flask学習におすすめの本を紹介します。
⇨【Python】Flask入門におすすめの本 3選

ファイル構成

if文for文を使用するには{% %}ステートメントで記載を行います。
python側から渡された変数を、html側で内容の判定を行い、
htmlの表示内容を切り替えることができるようになります。

下記のようなファイル構成を準備しましょう。

.
├── app.py
└── templates
    └── index.html

if文の記載方法

しげっち
しげっち

早速if文の記載方法から見ていこう!

if文の記載方法は以下のようになります。

{% if 条件A %}
 〜条件AがTrueの場合の処理〜
{% elif 条件B %}
 〜条件BがTrueの場合の処理〜
{% else %}
 〜条件がFalseの場合の処理〜
{% endif %}

このように{% %}ステートメントの内側にif文を記載する必要があります。

具体的な例を見ていきましょう。
まずは、index.htmlを下記の様に記載します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Flaskのお勉強</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        {% if kubun==1 %}
        <p style="background-color:blue; color:white">青色</p>
        {% elif kubun==2 %}
        <p style="background-color:yellow; color:black">黄色</p>
        {% else %}
        <p style="background-color:RED; color:WHITE">赤色</p>
        {% endif %}
     </body>
</html>

kubunという変数があり、その中身が1か、2か、それ以外かで表示する内容を切り替えるようにしています。

1だったら、青色の背景色に、白色の文字色で「青色」と表示します。
2だったら、黄色の背景色に、黒色の文字色で「黄色」と表示します。
それ以外は、赤色の背景色に、白色の文字色で「赤色」と表示します。

例では、kubunの変数の中身が何であろうと<p>タグが表示されますが、
変数の中身によって、画像を表示したり、リストを表示したり、
表示そのものを無くしたりすることができます。

では、kubunという変数はどこから来たのでしょうか?
それは、python側から渡すようにします。
app.pyを下記のように記載しましょう。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    color_no = 1
    return render_template('index.html', kubun=color_no)

if __name__ == '__main__':
    app.debug = True
    app.run(host='localhost')

color_noという変数に1をセットし、render_templateの引数でkubunに渡しています。
この状態でhtmlを表示すると、青色の背景色に、白色の文字色で「青色」と表示されるはずです。

for文の記載方法

にゃーすけ
にゃーすけ

次はfor文の記載方法について見ていくにゃ!

for文の記載方法は以下のようになります。

{% for 変数 in リスト %}
ループ処理
{% endfor %}

for文{%%}ステートメントの内側に記載します。

リストや辞書等から一つずつ値を変数にいれて、リストや辞書の内容をすべて取得するまで、繰り返し処理を行います。

まずはリストを用いた具体的な例を見ていきましょう。

リスト型の記載について

for文に使用するリストを準備します。
先程のif文で解説したように、python側から表示したいものを指定しましょう。
表示したいものリスト形式にし、htmlに渡すようにします。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = ['apple', 'orange', 'peach','strawberry','watermelon']
    return render_template('index.html', fruit_basket=data)

if __name__ == '__main__':
    app.debug = True
    app.run(host='localhost')

今回は複数の果物の名前をdataというリストにし、
それをhtml側のfruit_basketという変数に渡しています。

では、html側はfruit_basketの中身をどう処理しているのか見てみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Flaskのお勉強</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        {% for fruits in fruit_basket %}
            <li>{{fruits}}</li>
        {% endfor %}
    </body>
</html>

for文を用いて果物の名前の数だけ<li>タグを作成して、果物の名前をセットしています。
表示結果は下記のようなリスト表示になると思います。

にゃーすけ
にゃーすけ

fruitsという変数名にしておきながら、2つも野菜が混じっているにゃ。

辞書型の記載について

しげっち
しげっち

リストの次は辞書型の記載方法について見てみよう!

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = {1:'apple', 2:'orange', 3:'peach',4:'strawberry',5:'watermelon'}
    return render_template('index.html', fruit_basket=data)

if __name__ == '__main__':
    app.debug = True
    app.run(host='localhost')

先程の果物に番号を振って辞書型にしてhtmlに渡します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Flaskのお勉強</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        {% for fruits in fruit_basket %}
            <li>{{fruits}}番 {{fruit_basket[fruits]}}</li>
        {% endfor %}
    </body>
</html>

先ほどと同様に<li>タグを使用してリスト表示してみましょう。

このような結果になります。

また、辞書型の場合下記のような記載方法もあります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Flaskのお勉強</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        {% for key, value  in fruit_basket.items() %}
            <li>{{key}}番 {{value}}</li>
        {% endfor %}
    </body>
</html>

辞書に入っているキーをそれぞれ変数にセットして繰り返し処理を行う方法です。
どちらも結果は同じです。

まとめ

{% %}を用いてhtml側でif文for文を使用する方法について解説しました。
これを利用することで、python側で処理した結果により、
htmlの内容を自由に書き換える事ができるようになります。

前回はJinjaのマスタッシュ{{ }} について解説しました。

しげっち
しげっち

最後まで見ていただきありがとうございます。

Flask学習におすすめの本を紹介します。
⇨【Python】Flask入門におすすめの本 3選

次回は共通のレイアウトを一箇所にまとめて記載する方法、extends(継承)について説明します。

Flask入門まとめページ

タイトルとURLをコピーしました