FlaskでJSONデータを返してフロントエンドで動的表示する方法を完全ガイド！初心者でもわかる連携の基本

FlaskでJSONデータを返してフロント側で動的表示する方法

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

生徒

「先生、Flaskで作ったアプリとJavaScriptを連携して、データを動的に表示するにはどうすればいいですか？」

先生

「いい質問ですね。Flaskでは、サーバー側でJSONデータを返して、フロントエンド（ブラウザ側）でJavaScriptを使って表示する方法がよく使われます。」

生徒

「JSONってよく聞きますけど、どんなものなんですか？」

先生

「JSON（ジェイソン）とは、“JavaScript Object Notation”の略で、データをやり取りするための形式です。人間にも読みやすく、パソコンにも扱いやすい構造をしているんですよ。」

生徒

「なるほど！じゃあFlaskでJSONを返して、それをフロント側で表示するにはどうすればいいんですか？」

先生

「それでは、Flaskとフロントエンドの連携を実際の例で見ていきましょう！」

1. FlaskでJSONを返すとは？

まず、Flask（フラスク）とはPython（パイソン）で作られた軽量なWebフレームワークです。WebアプリケーションやAPI（エーピーアイ：他のプログラムとデータをやり取りする仕組み）を簡単に作ることができます。

Flaskで「JSONを返す」というのは、ブラウザやフロントエンド（HTMLやJavaScriptで作られた画面）に対して、データをJSON形式で送信することを意味します。

たとえば「Pythonで作ったリストや辞書（dictionary）」を、ブラウザが理解できる形式に変換して返すんです。

2. FlaskでJSONデータを返す基本コード

では、FlaskでJSONデータを返すシンプルなサンプルを見てみましょう。以下のようなコードを書きます。


from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/api/data")
def get_data():
    data = {
        "name": "Taro",
        "age": 25,
        "hobby": "プログラミング"
    }
    return jsonify(data)

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

jsonify()関数は、Pythonの辞書型（キーと値のペア）をJSON形式に変換して返してくれる便利な関数です。これを使うことで、ブラウザやJavaScriptが理解できるデータを簡単に送信できます。

3. フロントエンド（HTML＋JavaScript）でJSONを受け取って表示

次に、ブラウザ側のHTMLファイルを作って、Flaskから送られてくるJSONデータを画面に表示してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>FlaskとJSONの連携</title>
</head>
<body>
    <h1>FlaskからのJSONデータを表示</h1>
    <div id="result">データを取得中...</div>

    <script>
        // FlaskのAPIにアクセス
        fetch("/api/data")
            .then(response => response.json())
            .then(data => {
                // JSONデータを受け取ったら表示
                document.getElementById("result").innerHTML = `
                    名前: ${data.name}<br>
                    年齢: ${data.age}<br>
                    趣味: ${data.hobby}
                `;
            })
            .catch(error => {
                document.getElementById("result").innerHTML = "データの取得に失敗しました。";
                console.error("エラー:", error);
            });
    </script>
</body>
</html>

fetch()関数は、JavaScriptでサーバーと通信するための関数です。Flaskで作ったAPI（ここでは/api/data）にアクセスして、その結果をJSONとして受け取っています。

そして、受け取ったデータをHTMLの中に埋め込んで、ユーザーの画面に動的（リアルタイムに変わる）に表示しています。

4. Flaskとフロントエンドを連携させる仕組みを図で理解しよう

初心者の方には、この「サーバーとフロントの関係」が少し分かりづらいかもしれません。簡単に言うと、Flaskが「データを作る係」、フロントエンド（HTMLとJavaScript）が「データを表示する係」です。

流れはこんな感じです：

① ユーザーがWebページを開く
② JavaScriptがFlaskに「データください」とリクエストを送る
③ FlaskがPythonでデータを作り、JSON形式で返す
④ JavaScriptが受け取ったデータをHTMLに書き出して画面に表示

このように、FlaskとJavaScriptは「JSON」という共通の言葉で会話しているイメージです。

5. 動的表示をもう少し発展させてみよう

次に、Flask側で複数のデータを返して、フロントでリスト表示する例を紹介します。例えば、商品の一覧やユーザーリストを表示したい場合に使えます。


from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/api/users")
def get_users():
    users = [
        {"id": 1, "name": "Taro"},
        {"id": 2, "name": "Hanako"},
        {"id": 3, "name": "Jiro"}
    ]
    return jsonify(users)


<ul id="user-list"></ul>

<script>
fetch("/api/users")
    .then(res => res.json())
    .then(users => {
        const list = document.getElementById("user-list");
        users.forEach(u => {
            const li = document.createElement("li");
            li.textContent = `${u.id}: ${u.name}`;
            list.appendChild(li);
        });
    });
</script>

このように、Flaskで複数のデータを返すときは、Pythonのリスト（配列のようなもの）をJSONに変換して返すだけでOKです。JavaScript側ではforEach()で1つずつ取り出して表示します。

6. JSON通信を使うとできること

FlaskでJSONを返す仕組みを理解すれば、次のようなことができるようになります。

チャットアプリのメッセージ一覧をリアルタイム表示
天気情報やニュースの自動更新
ユーザーがボタンを押したら新しいデータを取得して表示

これらはすべて、FlaskでJSONを返してJavaScriptで動的に表示するという仕組みの応用です。Pythonとフロントエンドの両方を理解することで、よりインタラクティブなWebアプリケーションを作ることができます。

まとめ

FlaskとJSON連携の基本を振り返ろう

この記事では、FlaskでJSONデータを返し、それをフロントエンドで受け取って動的に表示するまでの流れを、初心者向けに順を追って解説してきました。 FlaskはPythonで書かれた軽量なWebフレームワークであり、サーバー側でデータを用意し、JSON形式で返す役割を担っています。一方、フロントエンドではHTMLとJavaScriptを使って、そのJSONデータを受け取り、画面の一部を書き換えることで、ページを再読み込みせずに内容を更新できます。

特に重要なのは、「Flaskがデータを返すだけ」「JavaScriptが表示を担当する」という役割分担です。この考え方を理解すると、処理の流れが整理しやすくなり、どこで何が起きているのかを迷わず把握できるようになります。 Flaskとフロントエンドは、JSONという共通の形式を通じて、スムーズにデータのやり取りを行っているのです。

JSONデータを返す仕組みのポイント

FlaskでJSONデータを返すときは、 Pythonの辞書やリストをjsonify()関数で変換するだけで済みます。これにより、ブラウザ側でも扱いやすい形式でデータを送信できます。 APIとしてJSONを返す形にしておくことで、フロントエンドの表示方法を後から変更したり、別の画面や別のアプリから同じデータを使ったりすることも可能になります。

また、フロントエンド側ではfetch()を使ってAPIにアクセスし、返ってきたJSONをJavaScriptのオブジェクトとして受け取ります。そのデータをHTMLに反映することで、ユーザーの操作に応じた柔軟な画面表示が実現できます。この一連の流れが、「動的表示」の基本となります。

基本的なJSON取得と表示のサンプル


// FlaskのAPIからJSONを取得して表示する基本例
fetch("/api/data")
    .then(response => response.json())
    .then(data => {
        document.getElementById("result").textContent =
            data.name + " さんの情報を取得しました";
    });

このように、難しい処理を書かなくても、数行のコードでサーバーと通信し、結果を画面に反映できます。最初はコードの意味が分からなくても、「データを取得して、表示する」という流れを意識するだけで十分です。何度か試しているうちに、自然と理解が深まっていくでしょう。