Python FlaskとReactを用いたWebアプリケーション開発

Python FlaskとReactを組み合わせてWebアプリケーションを開発する方法について説明します。これらの技術を使用すると、フロントエンドとバックエンドの両方でJavaScriptを使用でき、開発プロセスを効率化できます。

環境構築

まず、PythonとNode.jsをインストールします。次に、仮想環境を設定し、Flaskをインストールします。Reactアプリケーションを初期化するために create-react-app を使用します。

ディレクトリ構造

プロジェクトディレクトリはフロントエンドとバックエンドで分けることが一般的です。以下に一例を示します。

/myapp
  /backend
    server.py
  /frontend
    /src
      App.js

Flaskサーバーの設定

Flaskサーバーは server.py で設定します。以下に一例を示します。

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {'name': 'tarou', 'age': 30, 'job': 'developer'}
    return jsonify(data)

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

このコードでは、/api/data エンドポイントを作成し、GETリクエストを受け取るとJSON形式でデータを返します。

Reactアプリケーションの設定

Reactアプリケーションは App.js で設定します。以下に一例を示します。

import { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('/api/data')
      .then((response) => setData(response.data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <div>
      {data && (
        <div>
          <p>Name: {data.name}</p>
          <p>Age: {data.age}</p>
          <p>Job: {data.job}</p>
        </div>
      )}
    </div>
  );
}

export default App;

このコードでは、Flaskサーバーの /api/data エンドポイントからデータを取得し、表示します。

プロキシの設定

ReactとFlaskが同じマシン上の異なるポートで動作する場合、プロキシを設定する必要があります。これは、Reactの開発サーバーがFlaskのサーバーに直接リクエストを転送するようにすることです。プロキシを設定するには、Reactアプリケーションの package.json ファイルに proxy フィールドを追加します。

{
  "proxy": "http://127.0.0.1:5000",
}

これで、ReactとFlaskを用いたWebアプリケーションの基本的な開発が可能になります。詳細な情報や具体的な手順については、各公式ドキュメンテーションを参照してください。.