Jinja2によるテンプレート
動的なHTMLをレンダリングします
「Jinja2によるテンプレート」はCoddyKit上の無料Python Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはPython Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Python Academyコースには全4レッスンが含まれています。
テンプレートを使う理由
Python の文字列から HTML を返す方法は、すぐに複雑になります。テンプレート を使うと HTML を別ファイルに分離し、レンダリング時にデータを埋め込めます。Flask は Jinja2 エンジンを使用します。
from flask import Flask, render_template
app = Flask(__name__)
# render_template loads a file from the templates/ folder
print('Jinja2 powers Flask templates')templates フォルダー
Flask は、アプリの隣にある templates/ という名前のフォルダーからテンプレートを探します。ファイルの拡張子は通常 .html です。
# project/
# app.py
# templates/
# index.html
print('Templates live in templates/')render_template
render_template('index.html') はテンプレートを読み込み、レンダリングした HTML をレスポンスとして返します。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
print('home renders index.html')データの受け渡し
変数をキーワード引数として渡します。テンプレートでその変数を表示できるようになります。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html', name='Alice')
print('name=Alice is sent to the template')変数の出力
テンプレート内では、{{ name }} で変数を出力します。この二重中括弧は Jinja2 の式構文です。
# index.html
# <h1>Hello, {{ name }}!</h1>
print('Double braces output a value')if 文
Jinja2 の制御文では {% %} を使用します。if ブロックによって、条件に応じてコンテンツを表示できます。
# {% if user %}
# <p>Welcome back!</p>
# {% else %}
# <p>Please log in.</p>
# {% endif %}
print('{% if %} branches the markup')for ループ
{% for item in items %} を使ってリストをループすると、商品一覧などの繰り返し要素をレンダリングできます。
# <ul>
# {% for item in items %}
# <li>{{ item }}</li>
# {% endfor %}
# </ul>
print('{% for %} repeats markup per item')フィルター
パイプを使うと値を変換できます。{{ name|upper }} は値を大文字に変換します。組み込みフィルターには length、default、title があります。
# {{ name|upper }} -> ALICE
# {{ items|length }} -> count
# {{ bio|default('N/A') }}
print('Filters transform values with |')テンプレートの継承
ベーステンプレート は、{% block %} のプレースホルダーを使ってページの骨組みを定義します。子テンプレートは {% extends %} で継承し、各ブロックを埋めます。
# base.html
# <body>{% block content %}{% endblock %}</body>
#
# page.html
# {% extends 'base.html' %}
# {% block content %}<p>Hi</p>{% endblock %}
print('extends + block share a layout')自動エスケープ
Jinja2 は変数内の HTML を自動的にエスケープし、クロスサイトスクリプティングから保護します。<script> のような値は実行されず、テキストとして表示されます。
# If name = '<b>x</b>', {{ name }} renders the literal text
# Auto-escaping is on by default for safety
print('Auto-escaping prevents XSS')url_for によるリンク
テンプレート内でも url_for を呼び出せます。静的ファイルで使うことが多く、たとえば次のように記述します。{{ url_for('static', filename='style.css') }}。
# <link rel='stylesheet'
# href="{{ url_for('static', filename='style.css') }}">
print('url_for works inside templates too')理解度チェック
Jinja2 に関する知識を確認しましょう。
まとめ
Jinja2 のテンプレート機能を学びました。
render_template()はtemplates/からファイルを読み込んでレンダリングします{{ }}は値を出力し、{% %}はifやforを実行します|upperなどのフィルターで値を変換しますextendsとblockでレイアウトを継承できます- 自動エスケープによって XSS を防ぎます
よくある質問
「Jinja2によるテンプレート」レッスンは無料ですか？
はい。「Jinja2によるテンプレート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Python Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Python Academyコースには全4レッスンが含まれています。
「Jinja2によるテンプレート」で何を学びますか？
動的なHTMLをレンダリングします ブラウザで直接実行するハンズオンコードでPython Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Python Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのPython Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Jinja2によるテンプレート」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このPython Academyレッスンでコードを書いて実行できますか？
はい。すべてのPython Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ルートとビュー
- Jinja2によるテンプレート
- フォームとリクエストデータ
- RESTエンドポイントの構築