FlaskはJinjaというテンプレートエンジンを利用している。
Jinjaを用いるとHTMLのコード上に、Pythonのコードを記述して、
- Viewから渡された値の表示
- for, ifでのループや分岐処理の実行
- コメント文の表示
などを行うことができる。
値の表示は、こちらの記事で記述したが、ここでは、for文, if文、コメント文の書き方を見ていく。
テンプレートでfor文を利用する
テンプレートでfor文を利用するには、以下のように記述すればよい
{% for ○○ %}
ループ処理
{% endfor %}
ループ処理
{% endfor %}
○○の中には、自分がループさせたい内容を書く。
以下に、Flaskのループについて色んなやり方を記述した。
Example
- リスト型、タプル型のループ
{% for fruit in fruits %} <# fruitsをループさせる #>
<p>{{ fruit }}</p><# ループして取り出した値を表示(fruitsの中身がapple, lemon, bananaの場合、apple, lemon, bananaそれぞれ表示) #>
{% endfor %}
<p>{{ fruit }}</p><# ループして取り出した値を表示(fruitsの中身がapple, lemon, bananaの場合、apple, lemon, bananaそれぞれ表示) #>
{% endfor %}
- 辞書型のループ
{% for key in user %} <# userが辞書型の場合、辞書のキーが取り出されてkeyに格納される #>
<p>{{ key }}: {{ user[key] }}</p> <# キーの値とキーを元に辞書から取り出した値が表示される #>
{% endfor %}
<p>{{ key }}: {{ user[key] }}</p> <# キーの値とキーを元に辞書から取り出した値が表示される #>
{% endfor %}
- 辞書型のitems()を利用して、キーと値を同時に取り出す。
{% for key, value in user.items() %}<# items()を利用すると、キーと値をそれぞれ取り出して、1つ目の変数(key)、2つ目の変数(value)に入れることができる #>
<p>{{ key }}: {{ value }}</p>
{% endfor %}
<p>{{ key }}: {{ value }}</p>
{% endfor %}
テンプレートでif文を利用する
テンプレート内でif文を利用するには、以下のように記述すればよい。
{% if ○○ %}
:
{% elif ×× %}
:
{% else %}
:
{% endif %}
:
{% elif ×× %}
:
{% else %}
:
{% endif %}
○○、××には、ifで判定したい条件式を記述する。
Example
- ifで条件を記述する。
{% if color == 'red' %}<# colorがredかどうか #>
<p>colorはredです</p>
{% elif color == 'blue' %}
<p>colorはblueです</p>
{% elif color == 'yellow' %}
<p>colorはyellowです</p>
{% else %}
<p>colorはその他の色です</p>
{% endif %}
<p>colorはredです</p>
{% elif color == 'blue' %}
<p>colorはblueです</p>
{% elif color == 'yellow' %}
<p>colorはyellowです</p>
{% else %}
<p>colorはその他の色です</p>
{% endif %}
テンプレートの条件式に記述する内容には、以下のようなものがある。
・テンプレートの条件式
| 式 | 意味 |
|---|---|
| == | 左辺と右辺が等しいか |
| != | 左辺と右辺が等しくないか |
| < | 左辺が右辺より小さい |
| <= | 左辺は右辺以下 |
| > | 左辺が右辺より大きい |
| >= | 左辺は右辺以上 |
| in | 右辺がリストやタプル、辞書などで左辺の値が含まれる |
| not in | 右辺がリストやタプル、辞書などで左辺の値が含まれない |
コメント文の書き方
Flaskのテンプレートでコメント文を書くには、以下のように{# ・・・ #}で囲えばよい。
Example
- コメントの書き方(１行)
<h1>{{ color }}</h1>{# ここは実行されない #}←{#から#}までがコメント
- コメントの書き方(複数行)
<h1>{{ color }}</h1>
{#
ここからは
何行書いても
コメントで
実行されない
#}
{#
ここからは
何行書いても
コメントで
実行されない
#}
以上、Flaskのテンプレートの利用方法の一つ目として、for文の書き方、if文の書き方、コメント文の書き方について説明しました。