Flask_Vol4：テンプレートとJinja2

2025-02-24

URLをコピーしました！

Flaskで動的HTMLを生成しよう：テンプレートエンジンJinja2の基本

はじめに

前回のFlask_Vol3では、ルーティングの基本を学び、文字列だけを返す簡単なアプリを作成しました。今回は、WebサイトらしいHTMLページを動的に生成するために、Flaskが標準で利用しているテンプレートエンジン「Jinja2」を学びましょう。

Jinja2を使うことで、Pythonの変数やリストをHTMLテンプレートに挿入し、条件分岐やループ処理など、柔軟な動的コンテンツを簡単に扱えるようになります。

1. テンプレートディレクトリの配置

Flaskでは、デフォルトでtemplates というフォルダにHTMLファイルを配置する習慣があります。たとえば、以下のようなディレクトリ構成を想定してください。


flask_project/
  ├─ app.py
  ├─ venv/
  └─ templates/
       └─ index.html

app.py : Flaskアプリのメインコード
templates/ : HTMLテンプレートを配置するディレクトリ
index.html : 今回の演習で使用するテンプレートファイル

このように置くことで、Flask側の render_template("index.html") 呼び出しがスムーズに行えます。

2. テンプレートのレンダリング

📝`render_template()` の基本的な使い方

Flaskアプリ内でテンプレートを呼び出すには、flask モジュールからインポートできる**render_template** 関数を使います。

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

render_template("index.html") と書くと、templates/index.html を探して、その内容をブラウザに返します。
今回は index.html のみですが、別のファイルを作れば render_template("about.html") なども可能です。

📝テンプレートへ変数を渡す

たとえば、サーバサイドで作成したデータをテンプレートへ渡したい場合、以下のようにキーワード引数として指定します。

@app.route("/hello")
def hello():
    name = "Alice"
    return render_template("hello.html", user_name=name)

ここで user_name は、テンプレート側で使われる変数名です。Flaskはこの「渡されたデータ」をテンプレートに挿入して表示できます。

3. Jinja2の文法

FlaskのテンプレートはJinja2というテンプレートエンジンで書かれています。主な文法を紹介します。

📝3.1 変数の埋め込み


{{ 変数名 }}

を使うと、Python側から渡された値をHTMLに表示できます。

💡例）Hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Page</title>
</head>
<body>
  <h1>こんにちは、{{ user_name }}さん！</h1>
</body>
</html>

Flaskで render_template("hello.html", user_name="Alice") を呼び出すと、

こんにちは、Aliceさん！ と表示されます。

📝3.2 制御構文（if文、for文など）

💡if構文

{% if user_name %}
  <p>{{ user_name }} さんがログイン中です。</p>
{% else %}
  <p>ゲストユーザーです。</p>
{% endif %}

{% if %} と {% endif %} の間に条件分岐で表示するHTMLを置けます。
Pythonの if と同じ要領で書くので分かりやすいです。

💡for構文

<ul>
{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}
</ul>

items がリストの場合、リストの要素を1つずつ <li> タグで表示します。
Pythonの for と同じイメージで書けますが、コロン(:)の代わりに {% endfor %} でブロックを閉じます。

💡コメント

Jinja2内でコメントを入れたいときは、 {# ... #} で囲みます。

4. 簡単なサンプルを作ってみよう

📝4.1 テンプレート（`index.html`）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Flask with Jinja2</title>
</head>
<body>
  <h1>リストの内容を表示します</h1>
  <p>ユーザー名： {{ username }}</p>

  {% if usernames_list %}
    <ul>
      {% for name in usernames_list %}
        <li>{{ name }}</li>
      {% endfor %}
    </ul>
  {% else %}
    <p>表示できるユーザー名がありません。</p>
  {% endif %}
</body>
</html>

このテンプレートでは、以下の変数を使っています。

username : 単独のユーザー名
usernames_list : 複数のユーザー名を格納したリスト

📝4.2 Flask側のコード（`app.py`）

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    username = "Alice"
    user_list = ["Bob", "Charlie", "Diana"]

    return render_template(
        "index.html",
        username=username,
        usernames_list=user_list
    )

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

このように render_template に対してキーワード引数を付けることで、テンプレートファイルに必要な変数を渡します。

📝4.3 動作確認

仮想環境を有効にして、ターミナルで python app.py を実行（venv\Scripts\activate または.\venv\Scripts\Activate.ps1など）
ブラウザで http://127.0.0.1:5000/ にアクセス
「リストの内容を表示します」という見出しがあり、ユーザー名「Alice」とリストの各要素（Bob, Charlie, Diana）が <li> タグで表示されていれば成功

まとめ

📝ゴール

FlaskとHTMLテンプレートを連携し、動的なページを作成できる
- render_template() を使って templates フォルダにあるHTMLファイルを返し、ブラウザに表示させる流れを体験しました。
- HTMLに埋め込む形でデータを渡せるので、より「Webアプリケーションらしい」構造になります。
変数やリストをテンプレートに渡す方法を理解する
- 変数埋め込み {{ variable }}、制御構文 {% if %}, {% for %} など、Jinja2の基本を押さえました。
- これを使って、条件分岐やループ表示など、豊富な表現が可能になります。