Twigのblockとextendsを完全マスター!初心者向けSymfonyテンプレート入門
生徒
「SymfonyのTwigってよく聞くけど、どうやってテンプレートを使いまわすの?」
先生
「それはTwigのextendsとblockという機能を使うことでできますよ。」
生徒
「難しそう……。でも、覚えると便利そうですね!」
先生
「安心してください。基本から順番に、わかりやすく解説していきますね!」
1. Twigとは?テンプレートエンジンの基本
Symfony(サンフォニー)では、画面を表示するためにTwig(トゥイッグ)というテンプレートエンジンを使います。テンプレートエンジンとは、HTMLの中に変数や条件分岐などのプログラム的な処理を簡単に埋め込める仕組みのことです。
たとえば、画面のヘッダーやフッターなど共通部分を再利用したい場合、Twigを使うと効率よく管理できます。
2. extendsとblockの役割とは?
Twigでテンプレートを分けて再利用するには、extends(エクステンズ)とblock(ブロック)という2つの命令を使います。
- extends:別のテンプレートを「継承」して使うための命令
- block:テンプレートの中で変更可能な「領域(ブロック)」を定義するための命令
つまり、共通のテンプレートを用意し、それをベースに他のテンプレートを作るという考え方です。
3. 親テンプレートを作ってみよう(layout.html.twig)
まずは共通のレイアウトファイル(親テンプレート)を作ります。このファイルには、HTMLの基本構造やヘッダー・フッターなどを記述し、コンテンツ部分にblockを定義します。
<!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 %}で囲んだ部分が、子テンプレートで変更できる領域になります。
4. 子テンプレートで内容を挿入しよう(home.html.twig)
次に、親テンプレートをextendsして、特定のページ用のテンプレート(子テンプレート)を作ってみましょう。
{% extends 'layout.html.twig' %}
{% block title %}トップページ{% endblock %}
{% block body %}
<p>ようこそ!これはトップページのコンテンツです。</p>
{% endblock %}
{% extends %}を使うことで、親テンプレートのレイアウトが自動的に読み込まれ、blockで定義された場所に中身が挿入されます。
5. Twigで共通デザインを保つメリットとは?
Twigのextendsとblockを使うことで、同じデザインのテンプレートを複数のページで再利用できます。これは、メンテナンス性や作業効率の面で大きなメリットがあります。
例えば、ヘッダーに変更があった場合でも、親テンプレート(layout.html.twig)を修正すれば、すべてのページに自動で反映されるため、個別に修正する必要がありません。
6. Twigを使う上での注意点
- 親テンプレートと子テンプレートのファイル名は正しく書きましょう。
extendsは必ずテンプレートの一番上に書く必要があります。- blockの名前(titleやbodyなど)は親子で一致している必要があります。
これらを守ることで、Twigのテンプレートは正しく動作します。
7. 実行結果のイメージ
上記のテンプレートを組み合わせた場合、最終的な出力は以下のようになります。
<!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>
このように、HTMLの構造を保ちながら、ページごとに中身を変えることができます。
8. Twigテンプレートの活用例
Twigテンプレートは、次のような場面で特に活躍します。
- ブログ記事一覧ページと記事詳細ページでレイアウトがほぼ同じとき
- 管理画面とユーザー画面で共通の見た目を使いたいとき
- レスポンシブ対応のヘッダー・フッターを一括管理したいとき
こうした場面では、Twigのblockとextendsを活用することで、作業量がぐっと減り、デザインの統一感も保てます。