FlaskでFetch APIを使ってデータ通信する基本手順まとめ！初心者でもわかる実例付き解説
生徒
「先生、Flaskでボタンを押したらサーバーからデータを取ってきたいんですけど、どうすればいいですか？」
先生
「それには、JavaScriptの“Fetch API（フェッチエーピーアイ）”を使う方法があります。Flaskと組み合わせれば、ページをリロードしなくてもデータを送受信できますよ。」
生徒
「Ajaxと似てますか？」
先生
「そうですね。Fetch APIは、Ajaxの新しい形と言えます。よりシンプルで読みやすいコードで、Flaskとのデータ通信を簡単に実現できます。それでは基本の流れを学んでみましょう！」
1. Fetch APIとは？Flaskと通信できる便利な仕組み
Fetch APIとは、JavaScriptを使ってサーバーとデータを送受信するための仕組みです。 ブラウザに最初から用意されている機能なので、特別なライブラリを追加しなくても利用できます。 名前の「Fetch（フェッチ）」は「取りに行く」という意味があり、その名の通りサーバーに対して 「データをください」「この情報を送ります」といったやり取りを行う役割を持っています。
従来のWebページでは、ボタンを押すたびにページ全体を再読み込みするのが一般的でした。 しかしFetch APIを使うと、必要なデータだけを裏側で通信し、画面の一部だけを更新できます。 そのため、操作がスムーズで使いやすいWebアプリを作れるようになります。
たとえば、天気予報サイトで「更新」ボタンを押したときに、画面が一瞬で最新情報に切り替わる動きがあります。 このような「待たされない表示」を実現している技術のひとつがFetch APIです。 Flaskと組み合わせることで、Pythonで処理した結果をそのままJavaScriptに渡し、画面に反映できます。
ここでは仕組みをつかむために、最小限のサンプルを見てみましょう。 次の例は、JavaScriptからサーバーにアクセスして、結果を受け取る基本形です。
<script>
fetch("/data")
.then(response => response.json())
.then(data => {
console.log(data);
});
</script>
このコードでは、fetch("/data")でサーバーのURLにアクセスし、
返ってきたデータをJSONとして受け取っています。
中身の処理は次の章で詳しく説明しますが、
「JavaScriptからFlaskにアクセスできる」という点をここで押さえておけば十分です。
Fetch APIを理解することは、Flaskを使った動的なWebアプリ開発の第一歩です。 この仕組みを知っておくことで、フォーム送信、検索、データ更新など、さまざまな機能を実装できるようになります。
2. FlaskでFetch APIを使うときの全体の流れ
FlaskとFetch APIを組み合わせたデータ通信は、一見すると難しそうに感じるかもしれませんが、 実際の流れはとてもシンプルです。ポイントは「ブラウザ側（JavaScript）」と 「サーバー側（Flask）」が役割分担して動いていることを理解することです。
まず、ユーザーが画面上のボタンをクリックしたり、入力フォームに文字を入力したりすると、 ブラウザ内でJavaScriptが動き始めます。このタイミングでFetch APIが使われ、 Flaskサーバーに対して「このデータを送ります」「この情報をください」といったリクエストを送信します。
- ユーザーがボタンをクリックし、JavaScriptの処理が開始される
- Fetch APIがFlaskサーバーにHTTPリクエストを送信する
- Flaskがリクエスト内容を受け取り、Pythonで処理を行う
- Flaskが処理結果をJSON形式のデータとして返す
- JavaScriptが受け取ったデータを画面に反映する
この一連の流れは、ページ全体を再読み込みすることなく裏側で行われます。 そのため、画面の表示が速く、操作していても待たされにくいWebアプリになります。 FlaskとFetch APIの連携では、この「裏側で通信して表示だけ更新する」という考え方がとても重要です。
この全体像を先に押さえておくことで、後ほど登場するサンプルコードや実装例も、 「今どの段階の処理をしているのか」が自然と分かるようになります。 FlaskとFetch APIを使った通信の基本として、まずはこの流れをしっかり覚えておきましょう。
3. Flaskサーバー側の準備をしよう
ここからは、Fetch APIと通信するためのFlaskサーバー側の準備を進めていきます。 FlaskはPythonでWebアプリを作るための軽量なフレームワークで、初心者でも理解しやすい構造が特徴です。 まずは「サーバーとは何か」「どんな役割を持つのか」を意識しながら読み進めてみてください。
サーバー側の役割は、ブラウザから送られてきたデータを受け取り、必要な処理を行い、 その結果をブラウザに返すことです。Fetch APIは、このサーバーとのやり取りを担当する仕組みなので、 Flask側で「受け取る準備」をしておく必要があります。
まず、Flaskがインストールされていない場合は、ターミナルで次のコマンドを実行してインストールします。 すでにインストール済みの場合は、この作業は不要です。
pip install flask
次に、Flaskアプリの基本となるPythonファイルを作成し、 Fetch APIから送られてくるリクエストを受け取るコードを書いていきます。 以下は、最もシンプルで分かりやすい構成のサンプルです。
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route("/fetch", methods=["POST"])
def fetch_data():
data = request.get_json()
name = data.get("name", "名無し")
message = f"{name}さん、ようこそFetch APIの世界へ！"
return jsonify({"message": message})
if __name__ == "__main__":
app.run(debug=True)
コードの動きをやさしく解説します：
-
Flask(__name__)は、Flaskアプリ本体を作成しています。 これがWebサーバーの土台になります。 -
@app.route("/fetch", methods=["POST"])は、 「/fetch」というURLにPOSTリクエストが来たときの処理を定義しています。 -
request.get_json()で、Fetch APIから送られてきたJSONデータを受け取ります。 -
jsonify()を使うことで、PythonのデータをJSON形式に変換し、ブラウザへ返しています。 -
debug=Trueを指定すると、開発中にエラー内容が分かりやすく表示されます。
この時点では、「Flaskがリクエストを受け取り、JSONを返している」という流れを理解できれば十分です。 次の章では、このサーバーに対してHTMLとFetch APIから実際にデータを送る方法を見ていきます。
4. HTMLとFetch APIを使ってFlaskにデータを送る
ここでは、実際にHTMLとJavaScriptを使ってFlaskサーバーへデータを送信する方法を確認します。 ブラウザ側の役割は「ユーザーの操作を受け取り、その内容をサーバーに伝えること」です。 プログラミング未経験の方は、「入力した内容をそのままFlaskに渡している」と考えると分かりやすいでしょう。
次のサンプルでは、テキストボックスに名前を入力し、「送信」ボタンを押すと、
Fetch APIがFlaskの/fetchにデータを送ります。
ページ全体を再読み込みせずに通信できる点が、この仕組みの大きな特徴です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FlaskとFetch APIの連携</title>
</head>
<body>
<h1>FlaskとFetch APIでデータ通信！</h1>
<input type="text" id="name" placeholder="名前を入力してください">
<button id="sendBtn">送信</button>
<p id="response"></p>
<script>
document.getElementById("sendBtn").addEventListener("click", function() {
const nameValue = document.getElementById("name").value;
fetch("/fetch", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: nameValue })
})
.then(response => response.json())
.then(data => {
document.getElementById("response").textContent = data.message;
})
.catch(error => console.error("エラー:", error));
});
</script>
</body>
</html>
処理の流れをやさしく説明します：
- ボタンがクリックされると、JavaScriptの処理が実行されます。
- 入力された名前を取得し、Fetch APIでFlaskに送信します。
- 送信時は
POSTメソッドを使い、JSON形式でデータを渡します。 - Flaskから返ってきた結果を、そのまま画面に表示しています。
このようにHTMLとFetch APIを組み合わせることで、 フォーム送信やボタン操作をきっかけにサーバーと通信するWebアプリを簡単に作れます。 まずは「入力 → 送信 → 表示」という流れを理解することが大切です。
5. 実行してみよう！Fetch APIとFlaskの動作確認
Flaskのサーバーを起動した状態でブラウザからHTMLを開き、テキストボックスに名前を入力して「送信」ボタンをクリックします。
すると、Flask側でデータを受け取り、次のようなメッセージが返ってきます。
太郎さん、ようこそFetch APIの世界へ！
このように、ページをリロードせずにFlaskと通信できるようになります。
6. Fetch APIのPOSTとGETの違い
Fetch APIにはデータの送信方法が2種類あります。「POST」と「GET」です。
- POST：データをサーバーに送信して処理してもらう（例：フォーム送信）
- GET：サーバーから情報を取得する（例：ページ読み込み時のデータ表示）
今回の例ではPOSTを使いましたが、GETの場合は次のように書きます。
fetch("/data")
.then(response => response.json())
.then(data => console.log(data));
これで、サーバーからデータを取得してブラウザに表示することもできます。
7. Flask側でGETリクエストを処理する方法
GETリクエストをFlaskで受け取る場合は、次のようにします。
@app.route("/data", methods=["GET"])
def get_data():
info = {"language": "Python", "framework": "Flask"}
return jsonify(info)
このコードでは、Flaskが/dataというURLにアクセスしたときに、JSON形式のデータを返します。
Fetch APIを使って取得すれば、画面上にそのデータを簡単に表示できます。
8. FlaskとFetch APIを使うときの注意点
初心者の方がよくつまずくポイントも押さえておきましょう。
- サーバーを起動していないと通信できません。
- Fetchで送るデータは必ず
JSON.stringify()で文字列化する必要があります。 - Flaskのルート（
@app.route）で指定したURLとFetchのURLが一致していることを確認しましょう。 - 日本語を扱う場合、文字化け防止のために
UTF-8を指定することをおすすめします。
9. Flask×Fetch APIでできること
FlaskとFetch APIを使うと、次のような便利なWebアプリを作ることができます。
- リアルタイムチャットアプリ
- 検索結果を即時表示するサイト
- 入力フォームの自動保存機能
- ページの一部分だけ更新するダッシュボード
どれもページをリロードせずにサーバーと通信できるという点が共通しています。 つまり、FlaskとFetch APIを理解すれば、モダンな動的Webアプリケーションを作る第一歩を踏み出せるのです。
まとめ
FlaskとFetch APIで実現できることの全体像
ここまでの記事では、FlaskとFetch APIを組み合わせてデータ通信を行う基本的な流れを、初心者向けに段階的に解説してきました。 FlaskはPythonでシンプルにWebアプリやAPIを作れるフレームワークであり、Fetch APIはJavaScript側からサーバーと通信するための現代的な仕組みです。 この二つを組み合わせることで、ページ全体を再読み込みすることなく、必要なデータだけをやり取りするWebアプリを構築できます。
特に重要なのは、「ブラウザ側でイベントが発生し、Fetch APIがサーバーにリクエストを送り、Flaskが処理してJSONで返し、その結果を画面に反映する」 という一連の流れを理解することです。 この仕組みは、簡単なフォーム送信から複雑な業務アプリまで、幅広い場面で活用できます。
Fetch APIを使うメリットを振り返る
Fetch APIを使う最大のメリットは、ユーザー体験の向上です。 ボタンを押すたびに画面が切り替わる従来のWebページと違い、必要な情報だけを更新できるため、操作がスムーズになります。 また、コードの可読性が高く、JavaScript初心者でも処理の流れを追いやすい点も特徴です。
Flask側では、受け取ったデータをPythonで自由に加工できるため、 計算結果の返却、データベースとの連携、条件分岐によるレスポンスの切り替えなど、さまざまな処理を柔軟に実装できます。 この柔軟性こそが、FlaskとFetch APIの組み合わせが多くの開発現場で使われている理由です。
POSTとGETを使い分ける考え方
記事内でも触れたように、Fetch APIでは主にPOSTとGETの二つの方法を使って通信します。 POSTはデータをサーバーに送って処理してもらう場面に向いており、 GETはサーバーから情報を取得して表示する場面に向いています。 どちらを使うべきか迷った場合は、「データを送るか、受け取るか」という視点で考えると判断しやすくなります。
Flask側では、@app.routeのmethods引数で対応するHTTPメソッドを明示することで、
意図しないアクセスを防ぎ、アプリの構造を分かりやすく保てます。
こうした小さな設計の積み重ねが、後から見返したときに理解しやすいコードにつながります。
シンプルな構成から始めることの大切さ
FlaskとFetch APIを学び始めたばかりの頃は、最初から複雑なアプリを作ろうとしなくても問題ありません。 まずは、テキストを送信してメッセージを受け取る、簡単なサンプルから始めることが大切です。 小さな成功体験を積み重ねることで、通信の仕組みやコードの意味が自然と身についていきます。
実際の開発では、入力チェックやエラー処理、セキュリティ対策など、考慮すべき点が増えていきますが、 基本となる通信の流れが理解できていれば、応用もスムーズに進められます。
基本構成をもう一度コードで確認
# Flask側の基本的なJSONレスポンス例
@app.route("/sample", methods=["POST"])
def sample():
data = request.get_json()
return jsonify({"result": data})
このような最小構成のAPIでも、Fetch APIと組み合わせることで、 動的にデータをやり取りするWebアプリの土台になります。 大切なのは、コードの意味を理解しながら少しずつ積み上げていくことです。
これからの学習につなげるポイント
FlaskとFetch APIの基本を理解できたら、次のステップとして、 データベースとの連携、フォームのバリデーション、エラーハンドリングなどに挑戦してみるとよいでしょう。 また、実際の画面デザインと組み合わせることで、より実用的なWebアプリに近づきます。
今回学んだ内容は、Flaskを使ったWeb開発の土台となる知識です。 繰り返しコードを書き、動作を確認しながら、自分のペースで理解を深めていくことが大切です。
生徒
「Fetch APIとFlaskを使うと、ページを切り替えなくても データをやり取りできる仕組みがよく分かりました。」
先生
「それが理解できたのは大きな一歩ですね。 Webアプリの基本的な通信の考え方が身についていますよ。」
生徒
「最初は難しそうでしたが、 流れで考えると意外とシンプルでした。」
先生
「その通りです。 小さなサンプルを動かしながら学ぶことで、 FlaskとFetch APIの連携は自然と理解できます。」
生徒
「次はデータベースとつなげて、 もっと実用的なアプリを作ってみたいです。」
先生
「とても良い目標ですね。 今日学んだ基礎を活かして、 少しずつレベルアップしていきましょう。」
