SymfonyでTwigテンプレートを表示する方法を完全ガイド！初心者にもわかるHTMLとの違いや使い方
生徒
「Symfonyで画面を表示したいときって、どうやってHTMLを使うんですか？」
先生
「Symfonyでは、HTMLの代わりにTwig（トゥイッグ）というテンプレートエンジンを使うのが一般的です。」
生徒
「Twigって何ですか？普通のHTMLじゃダメなんですか？」
先生
「Twigは、HTMLをもっと便利に書けるようにしたものです。Symfonyととても相性がいいんですよ。これから、Twigテンプレートの基本と表示方法を一緒に学んでいきましょう！」
1. Twigテンプレートとは？HTMLとの違い
Twig（トゥイッグ）は、Symfony専用に作られたテンプレートエンジンで、画面に表示する内容を効率よく書くための仕組みです。テンプレートエンジンとは、HTMLをより簡単に管理するためのツールで、PHPのコードと混ざらないようにする役割もあります。
例えば、変数を表示したり、繰り返し処理をしたり、条件分岐をしたりといった操作を、Twigではとてもシンプルに書けます。
HTMLは単純に文字や画像などを表示する言語ですが、Twigはその中にロジック（処理）を含めることができるのが特徴です。
2. Twigテンプレートファイルの場所
SymfonyでTwigテンプレートを使うときは、ファイルを特定の場所に置く必要があります。テンプレートは基本的に、次のディレクトリ（フォルダ）に保存します。
projectディレクトリ/
└─ templates/
└─ hello.html.twig
ファイル名の末尾が.html.twigとなっているのがTwigテンプレートの特徴です。
3. コントローラからTwigテンプレートを表示する方法
Symfonyでは、コントローラという場所から画面を表示する命令を出します。その際にrenderという関数を使って、Twigテンプレートを指定します。
以下は、Twigテンプレートを表示する基本的なコントローラのコードです。
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class HelloController extends AbstractController
{
#[Route('/hello', name: 'hello_page')]
public function index(): Response
{
return $this->render('hello.html.twig', [
'name' => 'たろうさん',
]);
}
}
このように、render()関数の中でテンプレート名と表示させたいデータを渡すことで、Twigテンプレートがブラウザに表示されます。
4. Twigテンプレートの基本的な書き方
それでは、さきほどのコントローラで表示したhello.html.twigの中身を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>こんにちはページ</title>
</head>
<body>
<h1>こんにちは、{{ name }}！</h1>
</body>
</html>
{{ name }}という記述は、「変数nameの中身を表示する」というTwigの書き方です。PHPのechoと同じような意味ですが、もっとスッキリ書けます。
5. Twigで条件分岐や繰り返し処理もできる
Twigテンプレートでは、ただの文字表示だけでなく、条件分岐（ある条件のときだけ表示する）や繰り返し処理（リストをぐるぐる回して表示する）もできます。
以下は簡単な例です。
条件分岐（if文）
{% if name == 'たろうさん' %}
<p>ようこそ、たろうさん！</p>
{% else %}
<p>こんにちは、誰かさん！</p>
{% endif %}
繰り返し処理（for文）
<ul>
{% for item in ['りんご', 'みかん', 'バナナ'] %}
<li>{{ item }}</li>
{% endfor %}
</ul>
このように、Twigではプログラムっぽい処理も簡単にHTMLの中に書けるので、画面の内容を動的に変えるのにとても便利です。
6. TwigテンプレートにCSSを追加する方法
画面のデザインを整えるには、CSS（シーエスエス）という装飾用の言語を使います。Twigテンプレートの中でも、HTMLと同じように<link>タグを使ってCSSファイルを読み込めます。
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
このようにすれば、public/css/style.cssに保存したCSSファイルが画面に適用されます。
7. Twigでのコメントの書き方
Twigでは、表示されない「メモ」のようなコメントも書くことができます。自分や他の人が読んだときに、説明を残しておくのに便利です。
{# これはTwigのコメントです #}
このコメントは、ブラウザには表示されません。
まとめ
Twigテンプレートを使った画面表示の考え方を振り返る
この記事では、SymfonyにおけるTwigテンプレートの基本的な役割から、実際に画面を表示するまでの流れを丁寧に見てきました。SymfonyでWebアプリケーションを作る際、画面表示は必ず必要になる要素であり、その中心となるのがTwigテンプレートです。Twigは単なるHTMLの代替ではなく、表示専用の仕組みとして設計されているため、処理と見た目をきれいに分離できる点が大きな特徴です。
コントローラではデータの準備や処理を行い、Twigテンプレートでは受け取ったデータを使ってHTMLとして表示します。この役割分担を意識することで、コードが整理され、読みやすく、保守しやすい構成になります。SymfonyとTwigを組み合わせることで、初心者でも安全で分かりやすい画面表示を実現できるようになります。
TwigとHTMLの違いを理解する重要性
HTMLは画面を構成するための基本的な言語ですが、単体では条件分岐や繰り返し処理を行うことができません。Twigテンプレートを使うことで、HTMLの中に変数表示やif文、for文といった処理を自然な形で組み込めます。これにより、ユーザーごとに内容を変えたり、データの数に応じて表示を増減させたりといった動的な画面作成が可能になります。
また、TwigではPHPのコードを直接書かないため、セキュリティ面でも安心感があります。表示に必要な最低限の機能だけを使う設計になっているため、意図しない処理が実行されにくく、Symfonyの思想ともよく合っています。HTMLとTwigの違いを理解することは、Symfony開発の第一歩と言えるでしょう。
コントローラとTwigの連携ポイント
コントローラからTwigテンプレートを表示する際は、renderメソッドを使ってテンプレート名とデータを渡します。このとき、配列で渡したデータはTwig側で変数として扱われます。どのデータが画面で使われているのかを意識しながら書くことで、処理の流れが把握しやすくなります。
return $this->render('sample.html.twig', [
'title' => 'サンプルページ',
]);
上記のようなシンプルな書き方でも、Twigテンプレートでは柔軟な表示が可能です。データの受け渡しに慣れてくると、画面ごとに必要な情報を整理して設計できるようになります。
Twigの基本構文を使いこなすメリット
Twigの変数表示、条件分岐、繰り返し処理は、画面作成の中で頻繁に使われます。特にfor文を使った一覧表示は、実務でもよく登場します。配列やリストを受け取り、それをHTMLのリストとして表示する流れは、多くのWebアプリケーションで共通しています。
<ul>
{% for value in values %}
<li>{{ value }}</li>
{% endfor %}
</ul>
このような書き方に慣れておくことで、SymfonyとTwigを使った画面作成がスムーズになります。CSSの読み込みやコメントの使い方も含めて理解しておくと、見た目と中身の両方を意識した開発ができるようになります。
生徒「Twigって、ただのHTMLじゃなくて、画面表示専用の仕組みなんですね。」
先生「そうです。処理はコントローラ、表示はTwigと役割を分けるのがSymfonyの基本です。」
生徒「変数やif文、for文が使えるので、画面を柔軟に作れるのが分かりました。」
先生「その理解はとても大切です。Twigを使いこなせると、画面作成が一気に楽になります。」
生徒「これからは、HTMLだけでなくTwigの書き方も意識してテンプレートを書いてみます。」
先生「ぜひ続けてください。SymfonyとTwigを組み合わせれば、読みやすく安全なWebアプリが作れますよ。」
