【Flask】 Jinja2 テンプレートでコンポーネントを効率的に分割する方法

本記事では、Flask アプリケーションの Jinja2 テンプレートエンジンでのテンプレート分割の方法と、その利点について詳しく解説します。

Flask は Python で書かれた軽量なWebフレームワークであり、 Jinja2 はそのテンプレートエンジンとして広く利用されています。

Flask と Jinja2 の組み合わせは、シンプルで柔軟なアプリケーション開発を行う上で、よく採用されると思います。

Webアプリケーション開発において、コードの再利用性と保守性は非常に重要ですよね。

モダンなシステムではフロントエンドを React や Vue.js を用いて実装することが多いですが、軽量で小規模なアプリケーションでは、テンプレートエンジンを使った開発の方が生産性の面で優れている場合も多いです。

Flask フレームワークと Jinja2 テンプレートエンジンを使用する場合、テンプレートを分割してコンポーネント化することで、メンテナンスしやすいシステムにできます。

テンプレート分割の重要性について
Jinja2 でのテンプレート分割方法
1. 1. includeを使用したコンポーネントの分割
2. 2. extendsを使用したレイアウトの継承
動的コンポーネントの作成
Flask でのセットアップ
おわりに

テンプレート分割の重要性について

テンプレートを小さなコンポーネントに分割することには多くのメリットがあります。

コードの再利用性の向上
メンテナンスの容易さ
チーム開発での作業効率の向上
アプリケーションの拡張性の向上

言うまでもないことかもしれませんが、上記の考慮をせずに、画面ごとに HTML を実装していると、後から修正が大変になります。

Jinja2 でのテンプレート分割方法

Jinja2 では、{% include %} と {% extends %} の2つの主要な方法でテンプレートを分割できます。

1. includeを使用したコンポーネントの分割

{% include %} を使用すると、小さなコンポーネントを別のテンプレートファイルに分割し、必要な場所で再利用できます。

例えば、ナビゲーションバーのコンポーネントを作成する場合のコード例を紹介します。

navbar.html として実装するとします。

<!-- templates/components/navbar.html -->
<nav>
    <ul>
        <li><a href="{{ url_for('index') }}">ホーム</a></li>
        <li><a href="{{ url_for('about') }}">概要</a></li>
        <li><a href="{{ url_for('contact') }}">お問合せ</a></li>
    </ul>
</nav>

このコンポーネントを使用する実装は次のようになります。

<!-- templates/layout.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}タイトル{% endblock %}</title>
</head>
<body>
    {% include 'components/navbar.html' %}

    <main>
        {% block content %}
        {% endblock %}
    </main>

</body>
</html>

{% include 'components/navbar.html' %} の記述箇所が、コンポーネントを呼んでいる部分です。

このようにコンポーネント単位で分割しておけば、別の場所でも再利用できますね。

2. extendsを使用したレイアウトの継承

{% extends %} を使用すると、基本レイアウトを定義して、他のページでそれを拡張できます。

<!-- templates/page.html -->
{% extends 'layout.html' %}

{% block title %}タイトル{% endblock %}

{% block content %}
    <h1>コンテンツ</h1>
    <p>Hello World !!!</p>
{% endblock %}

例えば、先ほどの include の例で記載したような、 <!DOCTYPE html> から始めるような HTML 全体の記述は1箇所で済みます。

一般的には、共通スクリプトなどを含んだヘッダー、メニューなどを含んだナビゲーションバー、コンテンツエリア、フッターを定義したテンプレートを base.html や layout.html として作成し、各画面で呼び出す形式を取ることが多いです。

動的コンポーネントの作成

コンポーネントに動的なデータを渡すこともできます。

例えば、再利用可能なカード形式のコンポーネントを以下のように定義しているとします。

<!-- templates/components/card.html -->
<div class="card">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    {% if button_text %}
        <a href="{{ button_url }}" class="button">{{ button_text }}</a>
    {% endif %}
</div>

このコンポーネントは、タイトルやコンテンツ、ボタンのラベルやURLが未定義ですよね。

これを、 include で呼び出す際に、 with でパラメータを渡すことができます。

{% with title="新着情報", content="最新のニュースをチェック", button_text="詳細", button_url=url_for('news') %}
    {% include 'components/card.html' %}
{% endwith %}

この方法であれば、小さなコンポーネントに分割して再利用できるので、コード量がかなり削減できるしメンテナンス性も上がります。

React を使うほどでもないプロジェクトの場合でも、このようにコンポーネント化は意識したいですね。

Flask でのセットアップ

せっかくなので、 Flask アプリケーションで Jinja2 テンプレートを使用するための基本的なセットアップのサンプルコードも紹介します。

from flask import Flask, render_template

app = Flask(__name__)

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

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

render_template で、画面を定義している HTML を呼び出すだけですね。