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

生徒

「Symfonyでウェブページの見た目を作るには、どうしたらいいんですか？」

先生

「SymfonyではTwig（ツイッグ）というテンプレートエンジンを使って、HTMLの表示部分を作ります。」

生徒

「テンプレートエンジンってなんですか？むずかしくないですか？」

先生

「大丈夫ですよ！Twigの基本的な使い方をやさしく解説しますので、一緒に見ていきましょう。」

1. Twigとは？Symfonyでテンプレートを使う理由

Symfony（シンフォニー）では、ウェブページの見た目を作る部分をテンプレートとして分けて管理します。テンプレートは、HTMLのひな形のようなもので、画面のレイアウトやデザインを記述する場所です。開発の中で「処理」と「見た目」を分けることで、後から修正しやすくなるという大きなメリットがあります。

そのテンプレートを作るために使われるのがTwig（ツイッグ）です。TwigはPHPとHTMLをごちゃまぜにせず、見やすく整理された形で書けるテンプレートエンジンです。プログラミング初心者でも直感的に扱えるように設計されており、HTMLに少しだけ特別な記述を加えるだけで動作させることができます。

例えば、Twigを使うと「PHPで作ったデータをHTMLの中に表示したい」といった処理もとても簡単です。次のように、{{ }} を使って値を埋め込むだけで画面に表示できます。


<!-- Twigの基本的な表示：変数をそのまま画面に出す例 -->
<p>あなたの名前は {{ name }} です。</p>

このように、Twigは表示専用の言語としてHTMLをわかりやすく整理し、コード全体の見通しを良くしてくれる頼れる存在です。PHPの処理と画面の描画をしっかり分けてくれるため、Symfonyでの開発がスムーズに進む理由のひとつになっています。

2. Twigテンプレートファイルの場所と拡張子

Twigで作成したテンプレートファイルは、Symfonyプロジェクト内のtemplatesフォルダに保存します。このフォルダは、画面表示用のHTMLファイルをまとめておく場所だと考えるとわかりやすいでしょう。

テンプレートファイルの拡張子は必ず.html.twigとなり、通常のHTMLにTwigの特別な書き方を加えられるようになっています。たとえば次のようなパスのファイルは、Twigテンプレートとしてそのまま使用できます。


templates/hello/index.html.twig

実際のファイルの中身は、普段見慣れたHTMLとほとんど同じです。Twigの書き方が必要な部分だけに {{ }} を追加していくイメージです。例えば、次のように書いておくと、後からコントローラから渡した値を画面に表示できます。


<!-- Twigテンプレート内の簡単な例 -->
<h2>こんにちは、{{ name }} さん！</h2>
<p>こちらは Twig テンプレートから表示しています。</p>

このように、templatesフォルダに配置しておくだけでSymfonyが自動的に認識してくれるため、「どこに置けばいいの？」と悩むことがありません。初心者でも迷わず管理できる、わかりやすい仕組みです。

3. コントローラからTwigテンプレートを表示する

Twigのテンプレートを実際の画面に表示するには、コントローラで render() という関数を使います。これは「このテンプレートを使って画面を作ってください」とSymfonyに頼む指示のようなものです。

例えば、次のコードは hello/index.html.twig を画面に表示する最も基本的な書き方です。


return $this->render('hello/index.html.twig');

ここで指定しているパスは、templates フォルダからの相対パスになっています。そのため、templates/hello/index.html.twig が存在すれば、Symfonyが自動的にそのテンプレートを読み込み、ブラウザに表示してくれます。

さらに、コントローラからテンプレートに値を渡すこともできます。下の例では、テンプレートに message というデータを渡しています。


return $this->render('hello/index.html.twig', [
    'message' => 'ようこそ！このページはコントローラから表示されています。'
]);

テンプレート側では、次のように {{ }} を使って値を表示できます。


<p>{{ message }}</p>

このように、Twigとコントローラは「画面に表示する内容を渡す → テンプレート側で受け取る」という関係で動いています。初心者でも理解しやすく、Symfonyの開発でとてもよく使う基本的な仕組みです。

4. Twigテンプレートの基本的な書き方

Twigの文法は、中かっこ「{{ }}」で囲って値を表示するのが基本です。たとえば、コントローラから名前を渡して表示するには、以下のように書きます。

コントローラ側のコード：


public function index(): Response
{
    return $this->render('hello/index.html.twig', [
        'name' => '太郎'
    ]);
}

Twigテンプレートのコード：


<h1>こんにちは、{{ name }}さん！</h1>

これを実行すると、次のように表示されます。


こんにちは、太郎さん！

5. Twigでよく使う書き方（構文）

Twigでは、HTMLの中に変数を埋め込んだり、条件分岐や繰り返しなどの基本的なロジックも書くことができます。

変数の表示：


<p>{{ message }}</p>

if文（条件分岐）：


{% if age >= 20 %}
<p>成人です</p>
{% else %}
<p>未成年です</p>
{% endif %}

for文（繰り返し）：


<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

このように、PHPのような書き方ではなく、Twigの独自の文法でわかりやすく書けるのが特徴です。

6. Twigでテンプレートを分けて使う（継承）

実際のウェブサイトでは、ヘッダーやフッターなど同じ部分を何回も書くのは大変です。そこでTwigでは、テンプレートの継承が使えます。

まず、base.html.twigという基本テンプレートを作ります。


<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Site{% endblock %}</title>
</head>
<body>
    <header>ヘッダー</header>
    <main>
        {% block body %}{% endblock %}
    </main>
    <footer>フッター</footer>
</body>
</html>

次に、この基本テンプレートを使う側で継承します。


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

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

{% block body %}
    <h1>ようこそ！</h1>
{% endblock %}

このように書くことで、共通部分は使いまわし、必要な部分だけ上書きできます。

7. Twigで安全に表示する仕組み（エスケープ）

Twigは、表示される内容に危険な文字があれば、自動で変換（エスケープ）してくれます。たとえば、HTMLタグなどをそのまま表示しても、実行されないようになっています。

これはXSS（クロスサイトスクリプティング）という攻撃から守るための安全機能です。

8. Twigテンプレートでエラーが出たときのチェックポイント

Twigを使っていてよくあるエラーとしては、次のようなものがあります。

ファイル名が間違っている（.html.twigのつけ忘れなど）
変数が渡されていないのに表示しようとしている
{% endif %} や {% endfor %} の書き忘れ

エラーが出たときは、ファイル名や文法を一文字ずつ見直すと解決することが多いです。

まとめ

Symfonyでテンプレートを扱う際の中心となるTwigは、初めて触れる人にとっては新しい概念が多いかもしれませんが、学べば学ぶほど「どうしてSymfonyがTwigを採用しているのか」が自然と納得できるようになる非常に優れたテンプレートエンジンです。今回の記事では、Twigの基本的な書き方やテンプレートファイルの配置、コントローラからのデータ受け渡し、条件分岐や繰り返し構文といった土台部分を整理しながら解説してきました。テンプレートを使うことは単に画面を作るだけではなく、「ロジックはPHP」「見た目はTwig」という役割分担を明確にできるため、開発全体が管理しやすくなるという大きな利点があります。特にTwigは、従来のPHPテンプレートのようにHTMLの中にPHPコードが散らばることがなく、見た目を整理しながら動的なデータを表示できる点が大きな魅力です。変数を {{ }} で表示する分かりやすさや、{% %} を使った直感的な制御構文は、初心者でもすぐに理解できるよう配慮された設計となっています。また、Twigのテンプレート継承機能はウェブサイト全体の共通レイアウトを一箇所にまとめ、ページごとの中身だけを差し替えられる非常に強力な仕組みで、ヘッダーやフッターの重複記述を避け、保守性を高めるのに大いに役立ちます。加えて、Twigが持つ自動エスケープ機能は、セキュリティの観点からも欠かせない要素であり、特別な意識をせずともXSS（クロスサイトスクリプティング）のリスクを低減してくれる頼もしい存在です。もちろん例外として「HTMLをそのまま表示したい」場面もありますが、その際には明示的に |raw フィルタを使う必要があるため、意図しない危険な表示が起きにくく設計されています。 Twigを活用する上でもう一つ大切なのが、コントローラとの連携の理解です。PHP側で処理した結果をTwigに渡し、Twig側では見た目だけに専念するという分業の流れが自然にできると、開発が驚くほどスムーズになります。実際、Symfonyの開発現場ではデータ生成とテンプレート処理が完全に区別されており、この構造があるからこそコード全体が読みやすく整理されるという利点があります。以下には、今回学んだ内容を踏まえて、Twigのテンプレート継承とコントローラでのデータ受け渡しを組み合わせたサンプルコードを載せています。基本的な仕組みを応用しながら理解を深めるきっかけにしてみてください。

サンプルプログラム：Twig継承と変数受け渡しの組み合わせ


// コントローラ側
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class SampleController extends AbstractController
{
    #[Route('/welcome', name: 'welcome_page')]
    public function welcome(): Response
    {
        return $this->render('pages/welcome.html.twig', [
            'username' => 'ゲストユーザー',
            'items' => ['ニュース', 'イベント', 'ブログ記事']
        ]);
    }
}


{# base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}デフォルトタイトル{% endblock %}</title>
</head>
<body>
<header>サイト共通ヘッダー</header>
<main>
    {% block body %}{% endblock %}
</main>
<footer>フッター</footer>
</body>
</html>


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

{% block title %}ようこそ{% endblock %}

{% block body %}
<h1>{{ username }} さん、ようこそ！</h1>

<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>
{% endblock %}

このように、Twigの継承を使うことでウェブページ全体の構造を一定に保ちつつ、内容部分だけを柔軟に変更できます。また、コントローラから受け取った変数を繰り返し処理で展開することで、動的なリスト表示やページの内容生成にも役立つ構造が作れます。Twigは構文がわかりやすく、コードも読みやすいため、慣れてしまえばHTMLを書くのと同じ感覚で動的ページを作れるようになります。テンプレートエラーが起きた際も、閉じタグの不足や変数名の打ち間違いといった単純なものが多いため、落ち着いて確認すれば原因を見つけやすいのも特徴です。これらの積み重ねがテンプレート設計全体の理解へとつながっていきます。 Twigを学ぶということは、単に画面表示のための技術を習得するだけでなく、Symfonyというフレームワークの思想そのものを理解することにもつながります。ロジックとデザインの役割が明確に分かれる設計思想は、多人数での開発や大規模アプリケーションにおいて非常に重要で、Twigを使いこなすことがSymfony全体の理解を深める助けになります。今回のまとめを通して、テンプレート管理の基礎から応用までを振り返り、自分の中で概念を整理することで、より実践的な場面でも落ち着いてテンプレート構築ができるようになるはずです。

先生と生徒の振り返り会話

生徒

「Twigって最初はむずかしそうに見えましたけど、使ってみると意外と書きやすくて驚きました！」

先生

「そうですね。HTMLの感覚に近いので慣れるととても扱いやすいですし、テンプレート継承など便利な仕組みもたくさんありますよ。」

生徒

「変数の受け渡しが簡単にできるのも良いですね。画面づくりが楽しくなってきました！」

先生

「そう感じられたならもう一歩進んでいますね。TwigはSymfonyのテンプレート部分を支える重要な技術なので、どんどん使ってみてください。」

生徒

「はい！次はフォームやデータベースと組み合わせてみたいです！」

先生