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

生徒

「Symfonyでフォームを送信するとき、画面を更新せずに送る方法ってあるんですか？」

先生

「もちろんありますよ。Ajaxという仕組みを使えば、ページを切り替えずにデータだけ送れます。」

生徒

「Ajaxってなんだか難しそうです…。初心者でも使えますか？」

先生

「大丈夫ですよ。Ajaxは『ページをそのままにしてデータだけ送る郵便屋さん』みたいなイメージです。Symfonyでも簡単に使えるので一緒に学んでいきましょう。」

1. Ajaxとは？初心者向けにわかりやすく説明

Ajaxとは、画面全体を更新せずにデータだけを送るための仕組みのことです。正式名称は「Asynchronous JavaScript and XML（非同期ジャバスクリプトとXML）」ですが、初心者の方は難しく考えなくて大丈夫です。

日常のイメージで例えると、Webページが「家」だとすると、Ajaxは「家を建て替えずに荷物だけ交換する宅配便」のようなものです。つまり、画面の見た目を変えずに必要な情報だけを送ったり受け取ったりできるのです。

Symfonyのフォームでも、Ajaxを使うことで、ページを再読み込みせずスムーズにデータ送信ができます。これが「非同期通信」と呼ばれる動作です。

2. SymfonyのフォームとAjaxを組み合わせるメリット

SymfonyでAjaxを使うと、次のようなメリットがあります。

ページの再読み込みがなくなるため操作がスムーズになる
ユーザーに素早い反応を返せるため使いやすいアプリになる
バックエンド（Symfony）とフロント（ブラウザ）を整理して開発できる

たとえば入力フォームで「確認メッセージだけを表示したい」「一部のエリアだけ更新したい」といった場面にとても便利です。Webサービスでよく見られる滑らかな動きは、このAjaxが使われていることが多いのです。

3. SymfonyでAjaxフォームを作る基本の流れ

フォームをAjaxで送信するしくみは次の5つのステップです。

フォームを通常どおりTwigテンプレートに表示する
JavaScriptでフォーム送信イベントをキャッチする
フォームの内容を取得し、Ajaxで送信する
Symfony側のコントローラで入力内容を受け取る
結果をJSON形式で返し、画面側で表示する

このように、SymfonyのフォームとJavaScriptが協力して動くことで、滑らかな非同期フォーム送信が実現します。

4. TwigでAjaxフォームを表示する例

まずTwigでフォームを表示します。ここではフォームのHTMLとJavaScriptを一緒に記述し、Ajaxで送信できるようにします。


<form id="contactForm">
    {{ form_row(form.name) }}
    {{ form_row(form.email) }}
    <button type="submit" class="btn btn-primary">送信</button>
</form>

<script>
document.getElementById("contactForm").addEventListener("submit", function(e){
    e.preventDefault();
    let formData = new FormData(this);

    fetch("/ajax/contact", {
        method: "POST",
        body: formData
    }).then(response => response.json())
    .then(data => {
        alert(data.message);
    });
});
</script>

JavaScriptのfetchは非同期通信を行うための機能で、Ajaxとほぼ同じ動きをします。「フォーム送信を止めて、代わりにJavaScriptで送信している」という点がポイントです。

5. SymfonyのコントローラでAjaxの受け取り処理を書く

次に、Symfony側でフォームの内容を受け取るコード例を紹介します。


public function ajaxContact(Request $request)
{
    $form = $this->createForm(ContactType::class);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        return $this->json(['message' => '送信が完了しました']);
    }

    return $this->json(['message' => '入力内容を確認してください'], 400);
}

このように、コントローラではフォームのチェックを行い、結果をJSONとして返します。JSONとはデータを整理して返すための文章のような形式で、JavaScriptととても相性が良い形式です。

6. 非同期フォーム送信の結果を画面に反映する方法

Ajaxフォームの良いところは、返ってきた結果に応じて画面を自由に更新できるところです。メッセージを表示したりフォームをクリアしたり、必要な動作をJavaScriptで追加できます。

例えば、成功メッセージを画面の上に表示する場合、次のような書き方ができます。


<script>
fetch("/ajax/contact", {
    method: "POST",
    body: formData
}).then(response => response.json())
.then(data => {
    document.getElementById("result").innerText = data.message;
});
</script>

このように、Ajaxの結果をページの一部だけに反映できるため、画面を切り替える必要がありません。これが「非同期フォーム送信」の最大の特徴です。