Back to Blog

Flaskでレイアウトテンプレートを作成する方法【テンプレートを共通化する】

flask

2024年8月4日

【Pythonの基礎、アルゴリズム、ソフトウェアアーキテクチャの学習はこちら】

こんにちは！

今回の記事では、Flaskでレイアウトテンプレートを作成する方法について解説します。

Flaskでは、Jinja2テンプレートエンジンを使ってHTMLファイルを生成します。

HTMLを作成する場合、ヘッダーやフッターなどをさまざまなページで使い回すことがあります。全てのHTMLにヘッダーを記述すると、保守性が損なわれてしまいます。

そこで、テンプレートの共通部分をレイアウトとして、切り出します。

今回は、このようなヘッダー部分などをレイアウトテンプレートとして、共通化する方法を解説します。

レイアウトテンプレートの作成方法

では早速、レイアウトテンプレートの作成方法を解説します。

Flaskでレイアウトテンプレートを作成する際、まず基本となるレイアウトファイルを準備します。

このファイルには、サイト全体で共通して使われる部分、例えばヘッダー、フッター、ナビゲーションバーなどが含まれます。

これにより、個別のページで共通の部分を再記述する必要がなくなり、効率的に開発が進められます。

基本のレイアウトファイルを作成する

まずは、templatesディレクトリにbase.htmlというファイルを作成します。

このファイルには、共通部分を定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Flask App{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>My Flask App</h1>
        <nav>
            <ul>
                <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('about') }}">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>© 2024 My Flask App</p>
    </footer>
</body>
</html>

このテンプレートでは、blockタグを使って後から上書きできる部分を指定しています。

titleブロックはページごとのタイトルを設定するためのもので、contentブロックは各ページごとのコンテンツを挿入するための領域です。

ページごとのテンプレートを作成する

次に、base.htmlを継承するページごとのテンプレートを作成します。

ここでは、ホームページとaboutページの例を示します。

templates/home.html

{% extends "base.html" %}

{% block title %}Home - Flask App{% endblock %}

{% block content %}
    <h2>こんにちは！</h2>
    <p>ホームページです。</p>
{% endblock %}

templates/about.html

{% extends "base.html" %}

{% block title %}Home - Flask App{% endblock %}

{% block content %}
    <h2>ようこそ！</h2>
    <p>aboutページです。</p>
{% endblock %}

このように設定することで、base.htmlをレイアウトとして共通化できます。

jinja2テンプレートの解説

レイアウトテンプレートを作成するにあたり、以下のjinja2テンプレートの構文を使用しました。

{% block [ブロック名] %}{% endblock %}
{% extends “[テンプレート名]” %}

それぞれの使い方を詳しく解説します。

{% block [ブロック名] %}

{% block %}構文はテンプレートの継承と再利用を実現するための重要な機能です。

{% block %}構文は、テンプレート内の特定のセクション（ブロック）を定義し、そのブロックを他のテンプレートで上書きできるようにするために使用されます。

基本的な構文は以下の通りです。

{% block [ブロック名] %}
    コンテンツ
{% endblock %}

{% block [ブロック名 %}は、ベーステンプレート（例：base.html）内で定義され、サブテンプレート（例：home.htmlやabout.html）で上書きされます。

例えば、ベーステンプレートでcontentという名前のブロックを以下のように定義します。

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

その後、サブテンプレートである、home.htmlで以下のように設定すると、{% block content %}配下に記述した、HTMLが上書きされます。

{% extends "base.html" %}

{% block content %}
    <h2>こんにちは！</h2>
    <p>ホームページです。</p>
{% endblock %}

このような仕組みでレイアウトテンプレートを作成しています。

{% extends “[テンプレート名]” %}

{% extends “[テンプレート名]” %}は、Jinja2テンプレートエンジンの構文の1つです。

この構文を用いることで、一つのベーステンプレートを複数のテンプレートに継承させることができ、コードの再利用性と保守性を向上させることができます。

以下のように定義することで、base.htmlテンプレートを継承してきます。

{% extends "base.html" %}

{% block content %}
    <h2>こんにちは！</h2>
    <p>ホームページです。</p>
{% endblock %}

まとめ

今回の記事では、Flaskでレイアウトテンプレートを作成する方法について解説しました。

レイアウトは、複数のレンプレートを作成する場合に便利です。

共通化することで、コードの管理や保守性が高まります。

今回の記事をWeb開発の参考にしていただければ幸いです。

ここまでお読みいただきありがとうございました。

flask Jinja2 フロントエンド

Pythonの基礎から応用まで学べる
Python WebAcademy

Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。

Pythonの学習を始める

インフラの学習はInfraAcademy