Flask（Part.3）｜ 【テンプレート（Jinja2）の利用】
目標
- Flaskのテンプレート（Jinja2）の利用方法を理解する。
Jinja2
Jinja2の概要
Jinja2はFlaskで利用できるテンプレートエンジンです。Flaskをインストールするだけで利用ができます（Flaskの標準テンプレートエンジン）。HTMLやXMLなどいろいろなマークアップ文書を生成することができます。
Jinja2はHTMLファイルの中でpythonの式に似た記述を利用し、テンプレート内に値を埋め込んだり、タグを自動生成するのに利用します。
Jinja2の基本
Jinja2の基本記述パターンには変数を扱う {{}} や ブロックを扱う {% %} があります。
| 用途 | 記述方法 |
| 変数の値を表示する。 | {{ 変数 }} |
| 辞書の値を表示する。 | {{ 辞書.key名 }} または {{ 辞書[key名] }} |
| 条件分岐 | {% if 条件１ %} 条件１がTrueの時の処理 {% elif 条件２ %} 条件２がTrueの時の処理 {% else %} その他の時の処理 {% endif %} |
| 繰り返し | {% for value in iterableObj %} <li>{{ value }}</li> {% endfor %} |
| 共通テンプレートの読み込み (親テンプレート) 親テンプレートではHTMLを きちんと記述します。 | {% block title %} サイト名 {% endblock %} {% block content %} 子テンプレートを読み込む部分 {% endblock %} |
| 共通テンプレートの読み込み (子テンプレート) | {% extends “base.html” %} {% block title %} 個別タイトル {% endblock %} {% block content %} <p>個別ページのコンテンツ</p> {% endblock %} |
親テンプレート（base.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{% block title %}サイト名{% endblock %}</title>
</head>
<body>
<header>
<h1>共通部分</h1>
</header>
<main>
<!--子テンプレートのコンテンツを読み込む部分 -->
{% block content %}
{% endblock %}
</main>
</body>
</html>子テンプレート
{% extends "base.html" %}
{% block title %}
個別タイトル
{% endblock %}
{% block content %}
<p>個別ページのコンテンツ</p>
{% endblock %}Jinja2の利用
ここでは、miniappアプリに小規模商店の在庫管理の機能を作成します。Part.3ではこのうち、「商品一覧」の表示部分を作成します。
ファイルの準備
静的ファイルを格納するstaticディレクトリを準備し、その中に「css」ディレクトリを作成し、更に、その中に「style.css」ファイルを配置します。
miniappディレクトリに「static/css」ディレクトリを作成します。
cssディレクトリの中にstyle.cssファイルを作成します。
テンプレートファイルを格納するtemplatesディレクトリ（sの付け忘れに注意）を準備し、中に「products.html」ファイルを作成します。
miniappディレクトリに「templates」ディレクトリを作成します。
templatesディレクトリの中に「products.html」を作成します。
app.pyファイルを次のように編集します。
from flask import Flask, render_template
app = Flask(__name__)
# 商品リスト
products = [
{"id": 1, "name": "オレンジジュース", "price": 140},
{"id": 2, "name": "アップルジュース", "price": 150},
{"id": 3, "name": "牛乳", "price": 180},
]
@app.route("/")
def index():
return "Top page"
@app.route("/products")
def product_list():
return render_template("products.html", products=products)
if __name__ == "__main__":
app.run(debug=True)
render_template関数
render_template関数は引数にテンプレートと埋め込みたいデータ（変数など）をキーワード引数で渡すことで、両者が合成されたテンプレートを生成することができます。このことをレンダリングといいます。
文法：render_template(‘テンプレート名’, キーワード引数)
例：render_template(‘products.html’, products=products)
products.htmlの編集
products.htmlを次のように編集します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品一覧</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<!--<script src="{{ url_for('static', filename='js/script.js') }}" defer></script>-->
</head>
<body>
<h1>商品一覧</h1>
<ul>
{% for product in products %}
<li>{{ product.name }} : ¥{{ "{:,}".format(product.price) }}</li>
{% endfor %}
</ul>
</body>
</html>url_for関数
url_for関数を利用するとFlaskのルート（エンドポイント（関数名））に対応するURLを生成したり、クエリパラメータを追加することができます。また、静的ファイルの取得にも利用されます。
例１
@app.route(‘/url/<value>’)
def 関数名(value):
pass
url_for(‘関数名’, value=’something’)
→/url/something
例２
@app.route(‘/product’)
def product(id=None):
pass
url_for(‘product’, id=2)
→/product?id=2
例３
url_for(‘static’, filename=’style.css’)
→ /static/style.css
スタイルシートの準備
style.cssファイルを次のように編集します。
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f8f8f8;
}
h1 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #fff;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}アプリケーションの起動
環境変数を有効化して「flask run」コマンドを実行します。
# 仮想環境を有効化します。
C:\Users\user\Desktop\FlaskProj>.venv\Scripts\activate
# 仮想環境が有効化されます。
(venv) C:\Users\user\Desktop\FlaskProj>
# サーバーを起動します。
(venv) C:\Users\user\Desktop\FlaskProj>flask runブラウザで http://127.0.0.1:5000/productsにアクセスします。
今回は以上になります。
ブックマークのすすめ
「ほわほわぶろぐ」を常に検索するのが面倒だという方はブックマークをお勧めします。ブックマークの設定は別記事にて掲載しています。
