この時限を終えると、ブラウザにReflexの基本アプリが表示され、ReflexがPythonコードをどのようにウェブアプリに変えるのかを一言で説明できるようになります。

1-1. Reflexとは (10分)

ウェブアプリは、ふつう2つの部分に分かれます。

• フロントエンド：ブラウザで動く画面。一般的にHTML、CSS、JavaScript（Reactなど）で作ります。
• バックエンド：サーバーで動くロジックとデータ。Python（Django、FastAPI）などで作ります。

通常は両方の言語を学ぶ必要があり、さらに両者をつなぐAPIも設計しなければなりません。Reflexは、フロントエンドもバックエンドもPythonで書けるフルスタックフレームワークです。

仕組みは3つのステップで説明できます。

1. コンパイル：画面を作るPython関数（コンポーネント）を、アプリの起動時に一度だけ実行してReactのコードに変換します。生成物は.web/フォルダに出力されます。
2. 状態はサーバーに：データ（State）とイベント処理関数は、サーバー側のPythonで実行されます。
3. WebSocketで同期：ボタンを押すとブラウザがサーバーにイベントを送り、サーバーは変化した状態だけを返します。すると画面が自動的に再描画されます。

左側の1つのPythonファイルが2つに分かれます。画面の関数はReactにコンパイルされてブラウザへ送られ、Stateはサーバーに残って②→③の往復で画面と同期されます。

1-2. 開発環境の準備 (10分)

uvのインストール：uvは、Pythonのバージョン、仮想環境、パッケージをまとめて管理するツールです。

# Windows (PowerShell)
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

# macOS / Linux
curl -LsSf https://astral.sh/uv/install.sh | sh

Node.jsの確認：Reflexは、画面側（React）のパッケージのインストールと実行にNode.jsかBunを使います。Reflex 0.10はNode 22.22.0以上が必要です。

node -v   # v22.22.0以上であること

1-3. プロジェクトの作成と実行 (10分)

uv init tutorial_261019        # Pythonプロジェクトを作成
cd tutorial_261019
uv add reflex                  # reflexをインストール（pyproject.tomlに記録される）
uv run reflex init             # Reflexアプリのひな形を作成（テンプレートを選択）
uv run reflex run              # 開発サーバーを起動

• uv runは、プロジェクトの仮想環境（.venv）の中でコマンドを実行します。仮想環境を別途有効化する必要はありません。
• reflex initではテンプレートを聞かれます。空のアプリから始めたい場合は、uv run reflex init --template blankのように指定してもかまいません。
• reflex runが完了したら、ログに出るApp running at: http://localhost:3000のアドレスをブラウザで開きます。3000番ポートが使用中の場合は3001番などに変わります。
• 標準では、フロントエンドは3000番、バックエンドは8000番ポートで動きます。
• 初回の実行では画面用のパッケージをダウンロードするため、1~3分かかることがあります。インターネット接続が必要です。
• サーバーを止めるには、ターミナルでCtrl + Cを押します。

ブラウザで確認 — --template blankで作成した直後にhttp://localhost:3000を開くと、この画面が表示されるはずです。右上の太陽アイコンはダークモードの切り替えボタンです。

1-4. Windowsでよく出会うエラー2つ (5分)

講座の準備中に実際に遭遇した問題です。受講者も同じ問題にぶつかる可能性が高いので、あらかじめ案内しておきましょう。

• setxで設定した環境変数は、新しく開いたターミナルから反映されます。VS Codeのターミナルを使っている場合は、VS Code自体も開き直してください。
• wingetで「インストール済みのパッケージが見つかりません」と表示された場合は、winget list --name Nodeで実際のパッケージIDを確認します。

チェックポイント

• node -vが22.22.0以上である。
• uv run reflex runのあと、ブラウザに初期画面が表示される。
• 「画面の関数は1回だけコンパイルされ、イベントの関数はサーバーで毎回実行される」ことを自分の言葉で説明できる。