HTMLテンプレートのレイアウトを共通化しよう！（テンプレートの継承）【Flask初心者講座その６】

2025年3月21日

Flaskを使ったアプリケーション開発では、複数のHTMLページが似たようなレイアウトを持つことがよくあります。

例えば、ヘッダーやフッター、ナビゲーションバーなど、ページ全体に共通する部分がある場合などが言えます。このように共通部分を毎回手動で書くのは効率が悪く、エラーの元にもなります。そこで、Flaskのテンプレートエンジン「Jinja2」を活用し、HTMLテンプレートを継承して共通部分を一元管理する方法を学びましょう。

ベーステンプレートを作る
子テンプレートで継承する
まとめ

ベーステンプレートを作る

こんな感じでサイトを簡易サイトを作ってみました。もちろん飲食店などのサイトはCSSなどを使いますが、今回はflaskがメインなので省きます。

ほかのページを作りたいとき、もし、赤いブロックの外以外は使いまわすとして、使いまわすところをすべてのページに毎回コピペしてしまうと、後から修正するのが大変になります。例えば、ナビゲーションのリンクを1つ追加したい場合、全ページのHTMLを修正しなければならないのは非効率です。

Flaskのテンプレート継承では、「親テンプレート（ベーステンプレート）」を作成し、各ページがそれを継承することで、共通レイアウトを再利用できます。

親テンプレート（base.html）：全ページ共通の部分を定義（ヘッダー、フッターなど）
子テンプレート（home.html、menu.html など）：ページごとの内容だけを記述

個テンプレートには共通するところ以外の内容を赤いブロックの中に書けばいいですよね。

base.html　↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}飲食店のホームページ{% endblock %}</title>
</head>
<body>
    <header>
        <h1>美味しいレストラン</h1>
        <nav>
            <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/">メニュー</a></li>
                <li><a href="/">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

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

    <footer>
        <p>営業時間: 11:00 - 22:00 | 電話: **-****-****</p>
    </footer>
</body>
</html>

この base.html の中で、子テンプレートに継承される部分は {% block title %} と {% block content %} 2か所の中の部分です。

子テンプレートで継承する

my_flask_app/            # プロジェクトのルートディレクトリ
│── app.py               
│── /templates/         
│   │── base.html        # 共通レイアウトのベーステンプレート
│   │── home.html        #子テンプレート

↑のようなディレクトリ構成の時、子テンプレートはhome.htmlだとして継承していきたいと思います。

templates/home.html↓

{% extends "base.html" %}

{% block title %}美味しいレストラン{% endblock %}

{% block content %}
    <h2>ようこそ！</h2>
    <p>当店は新鮮な食材を使った料理を提供しています。ぜひご来店ください！</p>
{% endblock %}

↑{% extends "base.html" %} を使うことで、base.html のレイアウトを継承しています。
その上で、{% block title %} と {% block content %} を使って、ページごとの内容を上書きします。

from flask import Flask, render_template

app = Flask(__name__)

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

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