SymfonyのテンプレートエンジンTwigとは?基本機能をやさしく解説
生徒
「Symfony(シンフォニー)でWebページを作るときに、HTMLを書く方法って決まってるんですか?」
先生
「はい、SymfonyではTwig(ツイッグ)というテンプレートエンジンを使うのが一般的です。」
生徒
「テンプレートエンジンってなんですか?難しそう…」
先生
「大丈夫、やさしく説明するね。Twigは、Webページを効率よく作るための道具なんだよ。」
1. Twig(ツイッグ)とは?テンプレートエンジンの基本をやさしく解説
Twig(ツイッグ)は、Symfony(シンフォニー)で標準的に使われているテンプレートエンジンです。テンプレートエンジンとは、HTMLの見た目と、PHPが用意したデータを組み合わせて画面を作るための仕組みのことを指します。
初心者の方がつまずきやすいポイントは、「HTMLの中にPHPを書く」という考え方です。Twigを使うと、PHPの処理はコントローラ側にまとめて、Twigでは表示だけに集中できるようになります。そのため、コードが読みやすくなり、後から修正もしやすくなります。
たとえば、同じデザインで「名前」だけが変わるページを作りたい場合、HTMLを何枚もコピーする必要はありません。Twigなら、ひな形となるHTMLを1つ用意して、変わる部分だけをPHPから渡します。
<h1>ようこそ、{{ name }}さん</h1>
この例では、{{ name }}の部分がポイントです。ここにPHPから渡された名前が入り、ページごとに表示内容が変わります。つまりTwigは、HTMLをベースにしながら、必要なところだけを差し替えられる便利な道具だと言えるでしょう。
言い換えると、テンプレート=ひな形です。Twigは、そのひな形を分かりやすく、安全に作るための専用言語として、多くのSymfony開発で使われています。
2. Twigテンプレートの拡張子は?.twigと設置場所(templatesディレクトリ)
Twigで作られたテンプレートファイルは、.twigという拡張子(ファイル名の最後につく目印)がつきます。Symfonyではさらに、.html.twigのように「HTML用のTwigですよ」と分かる名前にしておくことが多いです。
そしてSymfonyでは、Twigテンプレートは基本的にtemplatesディレクトリの中に置く決まりになっています。ここに入れておくと、コントローラからテンプレートを呼び出すときに場所を探しやすく、プロジェクト全体の構成もスッキリします。
たとえば、よく見かける置き方は次のようなイメージです。
templates/
base.html.twig
hello/
index.html.twig
例として、共通レイアウトに使われやすいファイルはtemplates/base.html.twigのように置きます。画面ごとのテンプレートは、helloのようなフォルダを作ってまとめると、「どのページのHTMLか」が分かりやすくなります。
つまり、Twigは「拡張子」と「置き場所」を押さえるだけで、テンプレート管理がぐっと楽になります。まずはtemplatesに置く、そして.twig(または.html.twig)で保存する、と覚えておけばOKです。
3. Twigで変数を表示する方法:{{ 変数名 }}の書き方
Twigでは、PHPから渡されたデータ(変数)を画面に表示したいとき、{{ 変数名 }}の形で書きます。これは「ここに変数の中身を入れて表示してね」という合図です。HTMLの中に自然に書けるので、初心者でも読み方が分かりやすいのが特徴です。
たとえば、コントローラからnameという変数を渡したときは、Twigテンプレート側で次のように書きます:
<h1>こんにちは、{{ name }}さん!</h1>
変数nameに「太郎」が入っていれば、画面にはこう表示されます:
こんにちは、太郎さん!
ここで覚えておきたいのは、{{ }}は「表示専用」ということです。計算や条件分岐などの処理は別の書き方になりますが、まずは「文字や数値をそのまま見せたいときは{{ }}」と覚えるだけで十分です。
もう少しイメージしやすいように、別の例も見てみましょう。たとえば商品名を表示したい場合も同じです。
<p>商品名:{{ item }}</p>
このように、Twigの変数表示はとてもシンプルで、HTMLの文章の中に「差し込みたい場所」を作る感覚で使えます。まずはここから慣れていきましょう。
4. Twigのif文(条件分岐):条件で表示を切り替える書き方
Twigでは、if文を使って「条件によって表示内容を変える」ことができます。これは、「ある条件を満たしているときだけ表示したい」「そうでない場合は別の内容を出したい」といった場面で使われます。
たとえば「ログインしている人にはメッセージを表示する」「ログインしていない人には案内を出す」といったケースが分かりやすい例です。Twigのif文は、HTMLの中に自然な形で書けるので、見た目も直感的です。
{% if is_logged_in %}
<p>ログイン中です</p>
{% else %}
<p>ログインしてください</p>
{% endif %}
この例では、is_logged_inという変数がポイントです。この値がtrue(真)の場合は「ログイン中です」と表示され、false(偽)の場合は「ログインしてください」と表示されます。
また、{% if %}や{% else %}、{% endif %}は処理用のタグなので、画面には表示されません。あくまで「どのHTMLを表示するかを決めるための指示」と考えると理解しやすいでしょう。
まずは「条件によって表示を切り替えたいときはif文を使う」と覚えておけば十分です。ログイン判定やデータの有無チェックなど、Twigの画面作りでよく使う基本機能のひとつです。
5. Twigのfor文(繰り返し):配列をループして一覧表示する方法
Twigでは、for文を使うことで、配列の中身を順番に取り出しながら同じHTMLを繰り返し表示できます。これは、商品一覧・記事一覧・メニュー表示など、Webページではとてもよく使われる機能です。
考え方はシンプルで、「データが何個あっても、同じ形で表示したいとき」にfor文を使います。HTMLを何行もコピーする必要がなくなり、データが増えても自動で表示されるのが大きなメリットです。
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
この例では、itemsという変数に複数のデータが入っていることを想定しています。for文の中では、1つずつ取り出した値がitemという名前で使えるようになります。
たとえば、itemsに「りんご」「みかん」「バナナ」という3つのデータが入っている場合、画面には次のように表示されます:
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>
このように、Twigのfor文は「データの数だけHTMLを作る」役割を持っています。最初は「同じ表示を繰り返したいときはfor文」と覚えておけば十分です。一覧表示を作るときの基本として、しっかり押さえておきましょう。
6. Twigのコメントアウト方法:{# コメント #}でメモを残す
Twigで他の人に説明を書いておきたいときは、{# コメント #}のように書きます。これは画面には表示されません。
{# これはTwigのコメントです #}
7. Twigのフィルターとは?upperなどで表示を加工する使い方
Twigにはフィルターという便利な機能があります。これは、変数の表示をちょっと変えるための道具です。
たとえば、すべて小文字を大文字にしたいときはこう書きます:
{{ name|upper }}
このように|upperをつけると、「たろう」→「タロウ」となります。
8. TwigはHTMLに近い?読みやすく書けるテンプレートエンジン
Twigの書き方は、HTMLに似ていてとても読みやすいです。初心者でもHTMLを書いたことがあればすぐになじめるのが特徴です。
また、Twigを使うとPHPのコードをそのままHTMLに書くよりも安全で、誤動作やセキュリティの心配も少なくなります。
9. Twigはどこで使う?Symfonyのコントローラからテンプレートを表示する流れ
Twigは、Symfonyの中のコントローラという場所から使います。コントローラがTwigにデータを渡して、それをHTMLページに表示する、という流れです。
だから、Twigは画面表示の担当。PHPのロジック(計算など)はコントローラに書いて、Twigでは表示だけを担当することで、役割がはっきり分かれて作業もしやすくなります。