カテゴリ: Symfony 更新日: 2025/11/04

Twigのblockとextendsを完全マスター!初心者向けSymfonyテンプレート入門

Twigのブロック定義(block)と内容の挿入(extends)
Twigのブロック定義(block)と内容の挿入(extends)

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

生徒

「SymfonyのTwigってよく聞くけど、どうやってテンプレートを使いまわすの?」

先生

「それはTwigのextendsblockという機能を使うことでできますよ。」

生徒

「難しそう……。でも、覚えると便利そうですね!」

先生

「安心してください。基本から順番に、わかりやすく解説していきますね!」

1. Twigとは?テンプレートエンジンの基本

1. Twigとは?テンプレートエンジンの基本
1. Twigとは?テンプレートエンジンの基本

Symfony(サンフォニー)では、画面を表示するためにTwig(トゥイッグ)というテンプレートエンジンを使います。テンプレートエンジンとは、HTMLの中に変数や条件分岐などのプログラム的な処理を簡単に埋め込める仕組みのことです。

たとえば、画面のヘッダーやフッターなど共通部分を再利用したい場合、Twigを使うと効率よく管理できます。

2. extendsとblockの役割とは?

2. extendsとblockの役割とは?
2. extendsとblockの役割とは?

Twigでテンプレートを分けて再利用するには、extends(エクステンズ)block(ブロック)という2つの命令を使います。

  • extends:別のテンプレートを「継承」して使うための命令
  • block:テンプレートの中で変更可能な「領域(ブロック)」を定義するための命令

つまり、共通のテンプレートを用意し、それをベースに他のテンプレートを作るという考え方です。

3. 親テンプレートを作ってみよう(layout.html.twig)

3. 親テンプレートを作ってみよう(layout.html.twig)
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)

4. 子テンプレートで内容を挿入しよう(home.html.twig)
4. 子テンプレートで内容を挿入しよう(home.html.twig)

次に、親テンプレートをextendsして、特定のページ用のテンプレート(子テンプレート)を作ってみましょう。


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

{% block title %}トップページ{% endblock %}

{% block body %}
  <p>ようこそ!これはトップページのコンテンツです。</p>
{% endblock %}

{% extends %}を使うことで、親テンプレートのレイアウトが自動的に読み込まれ、blockで定義された場所に中身が挿入されます。

5. Twigで共通デザインを保つメリットとは?

5. Twigで共通デザインを保つメリットとは?
5. Twigで共通デザインを保つメリットとは?

Twigのextendsblockを使うことで、同じデザインのテンプレートを複数のページで再利用できます。これは、メンテナンス性作業効率の面で大きなメリットがあります。

例えば、ヘッダーに変更があった場合でも、親テンプレート(layout.html.twig)を修正すれば、すべてのページに自動で反映されるため、個別に修正する必要がありません。

6. Twigを使う上での注意点

6. Twigを使う上での注意点
6. Twigを使う上での注意点
  • 親テンプレートと子テンプレートのファイル名は正しく書きましょう。
  • extendsは必ずテンプレートの一番上に書く必要があります。
  • blockの名前(titleやbodyなど)は親子で一致している必要があります。

これらを守ることで、Twigのテンプレートは正しく動作します。

7. 実行結果のイメージ

7. 実行結果のイメージ
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テンプレートの活用例

8. Twigテンプレートの活用例
8. Twigテンプレートの活用例

Twigテンプレートは、次のような場面で特に活躍します。

  • ブログ記事一覧ページと記事詳細ページでレイアウトがほぼ同じとき
  • 管理画面とユーザー画面で共通の見た目を使いたいとき
  • レスポンシブ対応のヘッダー・フッターを一括管理したいとき

こうした場面では、Twigのblockextendsを活用することで、作業量がぐっと減り、デザインの統一感も保てます。

関連記事:
カテゴリの一覧へ
新着記事
New1
Laravel
Laravelの認証状態をチェックする方法を完全解説!authとAuth::check()を初心者向けにやさしく説明
New2
CodeIgniter
CodeIgniterのコントローラクラスの作り方を完全ガイド!初心者でもわかる基礎から実践まで
New3
Symfony
Symfonyのフォームラベルを多言語対応!初心者でもわかる翻訳設定ガイド
New4
Laravel
Laravelでユーザー登録機能を作る方法!初心者向けにバリデーションとリダイレクトをやさしく解説
人気記事
No.1
Java&Spring記事人気No1
Laravel
Laravelのデータベース設定方法を完全ガイド!初心者でもわかる.envファイルの使い方
No.2
Java&Spring記事人気No2
Laravel
Laravelのビューとは?Bladeテンプレートの基本を解説
No.3
Java&Spring記事人気No3
Laravel
Laravelでセッションを扱う方法!保存方法と利用例を解説
No.4
Java&Spring記事人気No4
Laravel
Laravelのルート一覧を確認する方法!初心者でもわかるphp artisan route:listの使い方
No.5
Java&Spring記事人気No5
Laravel
Laravelでルーティングを設定する方法!web.phpと基本ルートの書き方を初心者向けに徹底解説
No.6
Java&Spring記事人気No6
Laravel
LaravelでルートをBladeテンプレートに記述する方法(route関数)
No.7
Java&Spring記事人気No7
Laravel
Laravelのルートキャッシュ機能を活用してパフォーマンス改善!初心者でもわかる完全ガイド
No.8
Java&Spring記事人気No8
Laravel
Laravelでログを出力する方法(Monolog・storage/logs)