Flaskで非同期処理の進捗をフロント側に通知する方法まとめ｜初心者向けに超ていねい解説

1. Flaskで非同期処理とは何かを理解しよう

1. Flaskで非同期処理とは何かを理解しよう

Flaskの非同期処理とは、時間がかかる作業を裏で進めながら、 画面は止めずに動かし続ける仕組みです。

例えば、料理をしながら洗濯機を回すようなものです。 一つずつ終わるまで待たず、同時に進めます。

Flask 非同期処理、Flask バックグラウンド処理、 Flask タスク管理は初心者がよく検索するキーワードです。

2. なぜ進捗をフロント側に通知したいのか

2. なぜ進捗をフロント側に通知したいのか

時間のかかる処理では、画面が止まると不安になります。

「今30パーセント進みました」と表示されると、 ユーザーは安心して待つことができます。

このように、処理の進み具合を伝えることを 進捗通知と呼びます。

3. Flaskで非同期処理を簡単に始める考え方

3. Flaskで非同期処理を簡単に始める考え方

Flaskでは、重たい処理を別の仕事として分けます。

ここではスレッドという仕組みを使います。 スレッドとは、同時に動く作業係のようなものです。

import threading
import time

def long_task():
    time.sleep(5)
    print("処理完了")

threading.Thread(target=long_task).start()

このコードでは、5秒かかる処理を裏で実行しています。

4. 進捗状況を数字で管理する方法

4. 進捗状況を数字で管理する方法

進捗を伝えるには、今どこまで進んだかを 数字で覚えておく必要があります。

ここでは、とても簡単な変数を使います。

progress = 0

def task():
    global progress
    for i in range(10):
        time.sleep(1)
        progress += 10

このように、作業が進むたびに数字を増やします。

5. Flaskで進捗を取得するAPIを作る

5. Flaskで進捗を取得するAPIを作る

フロント側が進捗を知るには、 Flaskに「今何パーセントですか？」と聞く必要があります。

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/progress")
def get_progress():
    return jsonify({"progress": progress})

この仕組みをAPIと呼びます。 APIとは、質問すると答えを返してくれる窓口です。

6. フロント側で進捗を表示する仕組み

6. フロント側で進捗を表示する仕組み

ブラウザ側では、定期的に進捗を確認します。

これは、先生に「今どこまで進みましたか？」と 何度も聞くようなイメージです。

<script>
setInterval(() => {
    fetch("/progress")
        .then(res => res.json())
        .then(data => {
            console.log(data.progress);
        });
}, 1000);
</script>

1秒ごとに進捗を取得しています。

7. Flaskと非同期処理で気をつけるポイント

7. Flaskと非同期処理で気をつけるポイント

非同期処理は便利ですが、 同じ変数を同時に触ると問題が起きることがあります。

初心者のうちは、簡単な仕組みで 動きを理解することが大切です。

Flask 非同期 進捗表示、 Flask タスク 進捗管理は、 学習初期によく検索されます。

8. 進捗通知の全体イメージを整理しよう

8. 進捗通知の全体イメージを整理しよう

処理は裏で動き、進捗は数字で管理します。

フロント側は定期的に進捗を確認し、 画面に表示します。

この流れを理解すれば、 Flaskで非同期処理の進捗通知ができます。