PythonだけでモダンなWebアプリが作れる！Reflex入門ガイド【2025年最新】

Tasuke Hub管理人

東証プライム市場上場企業エンジニア

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、複数のプロジェクトでリードエンジニアを担当。技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

PythonだけでWebアプリが作れる「Reflex」とは？

「Webアプリを作りたいけど、JavaScriptやReactの学習コストが高い...」「Pythonのデータ分析ロジックをそのままWebアプリとして公開したい...」

そんなPythonエンジニアの悩みを解決するのが、Reflex（旧Pynecone）です。

2025年現在、Reflexはバージョンアップを重ね、**「Pythonのみで、ReactベースのモダンなSPA（シングルページアプリケーション）を構築できるフレームワーク」**として確固たる地位を築いています。

Reflexの革命的な点

All in Python: フロントエンド（UI）もバックエンド（ロジック/DB）も全てPythonで書けます。
Reactive: Excelのように、変数が変わればUIが自動で更新されます（ReactのState管理をPythonで実現）。
Full Flexibility: 内部ではReactが動いているため、必要であればカスタムReactコンポーネントもラップして使えます。

ベストマッチ

最短で課題解決する一冊

この記事の内容と高い親和性が確認できたベストマッチです。早めにチェックしておきましょう。

動かして学ぶ！Pythonサーバレスアプリ開発入門

Amazonで見る

楽天市場で見る

Yahoo!ショッピングで見る

実践：AIチャットアプリを作ってみよう

論より証拠。Reflexを使って、シンプルなチャットアプリを作ってみましょう。驚くほど少ないコード量で実装できます。

1. インストールとセットアップ

pip install reflex
mkdir my_chat_app
cd my_chat_app
reflex init

2. アプリの実装 (my_chat_app/my_chat_app.py)

以下のコードを記述します。

import reflex as rx
import asyncio

class State(rx.State):
    """アプリケーションの状態（State）を管理するクラス"""
    
    # チャット履歴（タプル: (role, text)）
    messages: list[tuple[str, str]] = [
        ("AI", "こんにちは！何かお手伝いすることはありますか？")
    ]
    
    # 入力中のテキスト
    input_text: str = ""
    
    # ローディング状態
    is_processing: bool = False

    def set_input_text(self, text: str):
        """入力テキストを更新"""
        self.input_text = text

    async def send_message(self):
        """メッセージを送信してAIの応答を取得"""
        if not self.input_text:
            return

        # 処理開始
        self.is_processing = True
        
        # ユーザーのメッセージを追加
        user_msg = self.input_text
        self.messages.append(("User", user_msg))
        self.input_text = ""
        yield # UIを一度更新

        # AIの応答をシミュレート（実際はここでOpenAI APIなどを呼ぶ）
        await asyncio.sleep(1)
        ai_response = f"「{user_msg}」と言いましたね。これはPythonだけで動いています！"
        
        self.messages.append(("AI", ai_response))
        
        # 処理終了
        self.is_processing = False

def chat_bubble(message: tuple[str, str]) -> rx.Component:
    """個別のチャット吹き出しコンポーネント"""
    role, text = message
    return rx.box(
        rx.text(text),
        bg="blue.100" if role == "User" else "gray.100",
        p="4",
        border_radius="xl",
        align_self="flex-end" if role == "User" else "flex-start",
        margin_y="2",
    )

def index() -> rx.Component:
    """メインのUI定義"""
    return rx.container(
        rx.vstack(
            rx.heading("Reflex Chat App", size="lg", margin_bottom="4"),
            
            # チャットエリア
            rx.box(
                rx.foreach(
                    State.messages,
                    chat_bubble
                ),
                width="100%",
                height="60vh",
                overflow_y="auto",
                border="1px solid #e2e8f0",
                border_radius="md",
                padding="4",
            ),
            
            # 入力エリア
            rx.hstack(
                rx.input(
                    placeholder="メッセージを入力...",
                    value=State.input_text,
                    on_change=State.set_input_text,
                    width="100%",
                ),
                rx.button(
                    "送信",
                    on_click=State.send_message,
                    is_loading=State.is_processing,
                    color_scheme="blue",
                ),
                width="100%",
                padding_top="4",
            ),
            padding_y="8",
        )
    )

# アプリの定義
app = rx.App()
app.add_page(index)