1. Twigでテンプレートを分割する理由とは？

Symfonyでは、Twigを使ってHTMLテンプレートを作成しますが、画面が複雑になると1つのファイルがとても長くなってしまいます。これでは修正もしづらく、読みづらいコードになってしまいます。

そこでTwigのincludeやembedを使うことで、テンプレートを部品ごとに分けて、再利用可能にすることができます。

2. includeの使い方：テンプレートを読み込む基本

includeは、別のテンプレートファイルをその場に読み込んで表示するための構文です。たとえば、ヘッダー部分だけを別ファイルにしておき、必要なところで読み込むことができます。

次のように使います。


{% include 'partials/header.html.twig' %}

このコードは、partials/header.html.twigというテンプレートを現在の位置に挿入するという意味です。

3. 実際にテンプレートを分割してみよう

たとえば、ヘッダー・フッター・ナビゲーションを分割する場合、以下のような構成になります。


<!-- layout.html.twig -->
<html>
  <body>
    {% include 'partials/header.html.twig' %}
    {% include 'partials/nav.html.twig' %}
    
    <main>
      {% block content %}{% endblock %}
    </main>
    
    {% include 'partials/footer.html.twig' %}
  </body>
</html>

これで、共通部分を一か所にまとめて管理できるようになります。

4. embedとは？includeより少し便利な構文

embedはincludeに似ていますが、読み込んだテンプレートの中のblockを上書きしてカスタマイズできる点が特徴です。

つまり、「元の部品の構造は使いつつ、一部だけ変えたい」という場合に便利です。

次のように使います。


{% embed 'components/card.html.twig' %}
    {% block title %}お知らせ{% endblock %}
    {% block content %}新機能をリリースしました。{% endblock %}
{% endembed %}

このように書くと、card.html.twigの中に定義されたblock titleとblock contentの内容を、上書きして使うことができます。

5. embedを使ったカスタマイズ可能なパーツの例

例えば、components/card.html.twigが次のように書かれているとします。


<div class="card mb-3">
    <div class="card-header">
        {% block title %}デフォルトタイトル{% endblock %}
    </div>
    <div class="card-body">
        {% block content %}デフォルト内容{% endblock %}
    </div>
</div>

この構成をベースにしつつ、表示内容だけを差し替えられるので、共通パーツを大量に使う場合でも非常に便利です。