Flaskでレイアウトテンプレートを作成する方法【テンプレートを共通化する】
2024年8月4日
こんにちは！
今回の記事では、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開発の参考にしていただければ幸いです。
ここまでお読みいただきありがとうございました。
インフラの学習はInfraAcademy
Flaskの学習はFlask WebAcademy
おすすめの記事
