先生と生徒の会話形式で理解しよう

生徒

「FlaskとReactを同じプロジェクトで使いたいです。テンプレートとSPAを両方使うってどういうことですか？」

先生

「FlaskはPythonで作るサーバー、ReactはJavaScriptで作るフロントエンドです。Flaskが“料理を作るキッチン”、Reactが“料理を出すお皿”のような関係です。同じお店で両方使う構成を作るのが今回のテーマです。」

生徒

「なるほど！実際にはどう構成すれば良いですか？」

先生

「それでは、FlaskとReactを共存させる構成を、初心者でも分かるように見ていきましょう。」

1. FlaskとReactの基本を理解しよう

まず、Flask（フラスク）とは、Pythonで作る軽量なWebアプリケーションのフレームワークです。サーバー側でデータを処理したり、Webページを生成するのが得意です。

一方、React（リアクト）は、JavaScriptで作るフロントエンドのライブラリです。ボタンを押したときに素早く画面を切り替えたり、データを動的に表示するのが得意です。

この2つをうまく組み合わせることで、「SEOに強いページ」と「操作性の高いSPA（シングルページアプリ）」を両立できます。

2. FlaskテンプレートとSPAを併用する構成とは？

Flaskでは、HTMLをサーバーで作って返す「テンプレート方式（Jinja2）」があります。これは検索エンジンに内容を理解してもらいやすく、ブログや会社紹介ページなどに向いています。

一方、Reactで作るSPA（Single Page Application）は、最初に1枚のHTMLを読み込み、画面の切り替えをJavaScriptで行います。アプリのようなスムーズな操作ができます。

これらを併用する構成は次のようになります。

トップページやSEOが大事なページ → Flaskテンプレート（Jinja2）
ユーザーが操作するアプリ部分 → ReactのSPA
データ通信部分 → FlaskのAPI（JSON形式）

3. FlaskとReactのフォルダ構成例

初心者がイメージしやすいように、実際のフォルダ構成を見てみましょう。


project/
├── backend/
│   ├── app.py              # Flaskアプリのメインファイル
│   ├── templates/          # Jinja2テンプレートを入れる
│   └── static/             # Reactをビルドしたファイルを置く場所
└── frontend/
    ├── package.json        # Reactの設定ファイル
    └── src/                # Reactのソースコード

FlaskのtemplatesフォルダにHTMLを置くと、render_template()関数で画面を返すことができます。一方、Reactのビルド後のファイルをstaticフォルダに置くと、Flaskが自動的に配信してくれます。

4. Flask側の基本コード例


from flask import Flask, render_template, jsonify

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/api/message")
def get_message():
    return jsonify({"message": "こんにちは、FlaskとReactの世界へようこそ！"})

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

このように、Flaskで/ルートをテンプレートで表示し、/api/messageのようにAPIも同時に提供できます。

5. React側でFlaskのAPIを呼び出す例

ReactのコンポーネントからFlaskのAPIを呼び出してみましょう。


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

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/message')
      .then(res => res.json())
      .then(data => setMessage(data.message));
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;

ReactがFlaskのAPIにアクセスしてデータを受け取り、画面に表示します。開発中はCORS（異なるドメイン間の通信）設定が必要な場合もあります。Flask拡張のflask-corsを使うと便利です。