【Django Templates】base.htmlの作成

（最終更新月：2021年11月）

「HTMLの繰り返す記述を省略したい！」

「Python、Djangoらしい記述方法でWebアプリを作っていきたい！」

というDjango初学者の方へ向けての記事となります

当記事を通じて、

ベースとするHTMLファイルを作成
ブロックタグを配置する
extendsでベーステンプレートを継承する

方法を解説していきます

各HTMLを単独で記述していくとどうしても同じような記述を繰り返すことになります

当記事でベースとなるHTMLを作成しておけば今後の記述がグッと短くなりますので参考になれば幸いです

✔YouTube解説動画

当記事の内容は動画を見ながら進めると、約15分程度で完了します。

動画ならではの情報も解説しているので、記事と一緒にご覧ください。

動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。

実践Django Pythonによる本格Webアプリケーション開発 [ 芝田将 ]

created by Rinker

¥3,850 (2024/04/24 16:37:12時点楽天市場調べ-詳細)

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/24 14:20:49時点 Amazon調べ-詳細)

さいしょに

当記事では、別記事でご紹介した下記の2ファイルを使って解説を進めていきます

【nippo-list.html】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日報アプリ</title>
  </head>
  <body>
    <h1>こちらは日報アプリのページになります</h1>
  </body>
</html>

【nippo-detail.html】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Views.pyからHTMLへ</title>
  </head>
  <body>
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
    <p>あなたの入力した数字は→ {{ number}} </p>
    <p> {{random_number}} + {{number}} = {{ random_number|add:number}}</p>
  </body>
</html>

下記のようにまとめると2つのファイルで共通している箇所、そうでない箇所がはっきり分かります

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトルは各ページで異なります</title>
  </head>
  <body>
    コンテンツは各ページで異なります
  </body>
</html>

こちらを使い、ベーステンプレートを作成していきます

ベーステンプレートの作成

ベーステンプレートの名前、保存先は下記の通りとします

【名前】base.html
【場所】プロジェクトフォルダ > templates > base.html

当アプリ開発では、プロジェクトフォルダが「src」になりますので、下記のようになります

src > templates > base.html

前章のコードをコピペし、ブロックタグと呼ばれるものを配置していきます

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        {% block title %}{% endblock %}
    </title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

ブロックタグについては次章でご説明しています

ブロックタグの配置

上記のテンプレートでは2箇所にブロックタグを配置しました

設置した箇所は

title内
body内

です

ブロックタグは、

{% block タグ名 %} {% endblock %}

で構成されています

コードで見てみると、

....
<title>{% block title %}{% endblock %}</title>
....
....
<body>
{% block content %}{% endblock %}

となります

対して、ベーステンプレートを継承したHTMLファイルでは、このブロックタグ内にそれぞれの記述を加えていきます

言葉だけではわかりにくいと思いますので、「継承」と「実際の記述」について一緒に見ていきましょう

ベーステンプレートの継承「extends」

HTMLの継承を「extendsタグ」で行います

{% extends 継承元のHTMLファイル名 %}

により、base.htmlから内容を継承することを宣言します

それぞれのファイルでベーステンプレートを継承して、ブロックタグでページ特有のコードを記述していきます

【nippo-list.html】

{% extends "base.html" %}

{% block title %}日報アプリ{% endblock %}

{% block content %}
  <h1>こちらは日報アプリのページになります</h1>
  <p>ブロッックタグを使って表示してます</p>
{% endblock %}

【nippo-detail.html】

{% extends "base.html" %}

{% block title %}ブロックタグで表示{% endblock %}

{% block content %}
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
    <p>あなたの入力した数字は→ {{ number}} </p>
    <p> {{random_number}} + {{number}} = {{ random_number|add:number}}</p>
{% endblock %}

抜粋すると、

「継承」→ {% extends “base.html” %}
「ブロックタグ内へ記述」→ {% block title %} 日報アプリ {% endblock %}

などとなっています

【nippo-list.htmlのビフォーアフターは↓の通りです】

【継承前】

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日報アプリ</title>
  </head>
  <body>
    <h1>こちらは日報アプリのページになります</h1>
  </body>
</html>

【継承後】

{% extends "base.html "%}

{% block title %}日報アプリ{% endblock %}

{% block content %}
  <h1>こちらは日報アプリのページになります</h1>
  <p>ブロッックタグを使って表示してます</p>
{% endblock %}

随分とスッキリしました！

ただ、今後アプリ開発を進めていくにあたり、ベーステンプレートにBootstrapのCDNを追加しておきましょう

【参考】ベーステンプレートのテンプレート

今後のアプリ開発は下記のベーステンプレートで進めていきます

Bootstrapのスターターテンプレートを元に作成してます

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>{% block title %}{% endblock %}</title>

  </head>
  <body>

    {% block content %}{% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>

※Bootstrapの公式ドキュメントはこちらです↓