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

生徒

「Twigで毎回HTMLの同じ部分を書くのって大変じゃないですか？」

先生

「そのとおりですね。そういうときには、テンプレート継承という仕組みを使うと便利です。」

生徒

「テンプレート継承ってなんですか？初心者でも使えますか？」

先生

「はい、Twigではbase.html.twigという親テンプレートを作って、子テンプレートで使い回すことができます。これから、やさしく説明していきますよ！」

1. Twigのテンプレート継承とは？

Twigのテンプレート継承とは、「共通のテンプレートを親として用意しておき、そこに共通のレイアウトを書いておいて、子テンプレートがそれを引き継ぐ」仕組みのことです。

たとえば、ヘッダーやフッター、ナビゲーションメニューなど、どのページにも共通して表示したい内容をbase.html.twigというテンプレートにまとめておきます。これによって、毎回同じHTMLを書かなくても、ページごとに必要な内容だけを書けば済むようになります。

まるで、料理の「お皿」を最初に用意しておいて、上に盛り付ける具材だけ変えるようなイメージです。

2. base.html.twigを作成する

まずは、共通部分をまとめたbase.html.twigというファイルを作成します。これは、templates/フォルダに保存します。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{% block title %}デフォルトタイトル{% endblock %}</title>
  </head>
  <body>
    <header>
      <h1>共通ヘッダー</h1>
    </header>

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

    <footer>
      <p>共通フッター</p>
    </footer>
  </body>
</html>

{% block %}は「ここに子テンプレートの内容を入れてね」という印です。中身を差し込むための「空欄」を用意しておくようなイメージです。

3. 子テンプレートから継承する

次に、子テンプレートを作成して、先ほどのbase.html.twigを引き継いで使う方法を見てみましょう。

例えばhome.html.twigというファイルを作って、次のように書きます。


{% extends 'base.html.twig' %}

{% block title %}ホームページ{% endblock %}

{% block body %}
  <p>こんにちは、これはホームページの内容です。</p>
{% endblock %}

{% extends %}は、「このテンプレートはbase.html.twigを引き継ぎます」という意味です。そして、{% block title %}や{% block body %}の中に、それぞれのページで表示したい内容を入れていきます。

4. 実際に表示されるHTML

上記の継承を使うと、Symfonyがテンプレートを合体させて、以下のようなHTMLを自動で作ってくれます。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ホームページ</title>
  </head>
  <body>
    <header>
      <h1>共通ヘッダー</h1>
    </header>

    <main>
      <p>こんにちは、これはホームページの内容です。</p>
    </main>

    <footer>
      <p>共通フッター</p>
    </footer>
  </body>
</html>

このように、共通の部分はbase.html.twigに書いておいて、それ以外の部分だけを子テンプレートで書くことで、効率よくページを作ることができます。