先生と生徒の会話形式で理解しよう

生徒

「Flask‑Bootstrapを使っているんですが、HTMLのテンプレートを自分好みに変えたいです。どうすればいいですか？」

先生

「Jinja2（ジンジャツー）というテンプレートエンジンを使うと、自分で見た目をカスタマイズできますよ。では、基本から一緒に見ていきましょう！」

生徒

「Jinja2って何ですか？」

先生

「Jinja2は、HTMLファイルに{{ 変数 }}や{% if %}といった命令を書いて、Pythonの変数や分岐を反映できる仕組みです。」

1. Jinja2テンプレートとは？

Jinja2（ジンジャツー）テンプレートは、HTMLにPythonの変数や条件分岐（if）や繰り返し処理（for）を埋め込める仕組みです。これにより、同じHTMLの中に動的に内容を変えることができます。

たとえば、商品リストやユーザー名などをWebページ上で自動表示したり、条件によって色や見た目を変えたりできます。Jinja2自体はFlaskに標準で入っており、Flask‑Bootstrapと一緒に使うと見た目も整えつつ動きも加えられます。

2. Flask‑BootstrapとJinja2の組み合わせ

Flask‑Bootstrapでbootstrap/base.htmlを使ってJinja2テンプレートを拡張すると、Bootstrapのスタイルを活かしつつ、自分用に見た目をカスタマイズできます。

たとえば、ナビゲーションメニューの見た目、カードの色、表示する項目などを自由に変えられます。

3. サンプル：動的リストをカード形式で表示

ユーザー名や商品名など、リストをBootstrapカードとして表示する例です。


from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

@app.route('/')
def index():
    items = [
        {'name': 'りんご', 'price': 100},
        {'name': 'バナナ', 'price': 80},
        {'name': 'ぶどう', 'price': 120}
    ]
    return render_template('index.html', items=items)

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

このコードはPythonでitemsというリストを作って、HTMLテンプレートに渡しています。

4. index.html：Jinja2とBootstrapカードの組み合わせ

Flaskのtemplates/index.htmlに以下のように書きます。


{% extends "bootstrap/base.html" %}
{% block title %}カード表示{% endblock %}

{% block content %}
<div class="container mt-4">
  <div class="row">
    {% for item in items %}
    <div class="col-md-4 mb-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{ item.name }}</h5>
          <p class="card-text">{{ item.price }}円</p>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

ここでは{% for item in items %}でリストを順に回し、カードを繰り返し表示しています。

5. 条件分岐で強調表示するテクニック

価格が100円以上の商品だけ色を変えて目立たせる方法です。


{% for item in items %}
  <div class="col-md-4 mb-3">
    <div class="card {% if item.price >= 100 %}border-primary{% endif %}">
      <div class="card-body">
        <h5 class="card-title">{{ item.name }}</h5>
        <p class="card-text">{{ item.price }}円</p>
      </div>
    </div>
  </div>
{% endfor %}

{% if item.price >= 100 %}という条件分岐で、100円以上ならカテゴリーの色を変えています。

6. ブロックを使って共通ヘッダー・フッターを再利用

テンプレートの共通部分を別ファイルに切り出すことで、管理しやすくなります。


<!-- templates/layout.html -->
{% extends "bootstrap/base.html" %}
{% block header %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Myサイト</a>
</nav>
{% endblock %}
{% block footer %}
<footer class="footer mt-auto py-3 bg-light">
  <div class="container">© 2025 Myサイト</div>
</footer>
{% endblock %}
{% block content %}{% endblock %}


<!-- templates/index.html -->
{% extends "layout.html" %}
{% block title %}ホーム{% endblock %}
{% block content %}
<div class="container mt-4">
  <p>ようこそ、ホームページへ！</p>
</div>
{% endblock %}

これで複数ページにわたってヘッダーとフッターを共通化できます。

7. 初心者に優しいカスタマイズのメリット

コードの重複が減って、見やすくなる
変更したいときに一か所書き換えるだけで済む
Bootstrapのレイアウトを活かしつつ、自分らしい見た目にできる

プログラミング未経験の方でも、この組み合わせを使うと、見た目と動きを両立したWebページが簡単に作れます。

8. よくあるトラブルと対処

表示が変わらない：ブラウザの再読み込み（Ctrl+F5）を試しましょう。
「Undefined error」：Jinja2で渡した変数名とHTML側の名前が一致しているか確認。
Bootstrapのクラスが効かない：layout.htmlがbootstrap/base.htmlを正しく読み込んでいるか確認。

まとめ

Flask-BootstrapとJinja2カスタマイズの振り返り

FlaskとBootstrapを組み合わせて使うと、初心者でも見た目の整ったWebページをすぐに作ることができました。さらにJinja2テンプレートを活用することで、ページの一部を動的に書き換えたり、商品リストやユーザー情報を自動表示したりと、より実用的なサイトを構築できるようになります。特に{{ 変数 }}や{% for %}、{% if %}といったテンプレート構文は、データを扱ううえで欠かせない要素でした。

今回の記事では、動的リストの表示、条件分岐による強調、テンプレートの継承といった重要な仕組みを一つ一つ確認しながら作り上げていきました。Bootstrapのカードやグリッドを活かしながら、同じHTMLを繰り返すことなく効率よく表示できる点は、多くのページを管理する上でも大きな利点になります。テンプレートを分割して共通ヘッダーとフッターを再利用する方法も、サイト全体の一貫性を保ちながらメンテナンスを簡単にする重要なテクニックです。

また、Flask-Bootstrapのbootstrap/base.htmlをベースにすることで、全体のレイアウトが整い、Jinja2による部分的なカスタマイズ領域を柔軟に追加できました。特に複数ページを持つWebアプリでは、このテンプレート継承が本当に便利で、一度仕組みを理解すれば新しい画面を短いコードでどんどん増やすことができます。初心者の方にとっても、テンプレートの構造を覚えてしまえば「どこを編集すれば何が変わるのか」が直感的に分かるようになっていきます。

復習としてのサンプルテンプレート

ここでは、記事中で扱った内容を踏まえて、条件分岐とループを組み合わせた復習用テンプレートを改めて掲載しておきます。


{% extends "layout.html" %}
{% block title %}商品一覧{% endblock %}
{% block content %}
<div class="container mt-4">
  <div class="row">
    {% for item in items %}
      <div class="col-md-4 mb-3">
        <div class="card {% if item.price >= 100 %}border-primary{% endif %}">
          <div class="card-body">
            <h5 class="card-title">{{ item.name }}</h5>
            <p class="card-text">{{ item.price }}円</p>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

実際に自分の環境で動かしてみると、Jinja2の構文がどのように反映されるかが自然と理解できるはずです。とくに、値段やカテゴリーによって色を切り替えたり、表示する件数を変えたりといった場面では、このようなテンプレート構造がとても役に立ちます。ぜひ試しながら理解を深めていってください。

先生と生徒の振り返り会話

生徒

「今日の内容で、Jinja2がどれだけ便利なのかよく分かりました。カードの繰り返し表示も思ったより簡単でした！」

先生

「そうですね。特にFlask-Bootstrapと組み合わせると見た目も整って、コードも書きやすくなります。動的なWebページを作る土台としてとても強力ですよ。」

生徒

「テンプレートを分ける方法も便利ですね。ヘッダーやフッターを共有できるのはすごく助かると思いました。」

先生

「複数ページを扱うアプリでは欠かせない技術ですから、早いうちに身につけておくと後々の作業も楽になりますよ。今回覚えた構文は、今後どんなWebアプリを作るときにも役立ちます。」

生徒

「もっと複雑な表示にも挑戦したくなってきました！また次もよろしくお願いします！」