Pythonだけでフロントからバックまで！「Reflex」で作るモダンWebアプリケーション入門

Webアプリケーションを開発するとき、「フロントエンドはJavaScript/TypeScriptで、バックエンドはPythonで……」と技術スタックを分けることに負担を感じたことはありませんか？データサイエンスや機械学習のモデルをサクッとWebアプリに落とし込みたい時など、言語のスイッチングコストは意外と大きいものです。

そこで今回ご紹介したいのが、フロントエンドからバックエンドまで、すべてPythonだけで記述できるフルスタックフレームワーク「Reflex（リフレックス）」です。

Reflexとは？

Reflexは、Pythonのコードから美しくインタラクティブなWebアプリケーションを構築できるオープンソースライブラリです。旧名称は「Pynecone」として知られていました。

最大の特長は、内部的にフロントエンドへReact/Next.js、バックエンドへFastAPIを採用していながら、開発者はJavaScriptを1行も書く必要がない点にあります。UIコンポーネントの定義から状態管理（State）、イベントハンドリングまで、すべてピュアなPythonで完結します。

「Streamlitだと自由度が足りないけれど、Next.jsを一から学ぶのは大変……」という方に、まさにぴったりな選択肢なんですよ。

Reflexを採用するメリット

学習コストの大幅な削減
HTML、CSS、JavaScriptの細かな文法を習得していなくても、Pythonの知識さえあればモダンなUIを構築できます。
リアクティブな状態管理が簡単
Pythonのクラスを定義するだけで、Reactのようなリアクティブな状態管理（ステート管理）が直感的に行えます。
豊富な組み込みコンポーネント
Radix UIをベースにした美しくアクセシビリティの高いUIパーツが標準で用意されており、デザインの手間を減らせます。
本番環境に耐えうるアーキテクチャ
プロトタイピングツールにとどまらず、Next.jsとFastAPIによる高パフォーマンスなWebアプリとしてデプロイ可能です。

サンプルコード：シンプルなインタラクティブ・カウンター

まずは Reflex の世界観を体験してみましょう。状態（State）を定義し、ボタン操作で数値を増減させる最小限のカウンターアプリです。

pip install reflex

import reflex as rx

# 状態管理を行うStateクラス
class State(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

# UIの定義
def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.heading("カウンターアプリ", size="8"),
            rx.text(f"現在のカウント: {State.count}", font_size="2em"),
            rx.hstack(
                rx.button("減少", on_click=State.decrement, color_scheme="red"),
                rx.button("増加", on_click=State.increment, color_scheme="green"),
                spacing="4",
            ),
            spacing="4",
            align="center",
            justify="center",
            min_height="80vh",
        )
    )

# アプリケーションの作成とルートの登録
app = rx.App()
app.add_page(index)

コードを実行するときは、ターミナルで reflex run と入力するだけです。ホットリロードにも対応しているので、保存するたびに画面が即座に反映されますよ。

みーちゃんのワンポイント

Reflexは裏側でNode.js環境を利用してReactコードを生成しているため、初回実行時にはNode.jsが自動セットアップされます。また、状態（rx.State）に持たせる変数には必ず型アノテーションを明記する必要がある点に注意してくださいね。型を正確に定義することで、フロントエンドとの同期が安全かつスムーズに行われます。

追記

※2026年10月8日公開のReflex 0.10.0からPython 3.10のサポートが終了しています。

※Reflexでは、内部で reflex という名前を使用しているため、フォルダ名に「Reflex」は使用できません。