Back to Blog

Jinja2のfor文の使い方解説！【Flask,Python】

flask

2024年7月4日

【Pythonの基礎、アルゴリズム、ソフトウェアアーキテクチャの学習はこちら】

こんにちは！

今回の記事では、Jinja2のfor文の使い方について詳しく解説します。

FlaskはPythonで書かれた軽量なWebフレームワークで、簡単にWebアプリケーションを構築することができます。

FlaskのテンプレートエンジンであるJinja2は、HTMLの中に処理を埋め込むことができます。その中でも、繰り返し処理を行うfor文は非常に重要な機能です。

本記事では、FlaskとJinja2を使ったfor文の基本的な使い方から応用例までを詳しく解説します。

Jinja2の基本的な使い方

FlaskとJinja2の基本的な使い方を簡単におさらいします。

Flaskアプリケーションを作成し、テンプレートをレンダリングする流れを確認しましょう。

まずは、Flaskのインストールを行います。

pip install Flask

次に、Flaskのアプリケーションのコード(app.py)を以下のように記述します。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', items=['Apple', 'Banana', 'Cherry'])

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

次にJinja2のテンプレートを記述するファイルを作成します。ファイルは以下のようなディレクトリ構造で、templatesディレクトリ配下に作成します。

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

そして、templates/index.htmlには以下のように記述します。

<!DOCTYPE html>
<html>
<body>
    <p>{{ items }}</p>
</body>
</html>

{{ }}を使ってPythonの変数をHTMLに埋め込んでいます。これがJinja2の基本的な使い方です。

上記の場合、itemsの中身の[‘Apple’, ‘Banana’, ‘Cherry’]がそのまま表示されてしまいます。もれを繰り返し処理を使って、一つずつ取り出して処理を行います。

Jinja2の基本的な使い方については、以下の記事で詳しく解説しています。

【参考】Jinja2とは何か？Pythonのテンプレートエンジンについて解説

Jinja2のfor文の基本

Jinja2のfor文は、Pythonのfor文と似た構文で、コレクションの各要素を繰り返し処理するために使用されます。基本的な構文は以下の通りです。

{% for [変数] in [シーケンス] %}
    <!-- 繰り返し処理するHTML -->
{% endfor %}

シーケンスとは、プログラミングにおいて順序付けられた要素の集合のことです。Pythonでは、リスト（list）、タプル（tuple）、文字列（string）などがシーケンスとして扱われます。

具体的な使用例

例えば、リストの各要素を順番に表示する場合は以下のようになります。itemsリストの各要素が順番に表示されます。

<!DOCTYPE html>
<html>
<body>
    <h1>Item List</h1>
    <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

インデックスの取得

for文の中でインデックスを取得したい場合は、loop.indexやloop.index0などの特殊変数を使用します。インデックスとは、シーケンス（リスト、タプル、文字列など）の各要素に対して割り当てられた位置情報を指します。1つ目のアイテムから0、1、２、・・・と順番に割り当てられます。

<!DOCTYPE html>
<html>
<body>
    <h1>Item List</h1>
    <ul>
        {% for item in items %}
            <li>{{ loop.index }}. {{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

breakとcontinue

Jinja2では、ループを制御するためにbreakとcontinueを使用することができます。

これらのキーワードを使うと、ループの繰り返し処理をより細かく制御することができます。

breakはループを完全に終了し、continueは現在の繰り返し処理をスキップして次の繰り返しに進みます。それぞれの使い方について解説します。

break

breakは、ループを途中で終了させたい場合に使用します。

例えば、特定の条件が満たされたときにループを終了する場合に使用します。

<ul>
   {% for item in items %}
      {% if item == 'Banana' %}
         {% break %}
      {% endif %}
      <li>{{ item }}</li>
    {% endfor %}
</ul>

リスト内のアイテムが”Banana”に達した時点でbreakが実行され、それ以降のアイテムは表示されません。

continue

continueは、現在の繰り返し処理をスキップして次の繰り返しに進みたい場合に使用します。

例えば、特定の条件が満たされた場合にそのアイテムをスキップする場合に使用します。

<ul>
  {% for item in items %}
     {% if item == 'Banana' %}
        {% continue %}
     {% endif %}
     <li>{{ item }}</li>
  {% endfor %}
</ul>

リスト内のアイテムが”Banana”のときにcontinueが実行され、そのアイテムはスキップされます。

タプルで繰り返し処理

次はタプル形式のものを繰り返し処理してみましょう。

app.pyを以下のように修正します。

@app.route('/')
def home():
    coordinates = (10.0, 20.0)
    return render_template('index.html', coordinates=coordinates)

続いて、index.htmlのfor文は以下のように記述します。

<ul>
  {% for coordinate in coordinates %}
     <li>{{ coordinate }}</li>
  {% endfor %}
</ul>

タプルの場合も基本的な使い方は変わりません。

辞書で繰り返し処理

続いて、辞書型でのループ処理の方法です。辞書型はキーと値のデータがあります。

@app.route('/')
def home():
    user = {
        'name': 'John',
        'age': 30,
        'email': 'john@example.com'
    }
    return render_template('index.html', user=user)

続いて、index.htmlのfor文は以下のように記述します。

<ul>
  {% for key, value in user.items() %}
     <li>{{ key }}: {{ value }}</li>
  {% endfor %}
</ul>

userの各キーと値のペアをループしてHTMLに表示しています。

まとめ

今回の記事では、Jinja2のfor文の使い方について詳しく解説しました。

Jinja2のfor文は、リストや辞書型などのデータを繰り返し処理することができます。特にデータベースのデータをHTMLに表示する時に使用します。

これらのテクニックを駆使することで、より高度なWebアプリケーションを構築することができます。

FlaskとJinja2を使った繰り返し処理の使い方をマスターして、さらに高度なWeb開発に挑戦してみましょう。

ここまでお読みいただきありがとうございました。

flask Jinja2 フロントエンド

Pythonの基礎から応用まで学べる
Python WebAcademy

Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。

Pythonの学習を始める

インフラの学習はInfraAcademy