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

生徒

「先生、FlaskとjQueryを使ってデータをやり取りする方法を知りたいです。どうすればいいんですか？」

先生

「良いね。FlaskはPythonで作られたWebフレームワークで、サーバー側の処理を担当するんだ。一方、jQueryはJavaScriptで書かれたライブラリで、Webページの動きを簡単に操作できるよ。」

生徒

「なるほど！じゃあ、この2つを組み合わせると、ページをリロードせずにデータを送受信できるってことですか？」

先生

「その通り！それを“非同期通信（Ajax通信）”と呼ぶんだ。今回はFlaskとjQueryを使って、その仕組みを実際に作ってみよう！」

1. FlaskとjQueryを使ったAPI通信とは？

FlaskとjQueryを組み合わせると、サーバーとブラウザの間でデータをやり取りすることができます。例えば、ユーザーがボタンをクリックしたときに、サーバーへデータを送信し、その結果をページに表示するといった動作が可能になります。

この通信方法は「Ajax（エイジャックス）」と呼ばれ、ページを再読み込みせずにデータを送受信できるのが大きな特徴です。これにより、Webアプリケーションをもっと動的で使いやすくできます。

2. まずはFlaskの基本設定をしよう

Flaskを使うためには、まずPythonの環境を整える必要があります。Pythonがインストールされている状態で、次のコマンドを使ってFlaskをインストールしましょう。


pip install flask

インストールが完了したら、次のように簡単なサーバーを作ってみます。


from flask import Flask, jsonify, request, render_template

app = Flask(__name__)

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

@app.route('/api/data', methods=['POST'])
def api_data():
    data = request.json
    name = data.get('name')
    response = {'message': f'{name}さん、こんにちは！FlaskとjQueryの通信ができました。'}
    return jsonify(response)

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

このコードでは、/api/dataというAPIエンドポイントを作成しています。ここにjQueryからデータを送信すると、Flaskがそれを受け取り、JSON形式で返してくれます。

3. HTMLとjQueryの準備をしよう

次に、Flaskのtemplatesフォルダの中にindex.htmlを作成します。HTMLの中でjQueryを使い、ボタンをクリックしたときにFlaskへデータを送信します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>FlaskとjQuery通信の例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="p-4">
    <h2>FlaskとjQueryでAPI通信してみよう！</h2>
    <input type="text" id="name" placeholder="名前を入力してください">
    <button id="sendBtn">送信</button>
    <p id="result" class="mt-3 text-success"></p>

    <script>
        $(document).ready(function() {
            $("#sendBtn").click(function() {
                let name = $("#name").val();
                $.ajax({
                    url: "/api/data",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({name: name}),
                    success: function(response) {
                        $("#result").text(response.message);
                    },
                    error: function() {
                        $("#result").text("エラーが発生しました。");
                    }
                });
            });
        });
    </script>
</body>
</html>

このHTMLでは、ユーザーが入力した名前をサーバーに送信し、その返信メッセージをページ上に表示します。ここで使われている$.ajax()は、jQueryのAjax通信を行う関数です。

4. FlaskとjQueryで非同期通信を実行してみよう

それでは、作成したプログラムを実行してみましょう。ターミナルで次のコマンドを実行します。


python app.py

実行すると、http://127.0.0.1:5000にアクセスできるようになります。ブラウザで開き、名前を入力して「送信」ボタンを押すと、サーバー側からメッセージが返ってくるのが確認できます。

画面に「〇〇さん、こんにちは！FlaskとjQueryの通信ができました。」と表示されれば成功です。

5. JSONとは？通信の中身を理解しよう

FlaskとjQueryの間でやり取りされているデータは、JSON（ジェイソン）形式です。JSONとは、JavaScript Object Notationの略で、データを「キー」と「値」の組み合わせで表現する方法です。

例えば、次のような形です。


{"name": "太郎", "age": 20}

Flaskでは、Pythonの辞書型（dict）をjsonify()でJSONに変換して返すことができます。一方、jQueryではこのJSONデータを受け取り、HTML上に表示することができます。

6. Ajax通信を使うメリットとは？

Ajax通信を使うと、ページ全体をリロードすることなく、必要な部分だけを更新できます。例えば、チャットアプリや検索候補表示（オートコンプリート）のような動的なWebアプリケーションに非常に便利です。

もしこの機能がなければ、ボタンを押すたびにページが更新されてしまい、ユーザー体験が悪くなってしまいます。Ajaxを使うことで、よりスムーズで快適な操作が可能になるのです。

7. jQueryとFlaskを連携させるときの注意点

FlaskとjQueryを連携するときに注意すべきなのは、「URL」と「データ形式」です。サーバー側ではJSON形式を想定しているため、contentType: "application/json"を設定しておく必要があります。

また、app.run(debug=True)を使うと開発中にリアルタイムで変更を確認できるので便利です。ただし、実際に公開するとき（本番環境）にはdebug=Falseにしましょう。

まとめ

FlaskとjQueryによるAPI通信の全体像を振り返ろう

この記事では、FlaskとjQueryを使ってAPI通信を行う方法について、初心者の方でも理解しやすいように、基本から順番に解説してきました。 Flaskはサーバー側でデータを受け取り、処理を行い、結果を返す役割を担います。一方で、jQueryはブラウザ側でユーザーの操作を受け取り、必要なタイミングでサーバーへデータを送信する役割を持っています。この二つを組み合わせることで、ページを再読み込みせずにデータをやり取りできる非同期通信が実現できます。

特に重要なのは、「画面はそのまま、裏側だけで通信が行われている」という点です。ボタンを押した瞬間にサーバーと通信し、その結果だけを画面に反映できるため、ユーザーにとって操作が途切れず、快適なWebアプリになります。これは、従来のフォーム送信のように毎回ページ全体を更新する仕組みとは、大きく異なるポイントです。

サーバー側とクライアント側の役割を整理する

Flask側では、API用のURLを用意し、POSTやGETといったHTTPメソッドを使って、外部からのリクエストを受け取ります。受け取ったデータはPythonの辞書として扱い、処理結果をJSON形式で返すことで、jQuery側が理解できる形になります。これにより、データの受け渡しがシンプルになり、 Webアプリ全体の構造も分かりやすくなります。

jQuery側では、ユーザーの入力やクリックといった操作をきっかけに、 $.ajax()を使ってサーバーへデータを送信します。このとき、どのURLに、どの形式でデータを送るのかを正しく指定することが重要です。サーバーから返ってきたJSONデータは、そのまま画面に表示したり、条件分岐に使ったりすることができます。

学んだ内容を活かせるシンプルな通信例


// jQueryを使ったシンプルなAPI通信の例
$.ajax({
    url: "/api/data",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({ name: "太郎" }),
    success: function(response) {
        console.log(response.message);
    }
});

このようなコードを書くだけで、Flask側とデータのやり取りができるようになります。難しく見えるかもしれませんが、「データを送る」「結果を受け取る」という流れを意識すれば、一つひとつの処理はとてもシンプルです。まずは動かしてみて、通信の流れを体感することが理解への近道です。

非同期通信を理解すると広がる可能性

今回学んだFlaskとjQueryのAPI通信は、フォーム送信だけでなく、さまざまな機能に応用できます。例えば、検索結果をリアルタイムで表示したり、コメント投稿を即座に反映したりすることも可能です。これらはすべて、非同期通信という考え方が土台になっています。

最初は仕組みを理解するだけで精一杯かもしれませんが、繰り返し使っていくうちに、「この場面ではAPI通信を使おう」と自然に考えられるようになります。 FlaskとjQueryの連携は、 Webアプリ開発の基礎体力を身につけるうえで、とても良い練習題材だと言えるでしょう。

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

生徒

「FlaskとjQueryで通信できるようになって、ボタンを押しただけで画面が変わる仕組みが少し分かってきました。ページが切り替わらないのに、ちゃんとデータが動いているのが不思議です。」

先生

「それが非同期通信の面白いところだね。裏側ではサーバーとやり取りしているけれど、ユーザーには待ち時間を感じさせない。これがWebアプリを快適にする大きなポイントなんだ。」

生徒

「最初は難しそうだと思っていましたが、役割を分けて考えると、意外と整理できますね。 Flaskが受け取って、jQueryが表示する、という流れが見えてきました。」

先生

「その理解ができれば十分だよ。あとは少しずつ機能を増やしながら、通信の回数やデータの扱い方に慣れていこう。今日学んだ内容は、これからのWeb開発で必ず役に立つよ。」

FlaskとjQueryでAPI通信する方法！初心者向けステップガイド