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

生徒

「Symfonyで入力欄を自由に増やしたり減らしたりできるフォームを作りたいのですが、どうすればできますか？例えば、複数のメールアドレスを追加できるフォームを作りたいです。」

先生

「Symfonyでは、動的にフォームフィールドを追加したり削除したりできる仕組みが用意されています。フォームの項目を増やすのは、紙のアンケートに『追加記入欄』を貼りつけるようなイメージで理解するとわかりやすいですよ。」

生徒

「紙のアンケートみたいに追加できるんですね！どんな仕組みで増えたり減ったりするのか、もっと詳しく知りたいです。」

先生

「では、Symfonyのフォーム処理で動的フィールドを扱う方法を、ゆっくりやさしく説明していきます。」

1. Symfonyで動的フォームフィールドを扱うとは？

Symfonyで動的フォームフィールドを追加・削除するというのは、ユーザーが必要な数だけ入力欄を増やせるようにすることです。「メールアドレスを何個登録しますか？」というような場合、最初から入力欄を固定せず、必要に応じて増やせるのが便利です。

紙の書類にたとえると、「必要なだけ追加入力欄を足すことができる」仕組みです。Symfonyのフォームでは、このような動きができるようにするために、CollectionTypeという仕組みを使います。これは、同じ種類の入力欄を複数まとめて扱うフィールドです。

CollectionTypeは「ひとつのカテゴリを箱のようにまとめておく入れ物」と考えると理解しやすいでしょう。例えば「メールアドレスを複数入力する箱」があり、その中に個別のメールアドレス用入力欄がどんどん追加されるイメージです。

Symfonyで動的フォームと検索するとよく出てくるキーワードには、「Symfony フォーム動的追加」「Symfony CollectionType 追加削除」「Symfony フォーム JavaScript 動的」といったものがあります。この記事では、初心者でも理解できるように、Symfonyフォームの基本的な仕組みを中心にやさしく解説していきます。

2. 動的フォームを作るために必要な仕組み

動的フォームフィールドを扱うには、Symfonyのフォーム処理の中でも少し応用寄りの機能を使います。ですが、見た目より難しくありません。以下のような構造で動かすと理解しやすいです。

複数の項目をまとめるためのCollectionTypeをフォームに追加する
CollectionTypeの中に入れる個別のフォーム（子フォーム）を用意する
JavaScriptで「項目の追加」や「項目の削除」を行うためのボタンを作る

Symfony側では「追加できる箱」をつくり、ブラウザ側ではJavaScriptを使って「箱の中に新しい項目を入れたり取り出したりする」イメージです。

ここでよく使われるオプションが、allow_addとallow_deleteです。これは、フォームフィールドを追加してよいか、削除してよいかを指定する設定です。

紙の書類でたとえると、「追加入力欄を増やしていいよ」「不要な欄は消していいよ」という許可を与えるイメージです。

3. CollectionTypeを使ったフォームの構造を理解しよう

Symfonyで動的フォームフィールドを使う基本パターンとして、次のような流れがあります。

エンティティにリスト形式のプロパティを持たせる（例：複数メールアドレス）
フォームタイプでCollectionTypeを使って複数項目を扱えるようにする
子フォームとして個別の項目のフォームを作成する
JavaScriptで追加・削除ボタンを押すとHTML要素が増減する

まずはSymfonyのフォームタイプのイメージを見てみましょう。


$builder->add('emails', CollectionType::class, [
    'entry_type' => EmailType::class,
    'allow_add' => true,
    'allow_delete' => true,
    'prototype' => true,
]);

これは、emailsというプロパティの中に、複数のメールアドレス入力欄を追加できるフォームを作る例です。entry_typeは、Collection内に並ぶ個々の入力欄の型（種類）を表しています。

動的追加を実現するために重要なのは、prototypeという設定です。これは、JavaScriptで新しい入力欄を追加するときに使う「ひな形」を作る仕組みです。紙の世界でたとえると、コピー機がつくる「白紙のテンプレート」を1枚準備しておくようなものです。

4. Twigテンプレートで動的追加ボタンを作成しよう

Symfonyのフォーム処理では、Twigを使ってフォームを描画します。動的な追加・削除にはJavaScriptが必要ですが、Twig側にも「追加ボタン」「削除ボタン」を設置しておく必要があります。


<div id="email-fields">
    {{ form_widget(form.emails) }}
</div>
<button type="button" id="add-email-btn" class="btn btn-primary">メールアドレスを追加</button>

このようにしてボタンを用意すると、JavaScript側でクリックイベントを拾って、新しい項目をフォームに追加できるようになります。

フォームの削除ボタンについても、各入力欄の横に削除用のボタンを表示しておき、クリックするとその欄を消す仕組みを作れます。

5. JavaScriptで入力欄を追加・削除する仕組み

動的フォームを完成させるためには、JavaScriptでHTML要素を動的に追加していく必要があります。Symfonyでは、data-prototypeという仕組みを利用します。これは、フォームが持つ「新しい項目のテンプレートHTML」です。


<script>
const container = document.getElementById('email-fields');
const addButton = document.getElementById('add-email-btn');

let index = container.children.length;

addButton.addEventListener('click', () => {
    const prototype = container.dataset.prototype;
    const newForm = prototype.replace(/__name__/g, index);
    index++;

    const div = document.createElement('div');
    div.innerHTML = newForm;
    container.appendChild(div);
});
</script>

このJavaScriptでは、Symfonyが用意するテンプレートを使って、新しい入力欄が画面に追加されるようになっています。削除ボタンをつけたい場合は、追加されるHTMLの中にボタンを含めておき、クリック時にその要素を削除するようにします。

この仕組みによって「Symfony フォーム動的追加」「Symfony CollectionType JavaScript」「Symfony フォームフィールド削除」といった検索キーワードの操作が実現できるようになります。