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

生徒

「先生、Flaskでフォームを送信したら、ページをリロードせずに結果を表示したいんですけど、どうすればいいですか？」

先生

「それには“非同期通信”を使う方法があります。JavaScriptのAjax（エイジャックス）機能を使えば、Flaskとデータをやり取りしてもページを再読み込みする必要がなくなりますよ。」

生徒

「Ajaxって何ですか？難しそうな名前ですね…」

先生

「Ajaxは“非同期通信”という意味で、ブラウザとサーバーが裏側でデータをやり取りできる仕組みです。たとえば、Twitterで『いいね』ボタンを押してもページ全体はリロードされませんよね？あれもAjaxです。」

生徒

「なるほど！Flaskでも同じようにできるんですね！」

先生

「その通り！では、FlaskとAjaxを使ってフォームを非同期で送信する方法を実際に学んでみましょう！」

1. FlaskとAjaxを使うと何ができるの？

FlaskでAjaxを使うと、ページを再読み込みせずにサーバーとデータの送受信ができるようになります。これにより、ユーザーが画面を操作するたびにページ全体が切り替わることなく、必要な情報だけをその場で更新できます。 Webアプリがより快適に感じられる理由は、こうした非同期通信の仕組みにあります。

たとえば、フォームに名前を入力して「送信」ボタンを押した瞬間に、画面の一部だけが切り替わり、「こんにちは〇〇さん！」というメッセージがすぐ表示されるといった動きが可能です。このとき、ブラウザは裏側でFlaskにデータを送信し、結果だけを受け取って表示しています。

これは、サーバー（Flask）とブラウザ（JavaScript）がリアルタイムに通信している ために実現できる動きです。ユーザーは通信を意識する必要がなく、自然な操作感でWebアプリを利用できます。

Ajaxを使うメリットは次の通りです。

ページ全体をリロードしないので画面表示が速い
入力途中の内容が消えず、操作がスムーズになる
必要なデータだけを送受信でき、処理が効率的

まずは「ページを切り替えずに結果を表示できる」という点を理解するだけで十分です。次のような非常に簡単なイメージを持っておくと、後の解説が分かりやすくなります。


// ボタンを押したらサーバーにデータを送るイメージ
fetch("/submit", {
    method: "POST",
    body: new FormData()
})
.then(response => response.json())
.then(data => {
    console.log(data);
});

このように、Ajaxを使うことで「クリック → すぐ結果表示」という流れを作ることができます。 FlaskとAjaxの組み合わせは、初心者でも扱いやすく、動きのあるWebアプリを作るための第一歩としてとてもおすすめです。

2. Flask側の準備をしよう

ここでは、Ajaxから送られてくるフォームデータを受け取るための、 Flask側の基本的な準備を行います。 FlaskはとてもシンプルなWebフレームワークなので、初心者でも少ないコードでサーバーを動かすことができます。まずは「フォームのデータを受け取って、結果を返す役割がFlaskにある」という点を押さえておきましょう。

Flaskがまだインストールされていない場合は、ターミナルやコマンドプロンプトで次のコマンドを実行します。これだけで、Flaskを使う準備は完了です。


pip install flask

次に、Flaskアプリの基本となるサーバーコードを作成します。以下のコードでは、トップページを表示する処理と、 Ajax POSTで送られてきたフォームデータを受け取る処理を定義しています。プログラミング未経験の方は、「URLごとに処理を書く」というイメージを持つと理解しやすくなります。


from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/submit", methods=["POST"])
def submit():
    name = request.form.get("name")
    message = f"{name}さん、フォームが正常に送信されました！"
    return jsonify({"result": message})

if __name__ == "__main__":
    app.run(debug=True)

このコードでは、@app.routeという書き方で、「どのURLにアクセスされたときに、どの処理を行うか」を指定しています。 "/"は最初に表示されるページ、 "/submit"はフォーム送信専用の受付窓口だと考えると分かりやすいでしょう。

ポイント解説：

request.form.get("name")は、フォームに入力された内容を取り出すための命令です。 HTMLのname="name"と対応しています。
jsonify()を使うことで、 FlaskからJavaScriptへデータを分かりやすい形で返せます。 Ajax通信では、このJSON形式がよく使われます。
@app.route("/submit", methods=["POST"])は、「POST通信だけを受け取る」という意味があり、 Ajaxフォーム送信に欠かせない設定です。

ここまで準備できれば、Flask側は「データを受け取って返す」役割をしっかり果たせます。次のステップでは、このサーバーに対して、ブラウザからAjaxでデータを送信する仕組みを作っていきます。

3. HTMLとJavaScriptでAjaxフォームを作る

ここでは、実際にブラウザ側で動くHTMLとJavaScriptを使って、 Ajaxによる非同期フォーム送信を実装します。プログラミング未経験の方は、「HTMLは画面を作る役割」「JavaScriptは動きをつける役割」と考えると分かりやすいでしょう。フォーム送信の流れを一つずつ確認しながら進めていきます。

まずは、ユーザーが名前を入力するためのフォームを用意し、送信ボタンが押されたタイミングでJavaScriptが動くようにします。この時点では、まだページ遷移は起きません。 JavaScriptが送信処理を横取りすることで、非同期通信が可能になります。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flaskで非同期フォーム送信</title>
</head>
<body>
    <h1>FlaskとAjaxでフォーム送信！</h1>

    <form id="userForm">
        <input type="text" name="name" id="name" placeholder="名前を入力してください">
        <button type="submit">送信</button>
    </form>

    <p id="response"></p>

    <script>
        document.getElementById("userForm").addEventListener("submit", function(event) {
            event.preventDefault(); // ページのリロードを防ぐ

            const formData = new FormData(this);

            fetch("/submit", {
                method: "POST",
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("response").textContent = data.result;
            })
            .catch(error => console.error("エラー:", error));
        });
    </script>
</body>
</html>

このコードでは、フォームが送信された瞬間に submitイベントが発生し、 JavaScriptがその動きを制御しています。 fetch()を使うことで、 Flaskサーバーへデータを送信し、返ってきた結果だけを画面に反映できます。

ここでのポイント：

event.preventDefault()は、本来のフォーム送信動作を止めるために必須です。これがないとページが再読み込みされてしまいます。
FormData(this)を使うと、入力欄の内容をまとめて取得でき、初心者でも簡単にデータ送信ができます。
fetch()はサーバーと通信するための命令で、 Ajax POSTを実現する中心的な役割を担います。
サーバーから返されたJSONデータを使って、ページの一部だけを書き換えることで、非同期通信らしい動きを実感できます。

4. 実行してみよう！FlaskとAjaxの連携確認

ここまで準備ができたら、実際にFlaskサーバーを起動して動作を確認してみましょう。ターミナルやコマンドプロンプトでPythonファイルを実行し、ブラウザから指定したURLにアクセスします。画面が表示されたら、フォームに名前を入力して「送信」ボタンをクリックしてください。

すると、ページ全体は切り替わらず、画面の下に次のようなメッセージだけが表示されます。これは、JavaScriptが裏側でFlaskにデータを送信し、返ってきた結果だけを画面に反映しているためです。


太郎さん、フォームが正常に送信されました！

入力内容を変えて再度送信しても、ページがリロードされないことを確認できるでしょう。この動きこそが、非同期通信（Ajax POST）の大きな特徴です。ユーザーにとって待ち時間が少なく、操作しやすい画面になることを実感できるはずです。

5. Ajax POSTの流れを図でイメージしよう

理解を深めるために、データの流れを簡単に整理してみましょう。

ユーザーがフォームを送信する
JavaScriptのAjaxがFlaskにPOSTリクエストを送る
Flaskがデータを受け取り、処理を行う
FlaskがJSON形式で結果を返す
JavaScriptが結果を画面に表示する

このように、Ajaxを使うことで、ページをリロードせずにスムーズに情報を更新できるのです。

6. よくあるエラーと対処法

初心者がよくつまずくポイントも見ておきましょう。

フォーム送信後にページがリロードされる：
→ event.preventDefault()が書かれているか確認しましょう。
Flaskがエラーを出す：
→ @app.routeのURLとfetchのURLが一致しているか確認してください。
ブラウザがJSONを受け取れない：
→ Flask側でjsonify()を使ってJSONを返しているかチェックしましょう。

7. AjaxとFlaskを応用すると何ができる？

今回のようなフォーム送信以外にも、FlaskとAjaxを使えばさまざまなWebアプリを作ることができます。

リアルタイムコメント投稿機能
ページの一部だけを更新するダッシュボード
自動保存フォーム
投票・アンケートアプリ

つまり、FlaskとAjaxを理解すれば、より「動きのあるWebアプリ」を作れるようになります。

8. AjaxとFetch APIの違いも覚えておこう

実は、Ajaxは「考え方の名前」であり、Fetch APIはその実現方法のひとつです。以前は「XMLHttpRequest（エックスエムエルエイチティーティーピーリクエスト）」という古い方法が使われていましたが、今ではFetch APIを使うのが主流です。

Fetch APIを使えば、より短いコードで同じことができるため、今後の学習ではFetch APIもあわせて覚えておくと良いでしょう。

まとめ

FlaskとAjaxによる非同期フォーム送信の全体像を振り返る

この記事では、Flaskを使ったWebアプリケーションにおいて、Ajaxを活用した非同期フォーム送信の仕組みを、初心者にも分かりやすい形で段階的に解説してきました。従来のフォーム送信では、送信ボタンを押すたびにページ全体が再読み込みされ、ユーザーの操作が一時的に中断されてしまうという課題がありました。しかし、FlaskとAjaxを組み合わせることで、この問題を解消し、スムーズで直感的なユーザー体験を実現できます。

非同期通信を使う最大の特徴は、ページの一部だけを更新できる点にあります。ブラウザとサーバーが裏側でデータをやり取りするため、画面遷移を伴わずに結果を表示できます。これは、フォーム送信だけでなく、コメント投稿、いいね機能、検索結果の即時表示など、多くのWebサービスで使われている基本的な仕組みです。 Flaskでこの考え方を理解することは、実践的なWeb開発への大きな一歩となります。

Flask側の役割とAjax通信の関係

Flask側の処理では、フォームから送信されたデータを受け取り、必要な処理を行ったうえでJSON形式のデータを返す役割を担っています。今回の記事では、request.formを使ってフォームデータを取得し、 jsonify()で結果を返すという、非常に基本かつ重要な流れを学びました。この仕組みを理解しておくことで、FlaskアプリとJavaScriptの連携が一気に分かりやすくなります。

また、URL設計やHTTPメソッドの指定も重要なポイントです。 Ajax POSTでは、データ送信にPOSTメソッドを使い、 Flask側でもmethods=["POST"]を正しく指定する必要があります。クライアント側とサーバー側の設定が一致していないと、エラーの原因になるため、両者の対応関係を意識しながら実装することが大切です。

JavaScriptとFetch APIで実現する非同期処理

フロントエンド側では、JavaScriptを使ってフォーム送信を制御し、 Fetch APIによってFlaskへリクエストを送信しました。特に重要なのが、event.preventDefault()によるページリロードの防止です。これがなければ、非同期通信を実装しても従来通りページが再読み込みされてしまいます。この一行が、Ajaxフォームの動作を支える重要な役割を果たしています。

Fetch APIは、従来のAjax実装よりもシンプルで読みやすく、初心者でも扱いやすい点が特徴です。 FlaskとFetch APIを組み合わせることで、少ないコード量でも実用的な非同期フォーム送信を実現できます。今回の例を応用すれば、入力チェックやエラーメッセージの即時表示なども簡単に追加できます。

基本を確認するためのシンプルな送信例

ここで、非同期フォーム送信の基本的な流れをもう一度整理するために、最小構成の送信処理を振り返ってみましょう。この形を理解しておけば、さまざまなAjax処理に応用できます。


fetch("/submit", {
    method: "POST",
    body: new FormData(document.getElementById("userForm"))
})
.then(response => response.json())
.then(data => {
    console.log(data.result);
});

このように、フォームの内容をそのまま送信し、サーバーから返ってきたJSONデータを受け取って処理するだけで、ページをリロードしないフォーム送信が完成します。非同期通信の考え方を理解することで、 Flaskアプリの表現力は大きく広がります。

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

生徒

「Flaskでフォームを送信するときに、どうしてページがリロードされなくなるのかが、やっと理解できました。 Ajaxって特別なものじゃなくて、仕組みを知ればシンプルですね。」

先生

「その通りです。非同期通信は考え方をつかめば、とても便利な技術です。 FlaskとAjaxの役割分担が分かると、応用もしやすくなります。」

生徒

「フォーム送信だけでなく、コメント投稿やリアルタイム更新にも使えそうですね。」

先生

「まさにその通りです。今回学んだFlaskとAjaxの基礎は、動きのあるWebアプリを作るための土台になります。ぜひいろいろな機能に応用してみてください。」