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

生徒

「先生、Flaskでボタンを押したらページをリロードせずにデータを送る方法ってありますか？」

先生

「とても良い質問ですね。それには“Ajax（エイジャックス）”という仕組みを使うと実現できますよ。FlaskとJavaScriptを組み合わせて、ページを再読み込みせずにデータをやり取りできるんです。」

生徒

「Ajaxって聞いたことありますけど、よくわかりません…。JSONとかも関係あるんですか？」

先生

「そうです。Ajaxは、サーバーと非同期（ひどうき）に通信するための仕組みで、Flaskと一緒に使うとすごく便利です。JSONというデータ形式を使って、簡単に情報をやり取りできるんですよ。」

1. Ajaxとは？ページをリロードせずに通信する仕組み

Ajax（エイジャックス）とは、「Asynchronous JavaScript and XML（非同期ジャバスクリプトとエックスエムエル）」の略で、ざっくり言うとページを再読み込みせずにサーバーと通信できる仕組みです。難しい言葉が並んでいますが、やっていることは「必要なデータだけを裏側で取りに行って、画面の一部だけを更新する」というイメージです。

たとえば、ボタンを押したときにページ全体が白くなって読み込み直されるのではなく、結果だけがスッと表示される動きがあります。これがAjaxの良さで、ユーザーから見ると操作が軽く感じられます。フォーム送信や検索、いいねボタンなど、いまのWebサービスでよく見かける動きにも使われています。

初心者向けに一番シンプルな例を出すと、「ボタンを押したらサーバーに合図を送る」という処理は、JavaScriptでは次のように書けます（通信そのもののイメージ用です）。


<script>
  // ボタンを押したらサーバーに「今押したよ」と伝えるイメージ
  fetch("/ajax", { method: "POST" });
</script>

Flaskと組み合わせると、Python（サーバー側）が受け取って処理し、JavaScript（ブラウザ側）が結果を受け取って表示を更新できます。つまり、画面を丸ごと作り直すのではなく、必要な部分だけを更新できるので、スムーズなWebアプリの動きが作れるようになります。

2. JSONとは？データのやり取りに使う共通の言葉

JSON（ジェイソン）とは「JavaScript Object Notation」の略で、データを表すためのシンプルな形式です。ポイントは、人が見ても読みやすく、プログラムでも扱いやすいところで、サーバー（Flask）とブラウザ（JavaScript）の間でデータを送受信するときによく使われます。

イメージとしては、「名前」や「年齢」などの情報にラベルを付けてまとめたメモ帳のようなものです。ラベルがあるので、受け取った側も「あ、これはname（名前）なんだな」と判断しやすく、項目が増えても整理しやすいのが特徴です。

たとえば、ユーザーの情報をJSONで表すと次のようになります。


{"name": "太郎", "age": 20, "city": "東京"}

この例だと、name・age・cityが「キー（項目名）」で、太郎・20・東京が「値」です。Python側では辞書、JavaScript側ではオブジェクトに近い感覚で扱えるため、データの受け渡しがとてもスムーズになります。

（参考）JSONは「入れ子」にもできる

JSONは、情報をまとめて持たせたいときに、次のように中にデータを入れ子で持たせることもできます。住所や設定情報などをひとまとまりにしたいときに便利です。


{"user": {"name": "太郎", "age": 20}, "tags": ["flask", "ajax"]}

最初は「キーと値のセット」とだけ覚えておけばOKです。慣れてくると、こうした形で少し複雑なデータも送れるようになります。

3. FlaskでAjaxリクエストを受け取る基本構成

Flaskでは、JavaScriptから送られてくるAjaxリクエストを受け取り、JSON形式で結果を返すのが基本の形です。難しく考えずに、「ブラウザからデータが届いたら、それを受け取って答えを返す窓口を用意する」とイメージすると分かりやすいです。

ここで大切なのは、ページを表示するための処理とAjax専用の処理を分けて考えることです。Ajax用のURLは、画面を返さず、データだけをやり取りする役割になります。

まずは、最小限で動くFlask側のコードを見てみましょう。


from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route("/ajax", methods=["POST"])
def ajax_post():
    # JavaScriptから送られてきたJSONデータを受け取る
    data = request.get_json()

    # JSONの中から name を取り出す（なければ「名無し」）
    name = data.get("name", "名無し")

    # 返したいメッセージを作る
    message = f"{name}さん、こんにちは！"

    # JSON形式でレスポンスを返す
    return jsonify({"message": message})

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

request.get_json()は、Ajaxで送られてきたJSONデータをそのままPythonで使える形に変換してくれます。そのため、普通の辞書のようにdata.get("name")と書くだけで値を取り出せます。

最後に使っているjsonify()は、「これはJSONとして返しますよ」という合図のようなものです。Ajax通信ではHTMLではなくデータだけを返すので、この書き方が基本になります。まずは受け取る → 処理する → JSONで返すという流れを押さえておけば十分です。

4. JavaScriptからAjaxリクエストを送る

次に、フロントエンド側（HTML＋JavaScript）で、Flaskのエンドポイント/ajaxへリクエストを送ります。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask Ajaxサンプル</title>
</head>
<body>
    <h1>FlaskとAjaxの連携</h1>
    <input type="text" id="name" placeholder="名前を入力してください">
    <button id="sendBtn">送信</button>
    <p id="result"></p>

    <script>
        document.getElementById("sendBtn").addEventListener("click", function() {
            const nameValue = document.getElementById("name").value;

            fetch("/ajax", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: nameValue })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").textContent = data.message;
            });
        });
    </script>
</body>
</html>

このコードでは、JavaScriptのfetch関数を使って、サーバーにデータを送信しています。 Flaskは受け取った名前を使ってメッセージを作り、それをJSONとして返します。

この仕組みにより、ページを再読み込みしなくてもリアルタイムに結果が画面に表示されます。

5. 実際の動き：FlaskとAjaxのやり取り

上のサンプルを実行して、ブラウザのテキストボックスに「花子」と入力し、「送信」ボタンを押すと、次のように表示されます。


花子さん、こんにちは！

ここでは、JavaScriptがFlaskに「花子」というデータを送り、Flaskが「花子さん、こんにちは！」というJSONを返しているのです。

つまり、JavaScript（フロントエンド）がリクエストを送信し、Flask（バックエンド）がJSONで返すというやり取りになっています。

6. Ajax通信が便利な理由

Ajaxの大きなメリットは、ページをリロードせずにデータを更新できることです。これにより、ユーザー体験がスムーズになり、モダンなWebアプリのような動きを実現できます。

たとえば次のような場面で使われます。

チャットアプリで新しいメッセージを表示する
検索フォームで入力と同時に結果を表示する
ボタンを押したときだけ一部の情報を更新する

これらはすべてFlaskとAjaxの連携で実現可能です。

7. FlaskとJSONのやり取りを理解するポイント

FlaskとAjaxを使う際のポイントは次の3つです。

JavaScript側ではJSON.stringify()でデータを文字列に変換して送信
Flask側ではrequest.get_json()で受け取る
レスポンスはjsonify()で返す

この流れを覚えておけば、Flaskとフロントエンドのデータ通信がスムーズになります。特に初心者の方は、「JSON＝サーバーとブラウザの共通言語」と覚えておくと理解しやすいです。

8. ちょっとした応用：入力チェックやエラーメッセージ

FlaskとAjaxを組み合わせると、入力内容のチェックもリアルタイムにできます。たとえば、名前が空だったときにエラーメッセージを返すようにしてみましょう。


@app.route("/ajax", methods=["POST"])
def ajax_post():
    data = request.get_json()
    name = data.get("name", "")
    if not name:
        return jsonify({"message": "名前を入力してください。"})
    return jsonify({"message": f"{name}さん、こんにちは！"})

このようにすると、空欄のままボタンを押すと「名前を入力してください。」と表示されます。 Flask側で条件分岐を行い、JSONで結果を返すことで、リアルタイムなエラーチェックも簡単に作れます。