こんにちは！Flask学習3日目です。
昨日はBlueprintを使ってアプリケーションの構造を整理する方法を学びました。
今日は、FlaskでHTMLを表示するための重要な要素、テンプレートエンジン「Jinja2」について学習を進めます！
…が！正直に白状します。
この分野、めちゃくちゃ苦手かもしれない…！
HTMLやCSS、JavaScriptといったフロントエンド周りの知識がまだまだ足りない私にとって、Jinja2のテンプレート構文は、まるで新しいプログラミング言語のように感じられます…（震え）
というわけで、今回は完璧な解説！というよりは、Jinja2について調べたこと、特に「これは便利！」と思った機能について、自分用のメモとして残していくスタイルで進めたいと思います。
（もし、同じようにJinja2に苦手意識を持っている方がいたら、一緒に頑張りましょう…！）
1. Jinja2とは？ サーバーサイドでHTMLを作る魔法！
まず、Jinja2が何者なのか、基本的なところから押さえておきましょう。
Jinja2は、Pythonで使われるテンプレートエンジンの一つです。
テンプレートエンジンとは、簡単に言うと、**雛形となるHTMLファイル (テンプレート) に、プログラム側で用意したデータを流し込み、最終的なHTMLを動的に生成する**ための仕組みです。
これは、サーバーサイドレンダリング (SSR) と呼ばれる技術の一つで、サーバー側でHTMLを完成させてから、ユーザーのブラウザに送信します。
私が驚いたのは、これまでJavaScriptの領域だと思っていたような「動的なWebページ作成」の一部を、Pythonのコードを使って実現できるという点です。
もちろん、複雑な動きやリアルタイムな更新にはJavaScriptが必要になりますが、Pythonだけで完結できる範囲が広がるのは魅力的ですね。
2. 感動！テンプレート継承でHTMLを効率化！
Jinja2の様々な機能の中で、私が特に「これは便利！」と感動したのが、テンプレート継承の機能です。
Webサイトを作っていると、ヘッダーやフッター、サイドバーなど、全てのページで共通して表示したい部分がありますよね？
これまでは、全てのHTMLファイルに同じコードをコピペしていたのですが、Jinja2の継承を使えば、もっとスマートに管理できます！
ベースとなるHTML (base.html)
まず、サイト全体の共通レイアウトとなる「親テンプレート」を作成します。
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}デフォルトタイトル{% endblock %}</title>
<!-- ここに共通のCSSやメタタグなどを記述 -->
</head>
<body>
<header>
<h1>共通ヘッダー</h1>
<nav>共通ナビゲーション</nav>
</header>
<main>
{% block content %}
<!-- ここに各ページの固有コンテンツが入る -->
{% endblock %}
</main>
<footer>
<p>共通フッター</p>
</footer>
<!-- ここに共通のJavaScriptなどを記述 -->
</body>
</html>
ポイントは、{% block title %}...{% endblock %} と {% block content %}...{% endblock %} の部分です。
これは「ブロック」と呼ばれる領域で、後で個別のページ (子テンプレート) で、この部分を上書きできるようになります。
個別のページ (page.html)
次に、特定のページ用の「子テンプレート」を作成します。
{% extends "base.html" %} {# 親テンプレートを指定 #}
{% block title %}特定ページのタイトル{% endblock %} {# titleブロックを上書き #}
{% block content %} {# contentブロックを上書き #}
<h1>このページの内容</h1>
<p>ここに特定ページの内容を書きます。</p>
<p>共通のヘッダーとフッターは自動で表示されます！</p>
{% endblock %}
重要なポイント:
{% extends "base.html" %}: 最初にこの記述をすることで、base.htmlを親テンプレートとして継承することを宣言します。{% block ブロック名 %} ... {% endblock %}: 親テンプレートで定義されたブロックを、この内容で上書きします。
この page.html をFlaskからレンダリングすると、base.html の構造を引き継ぎつつ、title と content のブロックが page.html の内容で置き換えられた、完全なHTMLが出力されます。
つまり、<head> や <body>、共通のヘッダー・フッターなどを、各ページで何度も書く必要がなくなるんです！
これは、コードの重複を減らし (DRY原則!)、修正が必要になった時も base.html を編集するだけで済むので、めちゃくちゃ便利ですよね！
3. まだまだある！Jinja2の機能たち
テンプレート継承以外にも、Jinja2には便利な機能がたくさんあります。
- 変数表示:
{{ 変数名 }}のように書くことで、Python側から渡された変数の値をHTMLに埋め込めます。 - 制御構文:
{% if 条件 %}...{% else %}...{% endif %}や{% for 要素 in リスト %}...{% endfor %}のように、if文やforループを使うこともできます。
これらの機能を使いこなせば、より動的で複雑なHTMLを、サーバーサイド (Python) で効率的に生成できるようになります。
4. ひとまず…（心の声）
今回は、Jinja2の特に便利だと感じた「テンプレート継承」を中心に見てきました。
…が、正直なところ、まだまだJinja2の全体像は掴めていません！
まるで新しい言語を学んでいるような感覚です…。（HTML自体もマスターしていないのに…！）
とりあえず今は、AI (Gemini) が生成してくれたサンプルコードのHTMLファイルと、それに対応するPythonファイル (Flaskのルート関数など) を見比べながら、「このJinja2の記述は、Python側でどんな処理をしているんだろう？」と、一つずつ解読していく作業を続けています。
時間はかかりそうですが、Jinja2を使いこなせれば、FlaskでのWebアプリケーション開発が格段に楽になるはず…！
苦手意識に負けず、地道に学習を進めていこうと思います。（これは大変だ…）
メモ
{{}}
表示したいもの。
{%%}
処理したいもの
{##}
コメント