Python FlaskとJavaScriptの連携

PythonのFlaskとJavaScriptを連携させる方法について解説します。この記事では、Flaskで作成したAPIを素のJavaScriptで実行し、ブラウザ上で表示する方法を紹介します。

FlaskでAPIを作成

まずは、PythonのFlaskでAPIを作成します。以下に簡単なコードを示します。

from flask import Flask, jsonify, abort, make_response, render_template, request
from flask_cors import CORS

api = Flask(__name__)
CORS(api)  # CORS有効化

@api.route('/get', methods=['GET'])  # Getだけ受け付ける
def get():
    result = ""
    with open("./datafile", mode='r') as f:
        result += f.read()
    return result

@api.route('/post', methods=['POST'])  # Postだけ受け付ける
def post():
    result = request.form["param"]
    with open("./datafile", mode='a') as f:
        f.write(result + "\\n")
    return make_response(result)

このコードでは、/getと/postの2つのエンドポイントを作成しています。/getはファイルの内容を読み込んで返し、/postは送られてきたデータをファイルに書き込みます。

JavaScriptでAPIを実行

次に、JavaScriptで上記のAPIを実行します。以下にそのコードを示します。

function get_func(url) {
    fetch(url)
    .then(function(response) {
        return response.text();
    })
    .then(function(text) {
        let view = document.getElementById("view")
        view.textContent = ""
        text.split("\\n").forEach((value) => {
            view.insertAdjacentHTML('beforeend', value);
            view.insertAdjacentHTML('beforeend', "<br>");
        })
    });
}

function post_func(url) {
    let formData = new FormData();
    formData.append('param', document.getElementById('post_param').value);
    fetch(url, {
        method: 'POST',
        body: formData,
    })
    .then(function() {
        get_func('APIのGet用URL');
    });
}

このコードでは、get_func関数とpost_func関数を定義しています。get_func関数は指定したURLからデータを取得し、post_func関数は指定したURLにデータを送信します。

以上がPythonのFlaskとJavaScriptを連携させる基本的な方法です。これを応用することで、より複雑なWebアプリケーションを作成することが可能です。.