【django】テンプレートの継承：block・extends・includeによる共通化
2021.04.05 /
本記事では、djangoによるWebアプリケーションにおけるテンプレートの継承（block・extends・includeによる共通化）について解説していきます。
Webアプリケーションやブログでは全ページを通して共通する部分があります。
この共通する部分をすべてのテンプレートに記入するのは面倒くさいですし、共通部分の一部を変更した場合、全テンプレートを一つ一つ修正するのは非常に時間がかかります。
Djangoには、すべてのテンプレートで共通する部分を一つのテンプレートに記入し、それをすべてのテンプレートで共通化する仕組みがあります。
全ページでヘッダーやメニュー、フッターは共通の場合が多いため、そういった部分を共通テンプレートにまとめます。
これをテンプレート継承（Template Inheritance）と呼びます。
本記事ではこのテンプレート継承の方法を詳しく解説していきます。
以下記事で作成したWebアプリケーションに「テンプレートの継承」を組み込んでいきます。
【django】静的ファイル（CSS、JavaScript、Image）の保存場所や設定について
テンプレート継承
テンプレート継承とは
テンプレート継承とは、全ページで共通する部分を１つのテンプレートにまとめ、その他のテンプレートで共通部分に関しては、共通テンプレートを使用する仕組みです。
ヘッダーやメニューバー、フッター、jQueryなど共通する部分を共通テンプレートに記載します。
テンプレート継承を使うことで、以下のようなメリットがあります。
- 共通部分の変更が容易になる
- 全ページで共通のレイアウトになる（ミスがなくなる）
- テンプレートの作成時間が短縮できる
テンプレート継承の方法
テンプレート継承では、まず共通部分を記入した共通テンプレートを作成します。
共通テンプレートはindex.htmlと同じ階層に作成しましょう。
共通テンプレートをここではbase.htmlという名前で作成します。
階層構造は次のようになります。
├── five
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── models.py
│ ├── static
│ │ └── five
│ │ └── common.css
│ ├── templates
│ │ └── five
│ │ ├── base.html # 追加
│ │ └── index.html
│ └── views.py
├── manage.py
├── office
├── myvenv
共通テンプレートには、他テンプレートを埋め込むためのブロックを記入します。
共通テンプレートを継承するテンプレートでは、継承先のテンプレートを指定します。
それぞれのテンプレートの作成方法について次項から見ていきましょう。
共通テンプレート（親）の作成
base.html
共通テンプレート（親）は次のように記入します。
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>OFFICE54</title>
<link rel="stylesheet" href="{% static 'five/common.css' %}">
<script src="https://kit.fontawesome.com/d86c726e71.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div>
<p>OFFICE</p>
</div>
</header>
<div id="wrapper">
<nav id="nav-left">
<div id="nav">
<ul id="nav-ul">
<li class="nav-li"><a href="{% url 'index' %}" class="nav-li-a"><i class="fa fa-tachometer" style="margin-right:15px"></i>Dashboard</a></li>
<li class="nav-li"><a href="#" class="nav-li-a"><i class="fas fa-list" style="margin-right:15px"></i>App1</a></li>
</ul>
</div>
</nav>
<main id="main">
{% block content %}
{% endblock %}
</main>
</div>
</body>
</html>
このように全ページで共通して使用するヘッダーやサイドメニュー、フッターなどを共通テンプレートにまとめます。
blockタグ
共通テンプレートに埋め込むコンテンツは、以下のようにblockタグと終了タグendblockを使用します。
{% block content %}
{% endblock %}
blockに続く文字はブロック名です。
共通テンプレートでは、埋め込みたいコンテンツの数だけblockタグを置くことができます。
共通テンプレートを継承するテンプレート（子）の作成
index.html
共通テンプレートを継承するテンプレート（子）は以下のように記載します。
{% extends "five/base.html" %}
{% block content %}
<p>test</p>
{% endblock %}
各ページで異なるメイン部分をテンプレート（子）に記載して、それを共通テンプレートに埋め込むイメージです。
extendsタグ
共通テンプレートはextendsタグで指定します。
{% extends "five/base.html" %}
extendsタグのあとに、共通テンプレートに埋め込む部分をblockタグで囲み、埋め込みたい場所のブロック名を指定します。
テンプレートでのincludeタグ
includeタグとは
includeタグとは、特定のテンプレートを埋め込む際に使用します。
例えば、ログインページなどではサイドバーを表示したくない場合で、サイドバーだけのテンプレートを作成します。
そしてサイドバーを表示したいページでincludeタグを使用してサイドバーを埋め込みます。
{% include テンプレート名 %}
まとめ
本記事「【django】テンプレートの継承：block・extends・includeによる共通化」はいかがでしたか。
今回「静的ファイル（CSS、JavaScript、Image）の保存場所や設定について」で作成したWebアプリケーションにテンプレート継承を組み込みました。
今後ページを増やすとき、とても簡単にできるようになりましたよね。
テンプレート継承を使うことで、Webアプリケーションのメンテナンスやページ数を増やすことが容易になりますので、ぜひチェレンジしてください。
関連記事
