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

生徒

「Symfonyで画面にHTMLを表示するには、どうしたらいいんですか？」

先生

「SymfonyではTwigというテンプレートエンジンを使って、HTMLを作成して表示できますよ。」

生徒

「Twig？テンプレートエンジン？それって何ですか？」

先生

「簡単に言うと、HTMLをきれいに分けて作れる便利な道具です。これから一緒に学んでいきましょう！」

1. Twig（ツウィッグ）とは何かを理解しよう

Twig（ツウィッグ）は、Symfony（シンフォニー）というPHPのフレームワークで使われるテンプレートエンジンです。テンプレートエンジンとは、HTMLの中にPHPのようなコードを埋め込める仕組みのことです。

HTMLを表示するときに、直接PHPを書いてしまうと、コードがゴチャゴチャになって見づらくなります。Twigを使えば、HTMLはHTMLらしく、見た目を作る専用の場所として保てるので、プログラムとデザインを分けてきれいに管理できます。

2. SymfonyのコントローラからTwigを使うには

Symfonyでは、コントローラと呼ばれる場所で「どの画面を表示するか」を決めます。

そして、HTMLを表示したいときは、Twigテンプレートを使って、コントローラから呼び出します。まずは基本の書き方を見てみましょう。


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

class PageController extends AbstractController
{
    #[Route('/welcome', name: 'welcome_page')]
    public function welcome()
    {
        return $this->render('welcome.html.twig');
    }
}

ポイント解説：

AbstractControllerは、Symfonyでよく使われるコントローラの親クラスです。
render()メソッドは、Twigテンプレートを読み込んで表示する命令です。
welcome.html.twigは、後で作るテンプレートファイルの名前です。

3. Twigテンプレートファイルを作成しよう

コントローラでwelcome.html.twigと書いたので、実際にそのファイルを作成してHTMLの中身を書いていきます。Twigのテンプレートファイルは、templatesフォルダの中に作ります。

下記のようなHTMLを書いてみましょう。


{# templates/welcome.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ようこそ</title>
</head>
<body>
    <h1>Symfonyへようこそ！</h1>
    <p>このページはTwigテンプレートで作成されています。</p>
</body>
</html>

このように書くと、/welcomeにアクセスしたときに、画面に「Symfonyへようこそ！」と表示されます。

4. Twigの中に変数を表示してみよう

テンプレートには、コントローラから渡した変数を埋め込むこともできます。たとえば、名前を表示したいときは次のようにします。


#[Route('/greet', name: 'greet_page')]
public function greet()
{
    return $this->render('greet.html.twig', [
        'name' => '太郎'
    ]);
}

このように、render()メソッドの第二引数にデータを入れると、テンプレートに渡すことができます。

それをテンプレート側で受け取って表示するには、下記のように書きます。


{# templates/greet.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>あいさつ</title>
</head>
<body>
    <h1>こんにちは、{{ name }}さん！</h1>
</body>
</html>

{{ name }}と書くことで、変数nameの中身「太郎」が表示され、「こんにちは、太郎さん！」という画面が出てきます。

5. Twigテンプレートを使うメリットをおさらい

Twigを使うと、HTMLの表示がすっきりして、管理もしやすくなります。特に大きなWebサイトを作るときには、とても重要です。

HTMLの中にPHPのゴチャゴチャしたコードがないので、見やすい
変数やループなどが簡単に書ける
共通部分（ヘッダーやフッター）をテンプレートとして使いまわせる

SymfonyとTwigを組み合わせることで、初心者でも分かりやすく、美しくWebページを作ることができます。

6. Twigテンプレートを使うときの注意点

Twigテンプレートを使うときは、ファイル名に必ず.html.twigという拡張子をつける必要があります。
また、テンプレートファイルはtemplatesフォルダの中に置くことがルールになっています。

もしテンプレートが見つからないときは、ファイルの場所や名前をもう一度確認してみましょう。

まとめ

SymfonyでTwigテンプレートを使って画面を表示する流れを学ぶことで、ウェブアプリケーション開発の基本となる「表示のしくみ」をしっかり理解できるようになります。Twigは、HTMLの構造を保ちながら動的なデータを埋め込めるため、初心者でも扱いやすく、複雑な画面作成にも耐えられる柔軟なテンプレートエンジンです。特に、コントローラから変数を渡して表示する一連の流れは、実際の開発で頻繁に登場する大切なポイントです。画面を作る担当であるTwigと、処理を行う担当であるコントローラが役割分担することで、プロジェクト全体の見通しがよくなり、保守性も高まります。

また、「変数を渡す」「表示する」という基本操作に慣れてくると、Twigの中で繰り返しや条件分岐などの便利な構文も自然に使えるようになります。テンプレートを整理し、HTMLをきれいに維持したまま開発するためには、Twigの基本を理解することが非常に重要です。初心者の方も、まずは簡単な画面を作りながら、コントローラとテンプレートの関係に慣れていくとよいでしょう。Twigの扱い方は、他のフレームワークでも役立つ考え方につながるため、今のうちにしっかり身につけておく価値があります。

Twigテンプレートの基本動作を復習するサンプル

ここでは、学んだ内容を振り返るために、Twigに変数を渡して表示する基本的なサンプルコードを再確認しておきます。コントローラとテンプレートがどのように連携しているのかを具体的に確認できる例です。


// コントローラ側：変数をTwigへ渡す例
#[Route('/profile', name: 'profile_page')]
public function profile()
{
    return $this->render('profile.html.twig', [
        'user' => '花子',
        'age' => 25
    ]);
}


{# templates/profile.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>プロフィール</title>
</head>
<body>
    <h1>{{ user }}さんのプロフィール</h1>
    <p>年齢：{{ age }}歳</p>
</body>
</html>

このように、Twigを使うことで、コントローラで用意した値を画面に反映させる処理がとてもわかりやすく記述できます。変数の扱いに慣れてくると、画面へのデータ表示が直感的にできるので、初学者でもスムーズにWebページの開発を進められます。

さらに、Twigは「継承」や「共通レイアウト」などの仕組みも備えているため、複数ページの共通部分をまとめて管理することができ、開発効率が大幅に向上します。まずは基本をしっかり押さえ、徐々にステップアップしていくことで、Symfonyでのウェブ開発がより自由で楽しいものになっていくはずです。

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

生徒

「Twigを使うと、PHPのコードを直接HTMLに書かなくてすむから、画面がすごく見やすかったです！」

先生

「そうなんです。テンプレートエンジンの役割は、まさに“見た目の整理”です。HTMLをきれいな状態で保つための、とても役に立つ道具なんですよ。」

生徒

「コントローラから変数を渡す方法も覚えやすかったです。{{ name }}の書き方が一番印象に残りました！」

先生

「Twigの変数展開はとてもシンプルで扱いやすいですよね。今後は繰り返し処理や条件分岐も学んでいくと、もっとできることが増えていきますよ。」

生徒