FlaskとAxiosを連携してデータ取得する方法まとめ【初心者向けステップガイド】

FlaskとAxiosを連携してデータ取得する方法まとめ

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

生徒

「先生、Flaskで作ったサーバーからデータを取得したいんですけど、Axiosっていうのを使うと便利って聞きました。どうやって使うんですか？」

先生

「その通り。Axios（アクシオス）は、JavaScriptでHTTP通信を簡単に行うためのライブラリなんだ。Flaskと組み合わせると、非同期でデータをやり取りできるんだよ。」

生徒

「非同期って何ですか？ページをリロードせずにデータをやり取りできるってことですか？」

先生

「そう。例えば、ボタンを押したら即座に新しい情報が表示される、そんな動作を作れる。じゃあ、FlaskとAxiosを連携させて、実際にデータを取得する方法を一緒に学ぼう！」

1. FlaskとAxiosを連携するとは？

FlaskとAxiosを連携させることで、サーバー（Flask）とブラウザ（JavaScript）がデータをやり取りできるようになります。FlaskはPythonで動作する「バックエンド（裏側）」、Axiosはブラウザで動く「フロントエンド（表側）」の役割です。

これを使うと、ページを再読み込みせずにサーバーから最新データを取得したり、フォームの入力内容を送信して結果を表示したりできます。

つまり、Flaskが「データを提供する側」、Axiosが「データを取りに行く側」という関係です。

2. FlaskでAPIを作成しよう

まず、Flaskでデータを返すAPIを作成します。ここでは簡単な例として、サーバー側から「メッセージ」を返すプログラムを作ってみましょう。


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とAxiosの通信に成功しました！"}
    return jsonify(data)

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

/api/messageというURLにアクセスすると、JSON形式でデータを返すAPIです。jsonify()という関数を使うことで、Pythonの辞書データをJSON（ジェイソン）という形式に変換して返しています。

3. JSONとは？

JSON（ジェイソン）とは、データをやり取りするためのフォーマット（形式）です。JavaScriptで扱いやすく、FlaskのようなPythonとも相性がいい形式です。

例えば、次のような形でデータを表します。


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

このように、データを「キー」と「値」のペアで表現します。AxiosはこのJSONを簡単に受け取って使うことができるんです。

4. フロントエンドでAxiosを使う準備をしよう

次に、Flaskが返すデータを受け取るHTMLファイルを作りましょう。templatesフォルダの中にindex.htmlを作成します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>FlaskとAxiosでデータ取得</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body class="p-4">
    <h2>FlaskとAxiosを使ってデータを取得してみよう！</h2>
    <button id="getDataBtn" class="btn btn-primary">データを取得</button>
    <p id="result" class="mt-3 text-success"></p>

    <script>
        document.getElementById("getDataBtn").addEventListener("click", function() {
            axios.get("/api/message")
                .then(function(response) {
                    document.getElementById("result").textContent = response.data.message;
                })
                .catch(function(error) {
                    document.getElementById("result").textContent = "エラーが発生しました。";
                    console.error(error);
                });
        });
    </script>
</body>
</html>

ここで使っているaxios.get()は、FlaskのAPIからデータを取得する関数です。取得に成功すると、response.dataにFlaskが返したデータが入っています。

5. 実行してみよう！

すべてのファイルを保存したら、ターミナルで次のコマンドを実行します。


python app.py

実行後、ブラウザで http://127.0.0.1:5000 にアクセスします。ボタンをクリックすると、Flaskから送られたメッセージが画面に表示されるはずです。

例えば、「FlaskとAxiosの通信に成功しました！」というメッセージが表示されればOKです。

6. FlaskとAxiosを使うメリット

FlaskとAxiosを使うことで、動的なWebアプリケーションを簡単に作ることができます。特に次のようなメリットがあります。

ページをリロードせずにデータを更新できる
サーバーからリアルタイムに情報を取得できる
シンプルなコードでAjax通信を実装できる

例えば、天気情報アプリやチャットアプリ、検索候補をリアルタイムで表示する機能などでも活用されています。

7. AxiosでPOST通信もできる！

今回はデータを「取得」するGET通信を紹介しましたが、Axiosでは「送信」するPOST通信も簡単に実装できます。次のように書くだけです。


<script>
axios.post("/api/send", { name: "花子" })
    .then(function(response) {
        console.log(response.data);
    })
    .catch(function(error) {
        console.error(error);
    });
</script>

このように、Axiosを使えばFlaskとのデータ送受信をスムーズに行えます。JavaScriptの文法に慣れていない人でも、比較的簡単に扱えるのがAxiosの魅力です。

8. Flask×AxiosでWebアプリをもっと便利に！

FlaskとAxiosを連携させることで、ユーザーがページを操作するたびに最新データを取得できるインタラクティブなWebアプリケーションを作成できます。

この仕組みを理解しておくと、今後のFlask開発においてAPI設計や非同期通信の考え方が身につきます。最初は難しく感じるかもしれませんが、一度動くサンプルを作ってみると一気に理解が深まりますよ。

まとめ

FlaskとAxios連携で理解しておきたい全体像

ここまで、FlaskとAxiosを連携させてデータを取得・送信する方法について、初心者向けに段階的に解説してきました。 FlaskはPythonで動く軽量なWebフレームワークであり、サーバー側でデータを管理し、APIとして外部に提供する役割を担います。一方、AxiosはJavaScriptからHTTP通信を簡単に行えるライブラリで、ブラウザ側からFlaskのAPIにアクセスするための便利な道具です。この二つを組み合わせることで、ページの再読み込みを行わずにデータを取得・更新できる、現代的なWebアプリケーションを作れるようになります。

非同期通信を使う意味とメリット

FlaskとAxiosを使った非同期通信の大きな特徴は、ユーザー体験の向上にあります。ボタンを押した瞬間にデータが表示されたり、入力内容に応じて結果が即座に変わったりする動きは、すべて非同期通信によって実現されています。ページ全体を読み込み直す必要がないため、動作が軽く感じられ、操作のストレスも減ります。初心者のうちは「なぜわざわざ分けて通信するのか」と疑問に思うかもしれませんが、実際に動くサンプルを触ることで、その便利さを実感できるはずです。

JSONとAPI設計の考え方

記事の中で登場したJSONは、FlaskとAxiosをつなぐ重要な役割を果たします。 Pythonの辞書とよく似た形でデータを表現できるため、サーバー側とフロントエンド側の橋渡しとして最適です。 APIを作る際には、「どんなデータを返すのか」「どんなキー名にするのか」を意識することで、フロントエンド側の実装も分かりやすくなります。小さなサンプルでも、APIとしてデータを返す経験を積むことで、今後より複雑なアプリを作るときの土台になります。

まとめの中の確認用サンプル


from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/api/summary")
def summary():
    return jsonify({"status": "ok", "message": "FlaskとAxiosの連携を理解しました"})

このように、Flask側ではシンプルにデータを返すだけで構いません。 Axiosを使えば、このJSONデータをブラウザ側で簡単に受け取り、画面表示や処理に利用できます。複雑なことをしなくても、基本構造を押さえるだけで実用的な通信が実現できます。

今後の学習につなげるポイント

FlaskとAxiosの連携を理解すると、ログイン機能、検索機能、フォーム送信、データ保存など、さまざまなWebアプリの基礎構造が見えてきます。今回はGET通信とPOST通信の基本を扱いましたが、実際の開発ではエラー処理やバリデーション、セキュリティ対策なども重要になってきます。まずは「FlaskでAPIを作り、Axiosで呼び出す」という流れをしっかり身につけることが大切です。

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

生徒

「FlaskとAxiosって難しそうだと思っていましたが、サーバーがデータを返して、ブラウザが取りに行くだけなんだと分かってきました。」

先生

「その理解で大丈夫です。最初は仕組みを単純に捉えることが大切ですね。」

生徒

「ページを更新しなくてもデータが変わる仕組みが作れるのは、すごく便利だと感じました。」

先生

「そうですね。FlaskとAxiosを使えるようになると、 Webアプリ開発の幅が一気に広がります。今日学んだ内容をベースに、少しずつ応用に挑戦していきましょう。」

FlaskとAxiosの連携は、初心者にとってWeb開発の考え方を大きく変える重要なステップです。基本を理解し、実際に動かしながら学ぶことで、自信を持って次のレベルのWebアプリ開発に進めるようになります。

公的機関での指導実績【Flask Web開発実践セミナー】