カテゴリ: Symfony 更新日: 2025/12/25

SymfonyのテンプレートエンジンTwigとは?基本機能をやさしく解説

SymfonyのテンプレートエンジンTwigとは?基本機能を解説
SymfonyのテンプレートエンジンTwigとは?基本機能を解説

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

生徒

「Symfony(シンフォニー)でWebページを作るときに、HTMLを書く方法って決まってるんですか?」

先生

「はい、SymfonyではTwig(ツイッグ)というテンプレートエンジンを使うのが一般的です。」

生徒

「テンプレートエンジンってなんですか?難しそう…」

先生

「大丈夫、やさしく説明するね。Twigは、Webページを効率よく作るための道具なんだよ。」

1. Twig(ツイッグ)とは?テンプレートエンジンの基本をやさしく解説

1. Twig(ツイッグ)とは?テンプレートエンジンの基本をやさしく解説
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ディレクトリ)

2. Twigテンプレートの拡張子は?.twigと設置場所(templatesディレクトリ)
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で変数を表示する方法:{{ 変数名 }}の書き方

3. Twigで変数を表示する方法:{{ 変数名 }}の書き方
3. Twigで変数を表示する方法:{{ 変数名 }}の書き方

Twigでは、PHPから渡されたデータ(変数)を画面に表示したいとき、{{ 変数名 }}の形で書きます。これは「ここに変数の中身を入れて表示してね」という合図です。HTMLの中に自然に書けるので、初心者でも読み方が分かりやすいのが特徴です。

たとえば、コントローラからnameという変数を渡したときは、Twigテンプレート側で次のように書きます:


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

変数nameに「太郎」が入っていれば、画面にはこう表示されます:


こんにちは、太郎さん!

ここで覚えておきたいのは、{{ }}は「表示専用」ということです。計算や条件分岐などの処理は別の書き方になりますが、まずは「文字や数値をそのまま見せたいときは{{ }}」と覚えるだけで十分です。

もう少しイメージしやすいように、別の例も見てみましょう。たとえば商品名を表示したい場合も同じです。


<p>商品名:{{ item }}</p>

このように、Twigの変数表示はとてもシンプルで、HTMLの文章の中に「差し込みたい場所」を作る感覚で使えます。まずはここから慣れていきましょう。

4. Twigのif文(条件分岐):条件で表示を切り替える書き方

4. Twigのif文(条件分岐):条件で表示を切り替える書き方
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文(繰り返し):配列をループして一覧表示する方法

5. Twigのfor文(繰り返し):配列をループして一覧表示する方法
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のコメントアウト方法:{# コメント #}でメモを残す

6. Twigのコメントアウト方法:{# コメント #}でメモを残す
6. Twigのコメントアウト方法:{# コメント #}でメモを残す

Twigで他の人に説明を書いておきたいときは、{# コメント #}のように書きます。これは画面には表示されません。


{# これはTwigのコメントです #}

7. Twigのフィルターとは?upperなどで表示を加工する使い方

7. Twigのフィルターとは?upperなどで表示を加工する使い方
7. Twigのフィルターとは?upperなどで表示を加工する使い方

Twigにはフィルターという便利な機能があります。これは、変数の表示をちょっと変えるための道具です。

たとえば、すべて小文字を大文字にしたいときはこう書きます:


{{ name|upper }}

このように|upperをつけると、「たろう」→「タロウ」となります。

8. TwigはHTMLに近い?読みやすく書けるテンプレートエンジン

8. TwigはHTMLに近い?読みやすく書けるテンプレートエンジン
8. TwigはHTMLに近い?読みやすく書けるテンプレートエンジン

Twigの書き方は、HTMLに似ていてとても読みやすいです。初心者でもHTMLを書いたことがあればすぐになじめるのが特徴です。

また、Twigを使うとPHPのコードをそのままHTMLに書くよりも安全で、誤動作やセキュリティの心配も少なくなります。

9. Twigはどこで使う?Symfonyのコントローラからテンプレートを表示する流れ

9. Twigはどこで使う?Symfonyのコントローラからテンプレートを表示する流れ
9. Twigはどこで使う?Symfonyのコントローラからテンプレートを表示する流れ

Twigは、Symfonyの中のコントローラという場所から使います。コントローラがTwigにデータを渡して、それをHTMLページに表示する、という流れです。

だから、Twigは画面表示の担当。PHPのロジック(計算など)はコントローラに書いて、Twigでは表示だけを担当することで、役割がはっきり分かれて作業もしやすくなります。

関連記事:
カテゴリの一覧へ
新着記事
New1
Laravel
Laravelの認証状態をチェックする方法を完全解説!authとAuth::check()を初心者向けにやさしく説明
New2
CodeIgniter
CodeIgniterのコントローラクラスの作り方を完全ガイド!初心者でもわかる基礎から実践まで
New3
Symfony
Symfonyのフォームラベルを多言語対応!初心者でもわかる翻訳設定ガイド
New4
Laravel
Laravelでユーザー登録機能を作る方法!初心者向けにバリデーションとリダイレクトをやさしく解説
人気記事
No.1
Java&Spring記事人気No1
Laravel
Laravelのデータベース設定方法を完全ガイド!初心者でもわかる.envファイルの使い方
No.2
Java&Spring記事人気No2
Laravel
Laravelのビューとは?Bladeテンプレートの基本を解説
No.3
Java&Spring記事人気No3
Laravel
Laravelでセッションを扱う方法!保存方法と利用例を解説
No.4
Java&Spring記事人気No4
Laravel
Laravelのルート一覧を確認する方法!初心者でもわかるphp artisan route:listの使い方
No.5
Java&Spring記事人気No5
Laravel
Laravelでルーティングを設定する方法!web.phpと基本ルートの書き方を初心者向けに徹底解説
No.6
Java&Spring記事人気No6
Laravel
Laravelでログを出力する方法(Monolog・storage/logs)
No.7
Java&Spring記事人気No7
Laravel
Laravelのルートキャッシュ機能を活用してパフォーマンス改善!初心者でもわかる完全ガイド
No.8
Java&Spring記事人気No8
Laravel
LaravelでルートをBladeテンプレートに記述する方法(route関数)