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

生徒

「先生！最近“SPA”っていう言葉をよく聞くんですが、Flaskでも作れるんですか？」

先生

「はい、もちろんです。SPA（Single Page Application）は、ページを再読み込みせずにコンテンツを切り替える仕組みのことです。Flaskでも“非同期通信”を使えば実現できますよ。」

生徒

「非同期通信ってなんですか？なんだか難しそうです…」

先生

「非同期通信とは、ページ全体をリロードせずに必要なデータだけをサーバーから取ってくる方法のことです。たとえばニュースサイトで“もっと読む”をクリックすると、ページを再読み込みしないで新しい記事が出てくることがありますね。あれが非同期通信です。」

生徒

「なるほど！それなら、Flaskでもできそうですね！」

先生

「その通りです！今日はFlaskとJavaScriptを使って、ページをリロードせずにデータを表示する仕組みを作ってみましょう。」

1. FlaskでSPAを作るための基本概念

FlaskでSPA化を始めるには、まず「サーバー側（Flask）」と「クライアント側（JavaScript）」を分けて考えることが大切です。サーバー側はデータを返す役割、クライアント側はそのデータを表示する役割を持ちます。

今回のゴールは、FlaskからJSON（ジェイソン）形式でデータを受け取り、JavaScriptでHTMLを書き換えて表示することです。これが“非同期通信”の基本です。

2. FlaskでJSONデータを返すAPIを作ろう

まず、FlaskでJSONデータを返すルートを作りましょう。JSONとは、データを「名前」と「値」の組み合わせで表現するフォーマットで、JavaScriptと相性がとても良い形式です。


from flask import Flask, jsonify, render_template

app = Flask(__name__)

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

@app.route('/api/message')
def get_message():
    data = {"message": "Flaskから非同期でデータを取得しました！"}
    return jsonify(data)

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

このコードでは、/api/messageにアクセスするとJSONデータを返します。たとえば、ブラウザでhttp://localhost:5000/api/messageにアクセスすると、次のような結果が見られます。


{"message": "Flaskから非同期でデータを取得しました！"}

3. JavaScriptでFlaskから非同期にデータを取得する

次に、HTML側でJavaScriptを使ってFlaskのAPIからデータを取得してみましょう。非同期通信を行うには、fetch()という関数を使います。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask SPA サンプル</title>
</head>
<body>
    <h1>Flask × JavaScriptで非同期通信</h1>
    <button id="loadBtn">データを取得</button>
    <p id="result"></p>

    <script>
        document.getElementById("loadBtn").addEventListener("click", async () => {
            const response = await fetch("/api/message");
            const data = await response.json();
            document.getElementById("result").textContent = data.message;
        });
    </script>
</body>
</html>

このHTMLでは、「データを取得」ボタンをクリックすると、Flaskの/api/messageからデータを取得し、画面の

タグに結果を表示します。

つまり、ページを再読み込みせずにサーバーから新しいデータを取得できるわけです。これが非同期通信の基本動作です。

4. SPAとは何か？Flaskでのイメージをつかもう

SPA（Single Page Application）とは、名前の通り「1つのページで完結するWebアプリケーション」のことです。従来のWebサイトでは、ページを移動するたびにサーバーから新しいHTMLを読み込む必要がありました。

しかしSPAでは、最初に読み込まれた1つのHTMLを土台にして、JavaScriptが動的にページ内容を切り替えます。これにより、表示がとてもスムーズになり、アプリのような操作感を実現できます。

FlaskでSPAを構築する場合、APIとしてJSONを返す部分と、フロント側でそのデータを描画する部分に分けて考えることが重要です。

5. 複数データを非同期に表示してみよう

次は、複数のデータをFlaskから取得してリスト表示してみましょう。Python側で複数のメッセージをJSONで返すようにします。


@app.route('/api/items')
def get_items():
    items = [
        {"id": 1, "name": "りんご"},
        {"id": 2, "name": "バナナ"},
        {"id": 3, "name": "みかん"}
    ]
    return jsonify(items)


<button id="showItems">フルーツ一覧を表示</button>
<ul id="itemList"></ul>

<script>
    document.getElementById("showItems").addEventListener("click", async () => {
        const response = await fetch("/api/items");
        const items = await response.json();
        const list = document.getElementById("itemList");
        list.innerHTML = "";
        items.forEach(item => {
            const li = document.createElement("li");
            li.textContent = item.name;
            list.appendChild(li);
        });
    });
</script>

この例では、FlaskがJSON形式でフルーツのデータを返し、JavaScriptがそれを受け取ってリストに追加しています。ページ全体は再読み込みされず、必要な部分だけが更新されます。

6. Flask × 非同期通信で学ぶWebの仕組み

ここまで学んだ非同期通信の仕組みを使うことで、ページの読み込みが速くなり、ユーザー体験が向上します。これがSPAの第一歩です。

Flaskを使えば、Pythonで簡単にAPIを作成できるため、フロントエンド（JavaScript）との連携がしやすくなります。特にfetch()やasync/awaitといった最新のJavaScript文法を使うと、コードも読みやすくなります。

たとえるなら、従来のWebサイトが「ページごとに本をめくる」ような仕組みだったのに対して、SPAは「同じページ内で内容が自動的に変わる電子書籍」のようなものです。

まずはこの非同期通信の仕組みを理解して、Flaskで動的なWebアプリケーションを作る第一歩を踏み出しましょう。

まとめ

ここまで学んできた内容を振り返ると、Flask と JavaScript を組み合わせてページの一部分だけを動的に更新する仕組みが、どれほどシンプルで扱いやすいものかが見えてきます。サーバー側では Flask がデータを返し、クライアント側では JavaScript がそのデータをもとに HTML を書き換える。この明確な役割分担が理解できると、Web アプリケーションの動作がぐっと身近なものに感じられるようになります。

特に、最初に読み込んだページを土台にして必要な部分だけを更新していくという考え方は、SPA（Single Page Application）の基本となる重要な概念です。ページ全体を再読み込みする必要がないため動作が軽く、ユーザーにとって自然で滑らかな操作体験を実現できます。従来の「リンクを押すたびにページが切り替わるWebサイト」とは異なる仕組みであることを、今回の学習を通して体感できたのではないでしょうか。

Flask 側では通常のルートで HTML を返し、API 用のルートで JSON を返すという二つの役割を分けて設計しました。これは、今後機能が増えていくアプリケーションでも応用できる基本的なパターンです。画面の構造を決める部分はテンプレートに任せ、ユーザー操作に応じて変わる部分は JavaScript が担うことで、可読性や拡張性が高い構成を作ることができます。

JavaScript では fetch() を使ってデータを取得し、返ってきた JSON の値を HTML に反映しました。ボタンを押すと表示内容が変わるといった動きは、極めてシンプルなコードで表現できます。動きが分かりやすいため、初心者でも仕組みを理解しやすく、また応用も効きます。例えば今後は読み込み中の表示をつけたり、複数のボタンやセクションにデータを反映したりすることで、より本格的な動きへ発展させることができます。

おさらいのサンプルコード

今回学んだ内容を簡単に再現できるサンプルとして、以下のコードを再掲します。


from flask import Flask, jsonify, render_template

app = Flask(__name__)

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

@app.route("/api/hello")
def api_hello():
    return jsonify({"message": "Flask から取得したメッセージです"})

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


<button id="btn">メッセージを読み込む</button>
<p id="text"></p>

<script>
document.getElementById("btn").addEventListener("click", async () => {
    const res = await fetch("/api/hello");
    const data = await res.json();
    document.getElementById("text").textContent = data.message;
});
</script>

このように、Flask で API を作り、JavaScript でデータを取得し、HTML を書き換えるという三つの流れを覚えることで、より高度な SPA へ発展させるための基礎が身につきます。まずは身近なデータから試しながら、少しずつ応用できる範囲を広げていくと良いでしょう。

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

生徒

「今日学んだ非同期通信の仕組みで、ページをそのままにしたまま内容だけが変わるのがすごく不思議でした。でもコードを見ると意外とシンプルなんですね。」

先生

「そうですね。まずは Flask がデータを返し、JavaScript がそのデータを画面に反映するという流れを掴めれば、ほとんどの動きは応用できますよ。」

生徒

「fetch() を使って JSON を受け取るところも、意外と読みやすかったです。何度か書いてみたら覚えられそうです。」

先生

「その調子です。まずは動かしてみることが大切です。少しずつ書き換えながら、どこがどう変わるのかを確認してみてください。」

生徒

「次はリストのデータをもっと増やしたり、ボタンを追加したりして、いろいろな画面変化を試してみたいです。」