jinja2の基本構文(値の取得、分岐構文「if,elif,else」、ループ構文「for」)

jinja2はPython用のテンプレートエンジンで、FlaskでWEBアプリケーションを作成作成する際に非常に有益なものです。

jinja2には独自の構文の記述方法があり、利用するにはその方法を覚える必要があります。

今回はこのjinja2の基本構文をまとめておきます。

スポンサーリンク

値の取得

jinja2で値を取得するには「{{ }}」で囲んでその変数名を指定します。

from flask import Flask
from flask import render_template

app = Flask( __name__ )

@app.route( "/", methods=[ "POST", "GET" ])
def test_main_py():
    return render_template( "main.html", val="1" )

if __name__ == '__main__':
    app.run( debug=True, host="0.0.0.0", port=8888, threaded=True )

HTMLテンプレートには「{{ }}」で囲んだ値を記述します。

<!doctype html>
<html>
    <head>
        <title>jinja2Test</title>
    </head>
    <body>
        <p>valは{{val}}です。</p>
    </body>

実行結果は

valは1です。

になります。

値の保存

jinja2で値を保存するには「{% set 変数名=値 %}」で行います。

from flask import Flask
from flask import render_template

app = Flask( __name__ )

@app.route( "/", methods=[ "POST", "GET" ])
def test_main_py():
    return render_template( "main.html" )

if __name__ == '__main__':
    app.run( debug=True, host="0.0.0.0", port=8888, threaded=True )

HTMLテンプレートは以下ののようになります。

<!doctype html>
<html>
    <head>
        <title>jinja2Test</title>
    </head>
    <body>
        {% set cnt = 10 %}
        <p>cntは{{ cnt }}です。</p>
    </body>
</html>

実行結果は

cntは10です。

になります。

条件分岐-if、elif、else構文

jinja2で処理の条件分岐を行うには「if文」「elif文」「else文」を利用します。

from flask import Flask
from flask import render_template

app = Flask( __name__ )

@app.route( "/", methods=[ "POST", "GET" ])
def test_main_py():
    return render_template( "main.html", val="1" )

if __name__ == '__main__':
    app.run( debug=True, host="0.0.0.0", port=8888, threaded=True )

HTMLテンプレートには「{% if 条件式 %}」「{% elif 条件式 %}」「{% else %}」と「{% endif %}」で文を囲んで記述します。

<!doctype html>
<html>
    <head>
        <title>jinja2Test</title>
    </head>
    <body>
        {% if val == "1" %}
            <p>if val == "1"を通過</p>
        {% elif val == "2" %}
            <p>elif val == "2"を通過</p>
        {% else %}
            <p>elseを通過</p>
        {% endif %}
    </body>
</html>

実行結果は

if val == "1"を通過

になります。

ループ-for構文

jinja2でループ処理の条件分岐を行うには「for文」を利用します。

単純なforループ

単純にある回数を繰り返す場合は「for文」のループ条件に「range」を利用するのが良いでしょう。

from flask import Flask
from flask import render_template

app = Flask( __name__ )

@app.route( "/", methods=[ "POST", "GET" ])
def test_main_py():
    return render_template( "main.html" )

if __name__ == '__main__':
    app.run( debug=True, host="0.0.0.0", port=8888, threaded=True )

HTMLテンプレートには「{% for カウンター変数 in ループ条件 %}」と「{% endfor %}」で文を囲んで記述します。

<!doctype html>
<html>
    <head>
        <title>jinja2Test</title>
    </head>
    <body>
        {% for cnt in range( 5 ) %}
             <p>cnt={{ cnt }}</p>
        {% endfor %}
    </body>
</html>

とします。

実行結果は

cnt=0

cnt=1

cnt=2

cnt=3

cnt=4

になります。

配列(list)を処理するforループ

配列(list)を処理する場合は「for文」のループ条件に「range」を利用し、「range」には配列の長さを「length」フィルターを使って渡すと上手く行きます。

from flask import Flask
from flask import render_template

app = Flask( __name__ )

@app.route( "/", methods=[ "POST", "GET" ])
def test_main_py():
    list_data = [ "1", "a", "2", "b", "3", "c" ]
    
    return render_template( "main.html", list_data=list_data )

if __name__ == '__main__':
    app.run( debug=True, host="0.0.0.0", port=8888, threaded=True )

HTMLテンプレートでは「length」フィルターを利用します。

<!doctype html>
<html>
    <head>
        <title>jinja2Test</title>
    </head>
    <body>
        {% for cnt in range( list_data | length )  %}
             <p>list_data[{{ cnt }}]={{ list_data[ cnt ] }}</p>
        {% endfor %}
    </body>
</html>

実行結果は

list_data[0]=1

list_data[1]=a

list_data[2]=2

list_data[3]=b

list_data[4]=3

list_data[5]=c

になります。

辞書型(dict)を処理するforループ

辞書型(dict)を処理する場合は「for文」のループ条件に「辞書型の変数」を指定して行います。

from flask import Flask
from flask import render_template

app = Flask( __name__ )

@app.route( "/", methods=[ "POST", "GET" ])
def test_main_py():
    dict_data = { "1":"a", "2":"b", "3":"c" }
    
    return render_template( "main.html", dict_data=dict_data )

if __name__ == '__main__':
    app.run( debug=True, host="0.0.0.0", port=8888, threaded=True )

HTMLテンプレートでは辞書型(dict)の変数名をそのまま利用します。

<!doctype html>
<html>
    <head>
        <title>jinja2Test</title>
    </head>
    <body>
        {% for key in dict_data %}
             <p>dict_data[{{ key }}]={{ dict_data[ key ] }}</p>
        {% endfor %}
    </body>
</html>

実行結果は

dict_data[1]=a

dict_data[2]=b

dict_data[3]=c

になります。

まとめ

jinja2はPythonでWEBアプリを生成する際に非常に有益なHTMLテンプレートエンジンのうちの1つです。

これを機会にぜひマスターしましょう。

以上、jinja2の基本構文(値の取得、分岐構文「if,elif,else」、ループ構文「for」)でした。

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