SymfonyでフォームをTwigに表示する方法を完全ガイド！初心者でもできるテンプレート入門

1. Twigとは？Symfony標準の高速テンプレートエンジン

1. Twigとは？Symfony標準の高速テンプレートエンジン

Symfony（シンフォニー）でWeb開発を行う際、避けて通れないのがTwig（トゥイッグ）です。Twigは、PHPのコードの中にHTMLを混ぜて書くのではなく、「見た目（HTML）」と「ロジック（PHP）」を完全に切り離して管理するためのテンプレートエンジンです。

プログラミング未経験の方にとって、PHPのコードの中にechoやforeachが入り乱れる画面作成は非常に複雑に見えますが、Twigを使えば、まるで普通のHTMLを書くような感覚で動的なコンテンツを表示できます。

<!-- PHPでの書き方：記号が多くて間違いやすい -->
<p>こんにちは、<?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>さん！</p>

{# Twigでの書き方：シンプルで直感的！ #}
<p>こんにちは、{{ name }}さん！</p>

このように、Twigは「二重の中括弧 {{ }}」などの直感的な記法（シンタックス）を採用しているため、コードの読みやすさが劇的に向上します。また、セキュリティ面でも、Webサイトへの攻撃（XSSなど）を防ぐための「エスケープ処理」を自動で行ってくれるため、初心者でも安全にプログラムを組めるのが大きなメリットです。

Symfonyで効率的、かつ安全にフォームやページを作成するために、Twigは欠かせないパートナーと言えるでしょう。

2. Symfonyでフォームを作ったら、Twigで表示する

2. Symfonyでフォームを作ったら、Twigで表示する

Symfonyでは、フォームの作成とTwigでの表示が分かれています。まずは、コントローラでフォームを作り、それをTwigテンプレートに渡して、画面に表示する流れになります。

今回は「名前」を入力するだけの簡単なフォームをTwigで表示する方法を見ていきましょう。

3. コントローラでフォームを作成する

3. コントローラでフォームを作成する

まずは、PHPのコントローラでフォームを作成して、Twigに渡します。以下のようなコードになります。

use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class SampleController extends AbstractController
{
    public function index(Request $request): Response
    {
        $form = $this->createFormBuilder()
            ->add('name', TextType::class)
            ->add('send', SubmitType::class, ['label' => '送信'])
            ->getForm();

        return $this->render('form/sample.html.twig', [
            'myForm' => $form->createView()
        ]);
    }
}

ここでは、createFormBuilder()というSymfonyの機能を使ってフォームを作り、render()でTwigテンプレートに渡しています。

4. Twigテンプレートにフォームを表示する方法

4. Twigテンプレートにフォームを表示する方法

次に、Twigファイル（例：form/sample.html.twig）で、画面にフォームを表示します。Twigには、Symfonyのフォーム専用の関数が用意されていて、とても簡単に書けます。

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

{% block body %}
    <h2>名前を入力してください</h2>

    {{ form_start(myForm) }}
        {{ form_row(myForm.name) }}
        {{ form_row(myForm.send) }}
    {{ form_end(myForm) }}
{% endblock %}

form_startは、フォームのはじまりを表すタグ（HTMLでいう<form>）を自動で出力します。

form_rowは、ラベル・入力欄・エラー表示などをまとめて一行で出してくれる便利なタグです。

form_endは、フォームの終わり（</form>）を出力します。

5. 実際の表示例

5. 実際の表示例

ブラウザでこのTwigテンプレートを表示すると、次のようにフォームが画面に表示されます。

    名前を入力してください

    [名前の入力欄]

    [送信ボタン]

このように、Twigを使えばPHPの複雑なコードを書かなくても、簡単にフォームを画面に表示できます。

6. Twigでフォームを個別にカスタマイズする方法

6. Twigでフォームを個別にカスタマイズする方法

フォーム全体を一括で表示する{{ form(myForm) }}という方法もありますが、細かく制御したい場合は、form_rowやform_label、form_widgetを使い分けます。

例えば、ラベルと入力欄を別々に書く場合はこうします：

{{ form_label(myForm.name) }}
{{ form_widget(myForm.name) }}

こうすることで、デザインやレイアウトを細かくコントロールできるようになります。

7. 画面に反映されないときのチェックポイント

7. 画面に反映されないときのチェックポイント

• フォームオブジェクトをcreateView()で変換しているか
• テンプレートに{{ form_start }}などが書かれているか
• Twigファイルの名前とパスが正しいか
• Symfonyキャッシュをクリアしているか

画面にフォームが出ないときは、上記を順番に見直してみてください。

8. Twigでのフォーム表示は初心者にもおすすめ

8. Twigでのフォーム表示は初心者にもおすすめ

Twigを使えば、難しいPHPの記述なしに、視覚的にもわかりやすくフォームを作れます。Webアプリケーション開発では、ユーザーからの入力を受け取るフォームがとても重要です。

Twigはその橋渡し役として、HTMLとPHPのいいとこどりをした書き方ができるので、初心者にもやさしい構成になっています。

まとめ

まとめ

今回の記事では、PHPの人気フレームワークであるSymfonyと、その強力なテンプレートエンジンであるTwigを組み合わせて、Webフォームを画面に表示する具体的な手順について解説してきました。初心者の方にとって、バックエンドのPHPプログラムとフロントエンドのHTML表示をどのように繋ぐかは最初の大きな壁ですが、Symfonyの「フォームコンポーネント」とTwigの「フォーム関数」を使えば、驚くほどスマートに実装できることがお分かりいただけたかと思います。

Symfonyフォームの実装フローをおさらい

Webアプリケーションでユーザー入力を受け付ける仕組みを構築する際は、以下の3つのステップが基本となります。

• コントローラでの定義： FormBuilderを使用して、どのような入力項目（テキスト、数値、ボタンなど）が必要かを定義します。
• Viewへの橋渡し： フォームオブジェクトをcreateView()メソッドで「Twigが理解できる形式」に変換し、テンプレートへ渡します。
• Twigでのレンダリング： form_startやform_rowといった専用の関数を使い、HTML構造を自動生成します。

実戦で役立つ高度なレンダリング手法

基本をマスターしたら、次はデザインのカスタマイズに挑戦してみましょう。記事の中で紹介した form_row は、ラベル、エラーメッセージ、入力ウィジェットをひとまとめに出力してくれますが、実際の現場では「ラベルだけを左側に、入力欄を右側に配置したい」といったレイアウト調整が必要になります。その場合は、以下のように個別のパーツを呼び出す方法が有効です。

<div class="form-group">
    <label class="custom-label">{{ form_label(myForm.name, 'お名前（必須）') }}</label>
    <div class="input-wrapper">
        {{ form_widget(myForm.name, {'attr': {'class': 'form-control', 'placeholder': '例：山田 太郎'}}) }}
    </div>
    <div class="error-msg">
        {{ form_errors(myForm.name) }}
    </div>
</div>

このように、form_widget の第二引数に attr（属性）を指定することで、HTMLの class や id、placeholder をPHP側ではなく、見た目を司るTwig側から直接操作できます。これにより、デザイナーとエンジニアの分業もしやすくなるという大きなメリットがあります。

バリデーションとの連携

また、Symfonyのフォーム機能が優れているのは、見た目だけではありません。PHP側で設定した「入力必須」や「文字数制限」といったバリデーション（入力チェック）の結果を、Twigの form_errors が自動的に検知して表示してくれます。これにより、複雑なJavaScriptやif文を自前で書かなくても、ユーザーに優しいフォーム画面が完成します。

さらなるステップアップに向けて

Symfonyを学ぶ上で、Twigの習得は避けて通れません。しかし、それは決して苦労ではなく、開発効率を劇的に上げるための武器になります。まずは今回紹介した form_start, form_end, form_row の3点セットを使いこなし、少しずつ form_widget などを使った細かいカスタマイズに移行していくのが上達の近道です。

もし画面に何も表示されない場合は、必ずデバッグツールバーを確認し、コントローラから createView() が正しく渡されているか、変数名が一致しているかをチェックしましょう。一つずつ課題をクリアしていけば、Symfonyを使ったWeb開発がもっと楽しくなるはずです。

{# 属性を直接指定して、CSSクラスを追加する例 #}
{{ form_widget(myForm.name, {'attr': {'class': 'my-custom-class'}}) }}

public function index(Request $request): Response
{
    $form = $this->createFormBuilder()
        ->add('name', TextType::class)
        ->add('send', SubmitType::class)
        ->getForm();

    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // ここで送信されたデータを取り出す
        $data = $form->getData();
        // $data['name'] を使ってデータベース保存などを行う
        
        return $this->redirectToRoute('success_page');
    }

    return $this->render('form/sample.html.twig', [
        'myForm' => $form->createView()
    ]);
}