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

生徒

「SymfonyのTwigテンプレートって、自由に書いていいんですか？構成とかって決まりありますか？」

先生

「Twigテンプレートには設計のコツがあります。効率よく作るためには、ある程度ルールを決めておくと便利ですよ。」

生徒

「ルールって、どういうことですか？」

先生

「たとえば、共通部分をパーツに分けたり、テンプレートを継承して重複を減らしたりといったことです。それでは、Twigテンプレート設計の基本から一緒に見ていきましょう！」

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

Twig（トゥウィッグ）は、Symfonyで使用されるテンプレートエンジンです。テンプレートとは、Webページの見た目やレイアウトを定義するファイルのことです。HTMLに似た構文で、変数の出力や条件分岐、繰り返しなどの機能が使えます。

プログラムの処理部分とは切り離して、見た目を管理することで、開発がスムーズになります。初心者でも書きやすい記述方法が特徴です。

2. Twigテンプレート設計の基本ルール

Twigテンプレートを上手に設計するためには、いくつかの基本ルールがあります。次のような考え方で構成していきましょう。

1ファイル＝1つの責任にする
繰り返し使う部分は別ファイルに分ける
親テンプレートと子テンプレートを使い分ける
変数やロジックは極力少なく、見た目に集中する

これらの考え方は「効率的でメンテナンスしやすいテンプレート」を作るためにとても重要です。

3. base.html.twig でレイアウトを共通化

Webサイトでは、すべてのページに共通して使う部分があります。たとえば、ヘッダー・フッター・ナビゲーションメニューなどです。こうした部分は、base.html.twigという「親テンプレート」にまとめます。


<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}サイトタイトル{% endblock %}</title>
  </head>
  <body>
    {% include 'components/header.html.twig' %}
    <main>
      {% block content %}{% endblock %}
    </main>
    {% include 'components/footer.html.twig' %}
  </body>
</html>

これにより、共通のレイアウトを全ページで使い回すことができます。

4. block構文で内容を差し替える

blockは、Twigテンプレートで「差し替え可能な部分」を作るための構文です。子テンプレートから指定の場所に内容を挿入できます。


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

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

{% block content %}
  <h1>ようこそ！</h1>
  <p>これはトップページの内容です。</p>
{% endblock %}

このように書くことで、全体の構成はbase.html.twigに任せて、内容だけを子テンプレートで自由に変更できます。

5. include構文でパーツを使い回す

Webページの中で何度も登場する部分（ボタン、カード、通知メッセージなど）は、includeを使って別ファイルに切り出しましょう。


{% include 'components/alert.html.twig' %}

こうすることで、再利用性が高くなり、変更も一箇所で済むようになります。特に初心者のうちは「同じHTMLを何度も書かない」ことが大切です。

6. 見やすく保守しやすいディレクトリ構成

Twigテンプレートは、構造が複雑になると管理が大変になります。最初からディレクトリを分けて、次のような構成にしておくと便利です。


templates/
├── base.html.twig
├── home/
│   └── index.html.twig
├── user/
│   └── profile.html.twig
└── components/
    ├── header.html.twig
    └── footer.html.twig

このようにディレクトリごとにページやパーツを分けて管理することで、見通しの良いテンプレート設計が実現できます。