Python, Flask, JavaScriptとFetch APIを用いたWebアプリケーション開発

この記事では、PythonのWebフレームワークであるFlaskとJavaScriptのFetch APIを用いて、猫の画像を取得するシンプルなWebアプリケーションの開発について説明します。

FlaskとFetch APIの基本

まず、FlaskとFetch APIの基本について説明します。FlaskはPythonで書かれた軽量なWebフレームワークで、シンプルながら強力な機能を持っています。一方、Fetch APIはJavaScriptで利用できるWeb APIの一つで、非同期通信を行うことができます。

アプリケーションの構成

このアプリケーションは、Flaskで作成したサーバーと、Fetch APIを用いてサーバーと通信するクライアントから構成されます。

サーバー側のコードは以下のようになります。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('hello.html')

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

クライアント側のコードは以下のようになります。

const url = 'https://api.thecatapi.com/v1/images/search?size=full';
const options = { method: 'GET' }

function getCatImage(url, options){
    return fetch(url, options)
    .then( response => response.json() );
}

async function getImage(url, options){
    const response = await getCatImage(url, options);
    const imageDiv = document.getElementById("image");
    const imageElement = document.createElement("img");
    imageElement.src = response[0].url;
    imageElement.className = "w300";
    imageDiv.appendChild(imageElement);
}

document.getElementById("lookCatButton")
.addEventListener("click", () =>{
    getImage(url, options)
})

まとめ

この記事では、PythonのFlaskとJavaScriptのFetch APIを用いて、猫の画像を取得するシンプルなWebアプリケーションの開発方法について説明しました。これらの技術を組み合わせることで、動的なWebアプリケーションを効率的に開発することが可能です。.