はじめに
Flaskに付随するテンプレートエンジン、Jinjaを使用してhtmlにif文やfor文を記載する方法について
解説するよ。
Jinjaの名前の由来は神社から来てるみたいだにゃ。
template→temple→神社→Jinjaという流れだにゃ。
Flask学習におすすめの本を紹介します。
⇨【Python】Flask入門におすすめの本 3選
ファイル構成
if文やfor文を使用するには{% %}ステートメントで記載を行います。
python側から渡された変数を、html側で内容の判定を行い、
htmlの表示内容を切り替えることができるようになります。
下記のようなファイル構成を準備しましょう。
.
├── app.py
└── templates
└── index.htmlif文の記載方法
早速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という変数があり、その中身が１か、２か、それ以外かで表示する内容を切り替えるようにしています。
１だったら、青色の背景色に、白色の文字色で「青色」と表示します。
２だったら、黄色の背景色に、黒色の文字色で「黄色」と表示します。
それ以外は、赤色の背景色に、白色の文字色で「赤色」と表示します。
例では、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という変数に１をセットし、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という変数名にしておきながら、２つも野菜が混じっているにゃ。
辞書型の記載について
リストの次は辞書型の記載方法について見てみよう！
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入門まとめページ
